第 7 回 カスタマイズビューを利用してみよう

著者名: 落合 雄一 (External link)

目次

information

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

はじめに

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

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

カスタマイズビューの設定

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

カスタマイズ形式の一覧を作成、または編集するには 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 が実行されてしまいますね。
最初からあった表形式の一覧を表示しているときには動作せず、カスタマイズビューのときだけ動作するというような処理を書きたい場合にはどのようにすればよいのでしょうか?

方法 1: イベントオブジェクトのプロパティを利用する

カスタマイズビューを作るときに「一覧 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('カスタマイズビュー入りました');
  });
})();

方法 2: カスタマイズビューの DOM 要素を利用する

こちらは、カスタマイズビューを作成する際に入力する HTML で、他の一覧には存在しない要素 ID をあらかじめ書いておき、レコード一覧画面の表示後イベントで呼び出された際に有無を判定する方法です。
今回のサンプルでは全体をくくる dividmy-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 やサンプルを紹介しますので合わせて確認してください。

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

information

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

デモ環境

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

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