リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
（著者：kintone エバンジェリスト 村濱 一樹）
第11回では kintone JavaScript カスタマイズとは何か、カスタマイズのための事前知識を学習しました。
ここからは徐々に実際に kintone を使っていきたいと思います。
今回は JavaScript カスタマイズで扱う kintone の record データがどういうものかを確認するために、
実際に JavaScript で kintone のデータを取得して、表示してみましょう。
レコード詳細画面とレコード一覧画面でそれぞれコンソールにデータを表示するスクリプトを書いてみます。
JavaScript カスタマイズにおいて kintone の record データの参照や操作は基本的なことですのでしっかり抑えましょう。
アプリの用意
早速、アプリを用意して JavaScript カスタマイズをします。
下記の画像に従ってアプリストアから「顧客リスト」をインストールして、設定変更しましょう。
- トップページから「＋」ボタンを押してアプリを作成します。
- アプリストアから「顧客リスト」を追加します。
- アプリがインストールされ、アプリを開くと顧客リスト一覧が表示されます。
- 以降は、コードを書いてきますので、同じくアプリの設定を開き、JSEdit からコードを入力できるようにしておきます。詳細は前回の記事を参照してください。
レコード詳細画面で kintone の record データ取得と表示
レコード詳細画面のデータ表示は下記のようにすることで出力できます。
ここからはこちらのコードを一つ一つ解説していきます。
-
kintone.events.on() を使って、「詳細画面が表示されたとき」の イベント を作成します。（参考：イベント処理の記述方法 ）
kintone.events.on() の括弧の中には、第一引数と第二引数を書きます。
まず、第一引数には「詳細画面が表示されたとき」という定義である、'app.record.detail.show' を書きます。（参考： レコード詳細画面表示イベント）
第二引数に (event) => {...} と、 詳細画面が表示されたときに実行するコード を書きます。 -
実行するコードの定義
実行するコードを関数を使って定義していきます。関数についてわからなければ第9回をご覧ください。
ひとまず、何をするにもレコードをまずは取得しなければいけませんが、変数 event にレコードデータなどが記載されますのでそれを利用します。
(変数 event にどんなデータが入っているか詳細はこちらのeventオブジェクトのプロパティをご確認ください。 -
コンソールログに出力
最後にコンソールに出力する部分を記述して完成です。
※ console.log() には複数データを渡して表示することができますので、わかりやすく表示するために 会社名: などのラベルをつけています。
関数に複数の引数を渡す場合は console.log('データ1', 'データ2') という風にカンマ区切りで渡せます。
JSEdit に書いた内容を保存して、詳細画面を開き、開発者ツールを開いて確認しましょう。
kintone の record のデータの型について
先に書いた、 record.フィールドコード.value という kintone のレコードデータを表示した部分について見ていきましょう。
kintone で扱う record は Object というデータ型になっています。
Object 型は、 record.フィールドコード.value というように . (ドット) で数珠つなぎにしてデータを取得します。
こういう風に record の中に複数のデータをもつことができるのが Object 型です。
record の中にはそのレコードの全てのフィールドのデータが格納されています。
- record データのイメージ図
kintone カスタマイズをする中での基本なので、必ず抑えておきましょう。
レコード一覧画面で kintone の record データ取得と表示
レコード一覧画面のデータ表示は下記のようにすることで出力できます。
それぞれ説明していきます。
-
kintone.events.on() を使って、一覧画面が表示されたときの イベント を作成します。
前述のレコード詳細画面の場合と同様に、kintone.events.on() の括弧の中に、第一引数と第二引数を書きます。
まず、第一引数には「一覧画面が表示されたとき」という定義である、 'app.record.index.show' を書きます。（参考： レコード一覧画面表示イベント）
第二引数に (event) => {...} と、 一覧画面が表示されたときに実行するコード を書きます。 -
実行するコードの定義
(変数 event にどんなデータが入っているか詳細はこちらのeventオブジェクトのプロパティをご確認ください。※注意点： 詳細ページと違い、複数の record を取得できるので records という様に複数系になっていますので注意してください。詳細は下記に説明します。
-
コンソールログに出力
最後にコンソールに出力する部分を記述して完成です。詳細ページと違い、複数の record がありますので、 for 文を使って一つずつデータを表示していきます。
※ for 文については第7回を参照ください。
先ほど「レコード詳細画面でのデータ取得と表示」で作成した JavaScript ファイルに上書きするか、
JSEdit にて新しく JavaScript ファイルを作成しましょう。
JSEdit に書いた内容を保存して、レコード一覧画面を表示し、開発者ツールを開いて確認しましょう。
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回 プログラムを読む（回答の条件によって別フィールドの表示/非表示を切り替える）>>
「kintoneのrecords(recordの複数形)のデータの型について」の項で、以下のように記載があります。
しかし、正しくは「record.」の箇所は不要で、以下のようになるのではないでしょうか。
Toshi Akazawa様
お世話になっております。
返答が遅くなって申し訳ありません。
ご指摘のとおりでしたため、修正いたしました。
また対応して「recordsデータのイメージ図」についても修正いたしました。
今後ともなにかお気づきの点がありましたらご連絡くださると幸いです。
スクリーンショットのコードと実際のコードが異なっています。
スクリーンショット：
records.map( ~~~)
実際のコード：
for (var i = 0; i < records.length; i++) { ～～～
kondo 様
お世話になっております。cybozu developer network 運営局です。
ご指摘ありがとうございます。
アプリの用意 5.のキャプチャであっていますでしょうか？
こちらは JSEdit の説明のためのキャプチャとなっているので、本来はこのキャプチャのコードの内容は本記事とは関係ありません。
ですが、混乱を招くかと思いましたので、コード部分は空に修正させていただきました。
フィードバックくださりありがとうございました。
記事通りにしたつもりですが、結果が出ません。
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
最初の詳細表示までは良いのですが、
次の一覧表示の部分をどこに書けば良いのか分からず手が止まってしまいました。
そして一番下までスクロールして、同じファイルに書くことを目的としているのを理解しました。
おそらく showRecord.js の詳細表示のコードを一覧表示のコードで上書きしてしまって、
それぞれ動作確認ができたら、両方のコードを1つにまとめて完成という流れを想定されているんだろうと思います。
例えば一覧表示の部分に、上に書いたコードを消す（上書きする）とか、あるいは新規ファイルで試して、
あとでまとめる（不要なファイルを削除）のような説明があるともう少しわかりやすいかなと思いました。
私の読み方が足りなかったらすみません。
Kazuaki Ueda 様
お世話になっております。cybozu developer network 運営事務局です。
ご意見いただきありがとうございます。
社内にフィードバックし、改善していきたいと思います。
引き続きよろしくお願いいたします
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/.も見に行きましたが理解できませんでした・・。ご教示いただけると嬉しいです。よろしくお願いいたします。
Jimember 様
お世話になっております。cybozu developer network 運営事務局です。
恐れ入りますが、cybozu developer コミュニティをぜひご活用ください。
お世話になっております。
kintone超初心者になります。
チュートリアルを第1回から進めてきたのですが、第12回の「kintone JavaScript カスタマイズでkintoneのデータを見てみる」から内容を把握できず躓いております。
「レコード詳細画面で kintone の record データ取得と表示」の項から『下記のように～』と度々記載されていますが、サンプルコードの表記（スクリーンショット等）がないため、どのようにコードを記述するものなのか理解できないのですが、ここに至るまでに他のリンク先の内容を理解すれば、サンプルコードの表記がなくても分かるものなのでしょうか？
※文末の「完成コード」に『詳細レコード表示時、一覧レコード表示時のコードは、下記のように、一つのコードにまとめることができます。』と記載がありますが、何も記載がないのでさっぱり理解できません。
ksk 様
お世話になっております。cybozu developer network 運営局です。
記載していただいた「下記のように〜」などの部分に、
こちらの環境では、ソースコードが表示されている状態です。
おそらく、お使いの環境のネットワークで、
GitHub.com へのアクセス制限をしていると思われます。
恐れ入りますが、ネットワーク管理者の方に GitHub.com へのアクセス許可を依頼していただくか、
そういった制限のない環境から、当ページへアクセスしていただけないでしょうか。
よろしくお願いいたします。
いつもお世話になっております。
一つ上でksk様がご質問されている内容と重複するのですが、私の環境でも「下記のように～」のところでソースコードが表示されていない状況です。
(この12回だけでなく、他の回でも同様です)
つきましては、本来表示されているソースコードを何らかのかたちで共有いただくことはできませんでしょうか。
（画面キャプチャをどこかに表示していただく等・・・）
お忙しいところ恐れ入りますが、よろしくお願いいたします。
後藤直也 様
お世話になっております。cybozu developer network 運営局です。
大変申し訳ございませんが、サンプルコードの個別提供や共有は行っておりません。
お使いの環境のネットワークで、同じく、GitHub.com へのアクセス制限をしている可能性が高いため、
ネットワーク管理者の方に GitHub.com へのアクセス許可を依頼していただくか、
そういった制限のない環境から、当ページへアクセスしていただけないでしょうか。
ご理解のほど、よろしくお願いいたします。