第 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で動作を確認しています。