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

著者名: 村濱 一樹 (External link) (kintone エバンジェリスト)

目次

information

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript

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

アプリの用意

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

  1. トップページから「+」ボタンを押してアプリを作成します。

  2. アプリストアから「顧客リスト」を追加します。

  3. アプリがインストールされ、アプリを開くと顧客リスト一覧が表示されます。

  4. 以降は、コードを書いてきますので、同じくアプリの設定を開き、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 に書いた内容を保存して、レコード一覧画面を表示し、開発者ツールを開いて確認しましょう。

recordsrecord の複数形)のデータの型

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

information

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