第 12 回 kintone JavaScript カスタマイズで kintone のデータを見てみる

固定リンクがコピーされました

（kintone エバンジェリスト）

前回ではkintone JavaScriptカスタマイズとは何か、カスタマイズのための事前知識を学習しました。
ここからは少しずつ実際にkintoneを使っていきたいと思います。
今回はJavaScriptカスタマイズで扱うkintoneのrecordデータがどういうものかを確認するため、実際にJavaScriptでkintoneのデータを取得して、表示してみましょう。
レコード詳細画面とレコード一覧画面でそれぞれコンソールにデータを表示するスクリプトを書いてみます。
JavaScriptカスタマイズにおいてkintoneのrecordデータの参照や操作は基本的なことですのでしっかり抑えましょう。

アプリの用意

固定リンクがコピーされました

さっそく、アプリを用意してJavaScriptカスタマイズをします。
次の画像にしたがってアプリストアから「顧客リスト」をインストールして、設定変更しましょう。

トップページから「＋」ボタンを押してアプリを作成します。
アプリストアから「顧客リスト」を追加します。
アプリがインストールされ、アプリを開くと顧客リスト一覧が表示されます。
以降は、コードを書いてきますので、同じくアプリの設定を開き、JSEditからコードを入力できるようにしておきます。
詳細は前回の記事を参照してください。

レコード詳細画面でのデータ取得と表示

固定リンクがコピーされました

kintoneカスタマイズでは、次のように書くとレコード詳細画面のデータを出力できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    console.log('------------------------');
    console.log('会社名:', record.会社名.value);
    console.log('部署名:', record.部署名.value);
    console.log('担当者名:', record.担当者名.value);
  });
})();

ここからはこちらのコードを1つずつ解説していきます。

STEP1：`kintone.events.on()`を使って、「詳細画面が表示されたとき」の "イベント" を作成

固定リンクがコピーされました

参考：イベント処理の記述方法

kintone.events.on()の括弧の中には、第一引数と第二引数を書きます。
まず、第一引数には「詳細画面が表示されたとき」というイベントを表す'app.record.detail.show'を書きます。
参考：レコード詳細画面を表示した後のイベント

第二引数に(event) => {...}と、詳細画面が表示されたときに実行するコード を書きます。

1
2
3


kintone.events.on('app.record.detail.show', (event) => {
  // 処理内容
});

STEP2：実行するコードの定義

固定リンクがコピーされました

実行するコードを関数を使って定義していきます。
関数についてわからなければ第9回を確認してください。
ひとまず、何をするにもレコードをまずは取得しなければいけませんが、変数eventにレコードデータなどが記載されますのでそれを利用します。
変数eventにどんなデータが入っているか詳細はイベントオブジェクトのプロパティを確認してください。

1
2
3


kintone.events.on('app.record.detail.show', (event) => {
  const record = event.record; // event に入っているレコードのデータを利用します
});

STEP3：コンソールログに出力

固定リンクがコピーされました

最後に、コンソールへ出力する部分を記述して完成です。
console.log()には複数データを渡して表示できますので、わかりやすく表示するために「会社名：」などのラベルをつけています。
関数に複数の引数を渡す場合はconsole.log('データ1', 'データ2')という風にカンマ区切りで渡せます。

1
2
3
4
5
6
7
8


kintone.events.on('app.record.detail.show', (event) => {
  const record = event.record;
  console.log('------------------------');
  // コンソールに会社名・部署名・担当者名を出力
  console.log('会社名:', record.会社名.value); // フィールドコード「会社名」のデータを表示します
  console.log('部署名:', record.部署名.value); // フィールドコード「部署名」のデータを表示します
  console.log('担当者名:', record.担当者名.value); // フィールドコード「担当者名」のデータを表示します
});

JSEditに書いた内容を保存して、詳細画面を開き、開発者ツールを開いて確認しましょう。

`record`のデータの型

固定リンクがコピーされました

先に書いた、record.フィールドコード.valueというkintoneのレコードデータを表示した部分について見ていきましょう。
kintoneで扱うrecordはObjectというデータ型になっています。

Object型は、record.フィールドコード.valueというように .（ドット）で数珠つなぎにしてデータを取得します。
このようにrecordの中に複数のデータをもつことができる型をObject型と呼びます。
recordの中にはそのレコードのすべてのフィールドのデータが格納されています。

recordデータのイメージは次のとおりです。

1
2
3
4


record ┬ フィールドコード─value
       ├ 会社名─value (フィールドコード「会社名」の値が入っている)
       ├ 部署名─value (フィールドコード「部署名」の値が入っている)
       └ 担当者名─value (フィールドコード「担当者名」の値が入っている)

kintoneカスタマイズをする中での基本なので、必ず抑えておきましょう。

レコード一覧画面でのデータ取得と表示

固定リンクがコピーされました

kintoneカスタマイズでは、次のように書くとレコード一覧画面のデータを出力できます。

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


(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    const records = event.records;
    for (let i = 0; i < records.length; i++) { // for 文内のインデックス変数は再代入(i = i + 1)するため、let で宣言します
      console.log('------------------------');
      console.log('会社名:', records[i].会社名.value);
      console.log('部署名:', records[i].部署名.value);
      console.log('担当者名:', records[i].担当者名.value);
    }
  });
})();

それぞれ説明していきます。

STEP1：`kintone.events.on()`を使って、一覧画面が表示されたときの "イベント" を作成

固定リンクがコピーされました

前述のレコード詳細画面の場合と同様に、kintone.events.on()の括弧の中に、第一引数と第二引数を書きます。
まず、第一引数には「一覧画面が表示されたとき」というイベントを表す'app.record.index.show'を書きます。参考：レコード一覧画面を表示した後のイベント第二引数に (event) => {...}と、一覧画面が表示されたときに実行するコード を書きます。

1
2
3


kintone.events.on('app.record.index.show', (event) => {
  // 処理内容
});

STEP2：実行するコードの定義

固定リンクがコピーされました

変数eventにどんなデータが入っているか詳細はイベントオブジェクトのプロパティを確認してください。
詳細ページと違い、複数のレコードを取得できるので、レコードを表す変数名はrecordsという複数系になっています。
詳細は後で説明します。

1
2
3


kintone.events.on('app.record.index.show', (event) => {
  const records = event.records; // eに入っているレコードのデータを利用します
});

STEP3：コンソールログに出力

固定リンクがコピーされました

最後に、コンソールへ出力する部分を記述して完成です。
詳細ページと違い、複数のrecordがありますので、for文を使ってひとつずつデータを表示していきます。
for文については第 7 回を参照してください。

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


(() => {
  'use strict';
  kintone.events.on('app.record.index.show', (event) => {
    const records = event.records;
    for (let i = 0; i < records.length; i++) { // ループしてデータを一つずつ表示
      console.log('------------------------');
      console.log('会社名:', records[i].会社名.value); // フィールドコード「会社名」のデータを表示します
      console.log('部署名:', records[i].部署名.value); // フィールドコード「部署名」のデータを表示します
      console.log('担当者名:', records[i].担当者名.value); // フィールドコード「担当者名」のデータを表示します
    }
  });
})();

先ほどのレコード詳細画面でのデータ取得と表示で作成したJavaScriptファイルに上書きするか、JSEditにて新しくJavaScriptファイルを作成しましょう。
JSEditに書いた内容を保存して、レコード一覧画面を表示し、開発者ツールを開いて確認しましょう。

`records`（`record`の複数形）のデータの型

固定リンクがコピーされました

kintoneで扱うrecordはObjectというデータ型になっていると説明しましたが、今回のようなrecords変数は配列型データです。
一覧ページでは、recordを配列形式にしたrecordsデータが使えます。

recordsデータのイメージは次のとおりです。

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


records ┬ [0] ┬ フィールドコード─value
        │     ├ 会社名─value (フィールドコード「会社名」の値が入っている)
        │     ├ 部署名─value (フィールドコード「部署名」の値が入っている)
        │     └ 担当者名─value (フィールドコード「担当者名」の値が入っている)
        │
        ├ [1] ┬ フィールドコード─value
        │     ├ 会社名─value (フィールドコード「会社名」の値が入っている)
        │     ├ 部署名─value (フィールドコード「部署名」の値が入っている)
        │     └ 担当者名─value (フィールドコード「担当者名」の値が入っている)
        :
         中略
        :
        └ [9] ┬フィールドコード─value
              ├ 会社名─value (フィールドコード「会社名」の値が入っている)
              ├ 部署名─value (フィールドコード「部署名」の値が入っている)
              └ 担当者名─value (フィールドコード「担当者名」の値が入っている)

上記のように、recordsにはrecordデータが複数格納されており、それぞれ会社名のデータを取得するには次のようにします。

1
2
3
4


records[0].会社名.value; // 1番目のデータ(index番号は0スタート)
records[1].会社名.value; // 2番目のデータ
records[2].会社名.value; // 3番目のデータ
records[3].会社名.value; // 4番目のデータ

完成コード

固定リンクがコピーされました

詳細レコード表示時と一覧レコード表示時のコードは、ひとつのコードにまとめることができます。

 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


/*
 * Sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
*/
(() => {
  'use strict';
  // レコード詳細画面表示時の処理
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    console.log('------------------------');
    console.log('会社名:', record.会社名.value);
    console.log('部署名:', record.部署名.value);
    console.log('担当者名:', record.担当者名.value);
  });

  // レコード一覧画面表示時の処理
  kintone.events.on('app.record.index.show', (event) => {
    const records = event.records;
    for (let i = 0; i < records.length; i++) {
      console.log('------------------------');
      console.log('会社名:', records[i].会社名.value);
      console.log('部署名:', records[i].部署名.value);
      console.log('担当者名:', records[i].担当者名.value);
    }
  });
})();

まとめ

固定リンクがコピーされました

今回はJavaScriptカスタマイズにおけるrecordとrecordsのデータの表示方法について勉強しました。
少々、Objectと配列などと言った用語がでてきて難しいかもしれませんが、どのようにデータにアクセスすればいいかが分かっていればひとまず問題ありません。
次回はdeveloper networkに載っているサンプルを例にしてもっと深掘りしていきます。

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

旧：はじめよう JavaScript