カテゴリー内の他の記事

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

フォローする


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

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

アプリの用意

早速、アプリを用意してJavaScriptカスタマイズをします。
下記の画像に従ってアプリストアから「顧客リスト」をインストールして、設定変更しましょう。

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

    _____.png

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

    kintone________.png

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

    ____.png

  4. アプリの設定を開き、フィールドコードを変更します。

    _______.png

    _________1_.png

  5. 以降は、コードを書いてきますので、同じくアプリの設定を開き、JSEditからコードを入力できるようにしておきます。詳細は前回の記事を参照してください。

    __________.png

レコード詳細ページでkintoneのrecordデータ取得と表示

レコード詳細ページのデータ表示は下記のようにすることで出力できます。

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

  • kintone.events.on() を使って、「詳細画面が表示されたとき」の イベント を作成します。(参考:イベント処理の記述方法 )
    kintone.events.on() の括弧の中には、第一引数と第二引数を書きます。
    まず、第一引数には「詳細画面が表示されたとき」という定義である、'app.record.detail.show' を書きます。(参考: レコード詳細画面表示イベント
    第二引数に function(e) {...} と、 詳細画面が表示されたときに実行するコード を書きます。

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

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

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

kintoneのrecordのデータの型について

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

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

  • recordデータのイメージ図

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

レコード一覧ページでkintoneのrecordデータ取得と表示

一覧ページのデータ表示は下記のようにすることで出力できます。

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

  1. kintone.events.on() を使って、一覧画面が表示されたときの イベント を作成します。
    前述のレコード詳細画面の場合と同様に、kintone.events.on() の括弧の中に、第一引数と第二引数を書きます。
    まず、第一引数には「一覧画面が表示されたとき」という定義である、  'app.record.index.show' を書きます。(参考: レコード一覧画面表示イベント
    第二引数に  function(e) {...} と、 一覧画面が表示されたときに実行するコード を書きます。

  2. 実行するコードの定義
    こちらも詳細ページと同様、変数 e のデータと関数を利用します。詳細ページの場合と格納されているデータが若干違うので下記のリンクを見てみてください。
    (変数 e にどんなデータが入っているか詳細はこちらのeventオブジェクトのプロパティをご確認ください。

    ※注意点: 詳細ページと違い、複数の record を取得できるので  records という様に複数系になっていますので注意してください。詳細は下記に説明します。

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

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

cba477563ea7afbde99e7636b2c5bb3e.png

kintoneのrecords(recordの複数形)のデータの型について

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

  • recordsデータのイメージ図

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

完成コード

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

まとめ

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

この記事は、2018年5月版 kintoneで確認したものになります。

<< はじめようJavaScript第11回 kintone JavaScriptカスタマイズをする  |  はじめようJavaScript第13回 プログラムを読む(回答の条件によって別フィールドの表示/非表示を切り替える)>>

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
Toshi Akazawa

「kintoneのrecords(recordの複数形)のデータの型について」の項で、以下のように記載があります。

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

しかし、正しくは「record.」の箇所は不要で、以下のようになるのではないでしょうか。

records[0].会社名.value // 1番目のデータ(index番号は0スタート)
records[1].会社名.value // 2番目のデータ
records[2].会社名.value // 3番目のデータ
records[3].会社名.value // 4番目のデータ
Toshi Akazawaにより編集されました
ログインしてコメントを残してください。