カスタマイズビュー

カスタマイズビューとは

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 つのポイント

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

1. 特定の一覧でのみカスタマイズを適用する

レコード一覧のイベントでカスタマイズを適用すると、すべての一覧に対して、カスタマイズが反映されてしまいます。
作成したカスタマイズビューだけカスタマイズを適用したい場合には、イベントオブジェクトの 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;
  }
  // カスタマイズビューに反映させる処理
});

2. ベースとなる HTML と JavaScript カスタマイズを組み合わせる

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

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

3. 「ページネーションを表示する」

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

インクリメンタルサーチができるカスタマイズビューを作ろう

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

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

STEP1：カスタマイズビューを作る

問い合わせ管理アプリを 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 をメモしておきます。カスタマイズファイルで利用します。

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

STEP2：カスタマイズファイルを作る

今回のカスタマイズファイルを作成しましょう。
ここでは、例としてファイル名を「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="qTyle"></div>
    </li>
    `
};

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

1
2


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

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

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

STEP3：カスタマイズを適用する

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

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

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

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

動作確認

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

まとめ

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

はじめよう kintone API