カテゴリー内の他の記事

はじめよう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回を参照ください。

先ほど「レコード詳細画面でのデータ取得と表示」で作成した JavaScript ファイルに上書きするか、
JSEdit にて新しく JavaScript ファイルを作成しましょう。
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回 プログラムを読む(回答の条件によって別フィールドの表示/非表示を切り替える)>>

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

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

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により編集されました
Avatar
cybozu Development team

Toshi Akazawa様

お世話になっております。

返答が遅くなって申し訳ありません。

ご指摘のとおりでしたため、修正いたしました。

また対応して「recordsデータのイメージ図」についても修正いたしました。

今後ともなにかお気づきの点がありましたらご連絡くださると幸いです。

Avatar
kondo

スクリーンショットのコードと実際のコードが異なっています。

スクリーンショット:

 records.map( ~~~)

 

実際のコード:

  for (var i = 0; i < records.length; i++) { ~~~

Avatar
cybozu Development team

kondo 様

お世話になっております。cybozu developer network 運営局です。

ご指摘ありがとうございます。
アプリの用意 5.のキャプチャであっていますでしょうか?

こちらは JSEdit の説明のためのキャプチャとなっているので、本来はこのキャプチャのコードの内容は本記事とは関係ありません。
ですが、混乱を招くかと思いましたので、コード部分は空に修正させていただきました。

フィードバックくださりありがとうございました。

Avatar

記事通りにしたつもりですが、結果が出ません。

Consoleに下記の表示が出ました。これはなんでしょうか?

DevTools failed to load SourceMap: Could not content for https://js.cybozu.com/jquery/1.11.3/jquery.min.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE

Avatar
cybozu Development team
眞様
 
お世話になっております。cybozu developer network 運営事務局です。
コンソールに表示されている件はjQueryのソースマップというファイルが見つからないものであり、今回動作しない件と無関係なものかと思われます。ただ、今回利用しないjQueryを読み込んでいるようにみえますので、jQueryは一旦除外してみてください。
 
また、動作しないコードは「完成コード」でしょうか?
(念の為こちらでも顧客リストアプリをインストールし完成コードを貼り付けて保存したところ、一覧画面・詳細画面でコンソールに結果は表示されました。)
他にもエラーや参考になりそうな情報があればご教示いただきますと幸いです。
Avatar
Kazuaki Ueda

最初の詳細表示までは良いのですが、

次の一覧表示の部分をどこに書けば良いのか分からず手が止まってしまいました。

そして一番下までスクロールして、同じファイルに書くことを目的としているのを理解しました。

おそらく showRecord.js の詳細表示のコードを一覧表示のコードで上書きしてしまって、

それぞれ動作確認ができたら、両方のコードを1つにまとめて完成という流れを想定されているんだろうと思います。

例えば一覧表示の部分に、上に書いたコードを消す(上書きする)とか、あるいは新規ファイルで試して、

あとでまとめる(不要なファイルを削除)のような説明があるともう少しわかりやすいかなと思いました。

私の読み方が足りなかったらすみません。

Kazuaki Uedaにより編集されました
Avatar
cybozu Development team

Kazuaki Ueda 様

お世話になっております。cybozu developer network 運営事務局です。

ご意見いただきありがとうございます。

社内にフィードバックし、改善していきたいと思います。

引き続きよろしくお願いいたします

 

Avatar
Jimember

JSEdit for kintoneを使っています。

一つ目のサンプルコードをコピーし、自前のアプリのフィールドコードに置き換えて実行しているのですがうまくいきません。(試しにアラート表示させてみると、レコードの値だけブランクでした。)これ以外のコードは記述しておらず、指定したフィールドに値が入っていることは確認しています。

(function() {
'use strict';
kintone.events.on('app.record.detail.show', function(e) {
var record = e.record;
// コンソールに出力
console.log('祝祭日名:'', record.祝祭日名.value);
window.alert('祝祭日名:', record.祝祭日名.value);
});
})();

またコンソールにはこのように出ます。jQueryのチェックを付けたり外したりしてみましたが変わりませんでした。

jQuery-1.7.1.js:10 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ jQuery-1.7.1.js:10
ajax @ jQuery-1.7.1.js:10
(anonymous) @ toolbarLib.js:3
getCurrentLocale @ toolbarLib.js:3
getLocaleResource @ toolbarLib.js:4
(anonymous) @ toolbarOnPGScriptLoaded.js:53
(anonymous) @ toolbarOnPGScriptLoaded.js:54

自分なりに調べていますが全然解決できず・・https://xhr.spec.whatwg.org/.も見に行きましたが理解できませんでした・・。ご教示いただけると嬉しいです。よろしくお願いいたします。

Avatar
cybozu Development team

Jimember 様

お世話になっております。cybozu developer network 運営事務局です。

こちらのコメント欄は記事内容のフィードバック目的となっております。
 
> 自前のアプリのフィールドコードに置き換えて実行しているのですがうまくいきません。
 
とのことで、ご自身が利用されているアプリに関する技術的な質問になりますので、
恐れ入りますが、cybozu developer コミュニティをぜひご活用ください。
サインインしてコメントを残してください。