第 12 回 kintone JavaScript カスタマイズで kintone のデータを見てみる
JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
前回 では kintone JavaScript カスタマイズとは何か、カスタマイズのための事前知識を学習しました。
ここからは少しずつ実際に kintone を使っていきたいと思います。
今回は JavaScript カスタマイズで扱う kintone の record データがどういうものかを確認するため、実際に JavaScript で kintone のデータを取得して、表示してみましょう。
レコード詳細画面とレコード一覧画面でそれぞれコンソールにデータを表示するスクリプトを書いてみます。
JavaScript カスタマイズにおいて kintone の record データの参照や操作は基本的なことですのでしっかり抑えましょう。
アプリの用意
さっそく、アプリを用意して JavaScript カスタマイズをします。
次の画像にしたがってアプリストアから「顧客リスト」をインストールして、設定変更しましょう。
-
トップページから「+」ボタンを押してアプリを作成します。
-
アプリストアから「顧客リスト」を追加します。
-
アプリがインストールされ、アプリを開くと顧客リスト一覧が表示されます。
-
以降は、コードを書いてきますので、同じくアプリの設定を開き、JSEdit からコードを入力できるようにしておきます。
詳細は 前回の記事 を参照してください。
レコード詳細画面でのデータ取得と表示
kintone カスタマイズでは、次のように書くとレコード詳細画面のデータを出力できます。
|
|
ここからはこちらのコードを 1 つずつ解説していきます。
STEP1:kintone.events.on()
を使って、「詳細画面が表示されたとき」の "イベント" を作成
参考: イベント処理の記述方法
kintone.events.on()
の括弧の中には、第一引数と第二引数を書きます。
まず、第一引数には「詳細画面が表示されたとき」というイベントを表す 'app.record.detail.show'
を書きます。
参考:
レコード詳細画面を表示した後のイベント
第二引数に (event) => {...}
と、 詳細画面が表示されたときに実行するコード を書きます。
|
|
STEP2:実行するコードの定義
実行するコードを関数を使って定義していきます。
関数についてわからなければ
第9回 を確認してください。
ひとまず、何をするにもレコードをまずは取得しなければいけませんが、変数 event
にレコードデータなどが記載されますのでそれを利用します。
変数 event
にどんなデータが入っているか詳細は
イベントオブジェクトのプロパティ を確認してください。
|
|
STEP3:コンソールログに出力
最後に、コンソールへ出力する部分を記述して完成です。
console.log()
には複数データを渡して表示できますので、わかりやすく表示するために「会社名:」などのラベルをつけています。
関数に複数の引数を渡す場合は console.log('データ1', 'データ2')
という風にカンマ区切りで渡せます。
|
|
JSEdit に書いた内容を保存して、詳細画面を開き、開発者ツールを開いて確認しましょう。
record
のデータの型
先に書いた、 record.フィールドコード.value
という kintone のレコードデータを表示した部分について見ていきましょう。
kintone で扱う record
は Object というデータ型になっています。
Object 型は、 record.フィールドコード.value
というように .
(ドット)で数珠つなぎにしてデータを取得します。
このように record
の中に複数のデータをもつことができる型を Object 型と呼びます。
record
の中にはそのレコードのすべてのフィールドのデータが格納されています。
record
データのイメージは次のとおりです。
|
|
kintone カスタマイズをする中での基本なので、必ず抑えておきましょう。
レコード一覧画面でのデータ取得と表示
kintone カスタマイズでは、次のように書くとレコード一覧画面のデータを出力できます。
|
|
それぞれ説明していきます。
STEP1:kintone.events.on()
を使って、一覧画面が表示されたときの "イベント" を作成
前述のレコード詳細画面の場合と同様に、kintone.events.on()
の括弧の中に、第一引数と第二引数を書きます。
まず、第一引数には「一覧画面が表示されたとき」というイベントを表す 'app.record.index.show'
を書きます。
参考:
レコード一覧画面を表示した後のイベント
第二引数に (event) => {...}
と、 一覧画面が表示されたときに実行するコード を書きます。
|
|
STEP2:実行するコードの定義
変数 event にどんなデータが入っているか詳細は
イベントオブジェクトのプロパティ を確認してください。
詳細ページと違い、複数のレコードを取得できるので、レコードを表す変数名は records
という複数系になっています。
詳細は後で説明します。
|
|
STEP3:コンソールログに出力
最後に、コンソールへ出力する部分を記述して完成です。
詳細ページと違い、複数の record
がありますので、 for 文を使ってひとつずつデータを表示していきます。
for 文については
第 7 回 を参照してください。
|
|
先ほどの
レコード詳細画面でのデータ取得と表示 で作成した JavaScript ファイルに上書きするか、JSEdit にて新しく JavaScript ファイルを作成しましょう。
JSEdit に書いた内容を保存して、レコード一覧画面を表示し、開発者ツールを開いて確認しましょう。
records
(record
の複数形)のデータの型
kintone で扱う record
は Object というデータ型になっていると説明しましたが、今回のような records
変数は配列型データです。
一覧ページでは record
が配列となった records
データが使えます。
records
データのイメージは次のとおりです。
|
|
上記のように、 records
には record
データが複数格納されており、それぞれ会社名のデータを取得するには次のようにします。
|
|
完成コード
詳細レコード表示時と一覧レコード表示時のコードは、ひとつのコードにまとめることができます。
|
|
まとめ
今回は JavaScript カスタマイズにおける record
と records
のデータの表示方法について勉強しました。
少々、Object と配列などと言った用語がでてきて難しいかもしれませんが、どのようにデータにアクセスすればいいかが分かっていればひとまず問題ありません。
次回は developer network に載っているサンプルを例にしてもっと深掘りしていきます。
この Tips は、2018 年 5 月版 kintone で動作を確認しています。