初めてkintoneをカスタマイズする人がkintone APIの基礎知識を学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう kintone API

今回は、カスタマイズビューを利用した他のサンプル/Tipsへの橋渡しになるように、レコード一覧データ取得とカスタマイズビューを組み合わせる基本的な方法を紹介します。

今回の題材としては、 第 5 回 レコードの値を取得してみよう（一覧画面編）の信号機アプリを再利用していきますので、再度設定を確認してください。
それと、カスタマイズビューとはいえ一覧画面でレコード取得したデータを利用することに何の違いもありませんので、自信のない方はもう一度復習してみてください。

それではさっそく、準備した信号機アプリにカスタマイズビューを設定していきましょう！
設定方法については、kintoneユーザーヘルプの 一覧を設定する にもありますが順を追って説明します。
操作はアプリの設定から、一覧の追加で行います。

カスタマイズ形式の一覧を作成、または編集するにはkintoneシステム管理権限が必要です。

• 一覧名
  一覧表示を切り替えるドロップダウンに使われる値ですので、任意に設定していただいて結構です。
  管理上使いやすいと思う名前をつけてください。

• レコード一覧の表示形式
  「カスタマイズ」を選択してください。

• 一覧ID
  kintoneによって自動的に振られる数値で、作成する都度違うものが割り当てられます。
  これはあとで使いますので、図の赤で囲った部分に表示されている値を画面で確認して忘れないようにメモしておいてください。

  また、今回はページネーションを利用しますので、チェックが入っていることを確認してください。
  ここのチェックが外れていると、たとえレコード件数が何件あろうともevent.recordsの戻りが空の配列になってしまいます。
  これはカスタマイズビューを使う上で非常に重要なことなのでぜひ覚えておいてください。

• HTML
  ここへ入力した値（HTMLコード）が一覧画面のデータ表示部に置き換わります。
  以下で記述した内容については、あとで解説しますね！

  1 2 3 4 5 6 7 8 9 10 11 12 13

  <div id="my-customized-view"> <table border="1"> <thead> <tr> <th>レコード番号</th> <th>信号機</th> <th>作成日時</th> </tr> </thead> <tbody id="my-tbody"> </tbody> </table> </div>

ここまで入力できたらいつものように保存し、設定完了してください。
また、合わせてJavaScript/CSSでカスタマイズの項を確認し、第5回で使ったファイルがまだ残っているようでしたら削除しておいてください。

保存後に一覧画面へ戻って、先ほど設定した名前の一覧を選択すると作成したカスタマイズビューを見ることができます。
今は図のようにデータは表示されていませんが、その部分はこれから作っていきますので気にしないでください。

先にも説明したとおり、カスタマイズビューも一覧画面には変わりありませんので、いつものようにレコード一覧画面の表示後イベントのapp.record.index.showを使います。

1
2
3
4
5
6
7
8

(() => {
  'use strict';

  // レコード一覧画面
  kintone.events.on('app.record.index.show', (event) => {
    // ここに処理を記述
  });
})();

それではいよいよ取得した一覧データを利用してカスタマイズビューに表示させたいところですが、少し待ってください。
今の信号機アプリには、第5回で扱った表形式のものと今回作成したカスタマイズビュー用のものと2種類の一覧が存在しているはずです。
このまま記述したのでは、どちらを選択していても同じJavaScriptが実行されてしまいますね。
最初からあった表形式の一覧を表示しているときには動作せず、カスタマイズビューのときだけ動作するというような処理を書きたい場合にはどのようにすればよいのでしょうか？

カスタマイズビューを作るときに「一覧ID」に表示されているものをメモしたのを思い出してみてください。
まずはこの「一覧ID」を利用する方法を紹介します。
もう一度 レコード一覧画面を表示した後のイベントのイベントオブジェクトのプロパティを確認してみましょう。

プロパティ名のところに、viewIdというのがあります。
ここに、一覧IDが入っていることを確認するため、以下のJavaScriptを動かしてみましょう。
event.viewIdと比較する数値は、先ほどメモしていただいた値に書き換えてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewId !== 139967) {
      return;
    }

    window.alert('カスタマイズビューはじめました');
  });
})();

カスタマイズビューを選択しているときにのみ、alertが表示されました！

同じことはイベントオブジェクトのevent.viewNameでもできるんで、ついでに確認してみましょう。
先ほど任意で設定していただいた、「一覧名」の値を利用することになります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewName !== 'カスタマイズビュー') {
      return;
    }

    window.alert('カスタマイズビュー入りました');
  });
})();

こちらは、カスタマイズビューを作成する際に入力するHTMLで、他の一覧には存在しない要素IDをあらかじめ書いておき、レコード一覧画面の表示後イベントで呼び出された際に有無を判定する方法です。
今回のサンプルでは全体をくくるdivのidにmy-customized-viewを記述していますので、このDOM要素取得可否を条件に利用してみます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    if (!document.getElementById('my-customized-view')) {
      return;
    }

    window.alert('カスタマイズビューきてます');
  });
})();

さて、それでは一覧で取得したrecordオブジェクトの中身をカスタマイズビューに反映していきましょう。

もうお気付きの方もいらっしゃると思いますが、HTMLの<tbody id="my-tbody">に子要素をDOM操作して入れていくだけです。
はじめようシリーズを読んで下さった皆さんは、レコード一覧取得やDOM操作はマスターしていることと思いますので、このあたりについて詳しい説明は省略します。
以下のサンプルを利用して皆さんのアプリに応用してみてください。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    if (event.viewName !== 'カスタマイズビュー') {
      return;
    }

    const records = event.records;
    if (records.length === 0) {
      document.getElementById('my-customized-view').innerText = '表示するレコードがありません';
      return;
    }

    const recUrl = location.protocol + '//' + location.hostname + '/k/' + kintone.app.getId() + '/show#record=';
    const myRecordSpace = document.getElementById('my-tbody');
    myRecordSpace.innerText = '';

    for (let i = 0; i < records.length; i++) {
      const record = records[i];
      const row = myRecordSpace.insertRow(myRecordSpace.rows.length);
      const cell1 = row.insertCell(0);
      const cell2 = row.insertCell(1);
      const cell3 = row.insertCell(2);

      const tmpA = document.createElement('a');
      tmpA.href = recUrl + record.レコード番号.value;
      tmpA.innerText = record.レコード番号.value;
      cell1.appendChild(tmpA);

      cell2.innerText = record.信号の色.value;

      const createdAt = new Date(record.作成日時.value);
      cell3.innerText = createdAt.toLocaleString();
    }
  });
})();

今はまだ単純なテーブルレイアウトなので、正直しょぼいと思う方もいるかもしれませんね。
しかし、カスタマイズビューで好きなようにHTMLコードやCSSを書いてあげれば、いくらでもカッコ良くしていくことが出来そうです。

いかがでしょう？
カスタマイズビューの基本について、これでお分かりいただけましたでしょうか？
一覧画面をよりリッチにしていこうとした場合、カスタマイズビューは非常に有効な機能です。
今後の皆さんの参考のため、いくつかのTipsやサンプルを紹介しますので合わせて確認してください。

• カスタマイズビューと CSS フレームワークでオリジナルのビューを作る方法
• 予算アプリと実績アプリの集計表をカスタマイズビューに表示する

また、ページネーションを利用しない場合にevent.records以外でレコード一覧を取得する方法について今回は触れませんでした。
そのあたりについて、実は上記に取り上げたサンプル/Tipsの中にはその問題を解決しているものもあるのですが、詳しくはまた別の回に紹介したいと思います。

このTipsは、2022年7月版kintoneで動作を確認しています。

デモ環境で実際に動作を確認できます。
https://dev-demo.cybozu.com/k/12/

ログイン情報は cybozu developer network デモ環境で確認してください。