kintoneのカスタマイズビューは、表形式やカレンダー形式の一覧の代わりに、HTMLで自由に表示をカスタマイズできる一覧です。
カスタマイズビューと、レコード一覧イベントを使ったJavaScriptカスタマイズを組み合わせると、レコードの一覧を表計算ソフトやカード形式のような見た目で表示させることができます。

カスタマイズビューでは、レコードの一覧の表示形式を「カスタマイズ」に設定して、一覧を作成します。
カスタマイズ形式の一覧を作成または編集するには、kintoneシステム管理権限が必要です。

手始めに「Hello World!」と表示させるだけのカスタマイズビューを作ってみましょう。

まず、何もフィールドを配置せずにアプリを作成します。

次に、レコードの一覧の表示形式を「カスタマイズ」に設定して、一覧を作成します。
手順の詳細は、 一覧を設定する を確認してください。

• 「一覧ID」の値をメモに控えておきましょう。

• 「ページネーションを表示する」のチェックは選択したままにします。

• HTMLには、次の内容を記載します。

  1 2	<div id="customizeview-simple"> </div>

カスタマイズファイルを作成します。次の内容をテキストエディタに貼り付け、ファイルを保存します。

• 4行目の一覧IDを、一覧を作成するときに確認した「一覧ID」の値に置き換えます。
• ファイル名は任意ですが、ファイルの拡張子は「js」にしてください。
  ここでは例として、「customizeview-simple.js」とします。
• 文字コードは「UTF-8（BOMなし）」を指定してください。

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

(()=> {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    const viewId = 一覧ID;
    if (event.viewId !== viewId) {
      return event;
    }
    // カスタマイズビューに表示させる内容
    const divEl = document.getElementById('customizeview-simple');
    const pEl = document.createElement('p');
    pEl.textContent = 'Hello World!';
    divEl.appendChild(pEl);
    return event;
  });
})();

最後に、カスタマイズファイルをアプリに適用します。
手順の詳細は、 JavaScript / CSSファイルを取り込む を確認してください。

「PC用のJavaScriptファイル」に、作成した「customizeview-simple.js」を指定します。
画面左上の【保存】をクリックし、画面右上の【アプリを更新】をクリックします。

カスタマイズビューを開いて、「Hello Word!」と表示されれば成功です。

カスタマイズビューを作るときのポイントは3つあります。

レコード一覧のイベントでカスタマイズを適用すると、すべての一覧に対して、カスタマイズが反映されてしまいます。
作成したカスタマイズビューだけカスタマイズを適用したい場合には、イベントオブジェクトのviewIdとカスタマイズビューの一覧IDを照合させます。
IDが一致しなければ、カスタマイズを反映させないようにします。

1
2
3
4
5
6
7
8

kintone.events.on('app.record.index.show', (event) => {
  const viewId = 一覧ID;
  // 開いた一覧のIDと一致しなかったら、イベントオブジェクトを返す
  if (event.viewId !== viewId) {
    return event;
  }
  // カスタマイズビューに反映させる処理
});

カスタマイズビューでは、あらかじめ一覧の設定の「HTML」に、ベースとなるHTMLを書いておきます。
レコードの情報などの動的に表示させたい内容は、アプリに適用したJavaScriptファイルでデータを生成し、ベースとなるHTMLに差し込んで表示させます。

先ほどの例では、「HTML」にdiv要素だけのベースとなるHTMLを書き、カスタマイズファイルで「Hello World!」という内容の要素を生成して表示させました。

例では、レコードの内容を使いませんでしたが、カスタマイズビューでは、イベントオブジェクトのレコードの情報を使うことが多いです。
「ページネーションを表示する」のチェックボックスを選択すると、レコード一覧画面を表示したとき、イベントオブジェクトでレコード情報が返されます。
イベントオブジェクトのレコード情報を利用する場合は、チェックを選択しておきましょう。

アプリストアの 問い合わせ管理アプリ を使って、インクリメンタルサーチができる一覧を作ってみましょう。

今回は、インクリメンタルサーチができる一覧を作るために、 Listjs というライブラリを利用します。

問い合わせ管理アプリ をkintoneに追加しましょう。
「サンプルデータを含める」のチェックボックスを選択した状態で、アプリを追加してください。

次に、レコードの一覧の表示形式を「カスタマイズ」に設定して、一覧を作成します。
HTMLには、次の内容を記述します。

1
2
3
4
5

<div id="customizeview-listjs">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">ソート</button>
  <ul class="list"></ul>
</div>

このとき、一覧IDをメモしておきます。カスタマイズファイルで利用します。

最後に、画面左上の【保存】をクリックし、画面右上の【アプリを更新】をクリックします。

今回のカスタマイズファイルを作成しましょう。
ここでは、例としてファイル名を「customizeview-listjs.js」とします。
文字コードは「UTF-8（BOMなし）」を指定してください。

このカスタマイズでは、レコードの一覧画面を表示したときのイベントを利用します。
特定のカスタマイズビューだけカスタマイズを適用したい場合は、イベントオブジェクトのviewIdとカスタマイズビューの一覧IDを照合させるんでしたね。
STEP1でメモしておいた一覧IDに置き換えます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

(()=> {
  'use strict';
  // レコード一覧画面を表示したときのイベント
  kintone.events.on('app.record.index.show', (event) => {
    const viewId = 一覧ID;
    if (event.viewId !== viewId) {
      return event;
    }

    // List.jsを使って一覧を作成する処理が続く
    // 1. 一覧の項目に表示する内容を作る
    // 2. 一覧の項目を作成する
    // 3. 一覧を作成する

    return event;
  });
})();

次に、List.jsの使い方をドキュメントで確認しましょう。
List.jsは、 Really simple examples というページでさまざまなサンプルコードを公開しています。
今回は「Example 2: Create list on initialization: Version 1」を参考に、イベントオブジェクトのレコード情報を使って、一覧を作っていきましょう。
これから出てくるコードを、カスタマイズファイル内の同じコメントの箇所と置き換えてください。

まず、一覧の項目に表示する内容を作ります。
mapメソッドを使って、キーと値が対となるようにレコードオブジェクトの配列を整形します。

1
2
3
4
5
6
7
8

// 1. 一覧の項目に表示する内容を作る
const values = event.records.map((record) => {
  return {
    customer: record.Customer.value,
    detail: record.Detail.value,
    qType: record.QType.value
  };
});

続いて、一覧の項目として、valueNamesとitemをそれぞれキーにもつオブジェクトを作ります。

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

// 2. 一覧の項目を作成する
const options =
{
  valueNames: ['id', 'customer', 'detail', 'qType'],
  item: `
    <li>
      <div class="customer"></div>
      <div class="detail"></div>
      <div class="qType"></div>
    </li>
    `
};

最後に、一覧を生成します。
今回、一覧を表示する要素のIDは、customizeview-listjsなので、Listの第一引数に指定します。

1
2

// 3. 一覧を作成する
new List('customizeview-listjs', options, values);

これで、List.jsを使った一覧のカスタマイズファイルが完成しました。

次のステップで、カスタマイズを適用していきましょう。

カスタマイズをアプリに適用します。

「PC用のJavaScriptファイル」に、次の順でURLとファイルを指定します。

1. https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js
2. customizeview-listjs（カスタマイズファイル）

画面左上の【保存】をクリックし、画面右上の【アプリを更新】をクリックすれば完了です。

kintoneで一覧画面を開いてみましょう。
レコードの内容が表示されて、インクリメンタルサーチができたら成功です。

今回は、カスタマイズビューについて学習しました。
HTMLの知識が必要ではありますが、カスタマイズビューを使えば幅広いことができます。
次回は、 Webhookを使ってみよう について学習しましょう。