Google Chrome 開発者ツールの Tips 集 - kintone 開発特化編 -
はじめに
kintone のカスタマイズをする際に必ずと言ってよいほど利用するのがブラウザーの開発者ツール(以下、開発者ツール)ですよね。
最近の開発者ツールは、開発が捗る便利な機能をたくさん備えています。
しかし、なかなかすべての機能を使いこなすのは難しいのが現状だと思います。
そこで本記事では、皆様がよく利用されているブラウザー、Google Chrome の開発者ツールに特化した、もっと kintone 開発が捗るTipsを紹介します。(いくつかの Tips では他ブラウザーの開発者ツールでも応用できます)
やりたいことをベースに Tips をまとめたので、目次から気になる Tips へ飛んでみてください。
ブラウザーの開発者ツールについてご存じない方は、まずは 動かない?そんな時はデバッグをしてみよう!入門編 を確認してください。
レコード詳細画面で、record オブジェクトの中身を確認したい
利用シーン
- レコード詳細画面で、フィールドの操作をする際に利用するフィールドコードや値(value)、record オブジェクトの JSON 形式を簡単に確認したい時
便利ポイント
- アプリの設定画面や API ドキュメントを参照することなく、フィールドコードやフィールドタイプ、フィールドの値(value)や record オブジェクトの形式を確認できる。
実現方法
レコード詳細画面で開発者ツールの Console 画面を表示し、kintone.app.record.get();
を実行すると、record オブジェクトの中身を確認できます。
さらにもっとスマートに record オブジェクトのみを確認したい場合はこちら。
Console 画面で定義した変数については、変数名のみを Console 画面に入力するだけで変数の中身を出力してくれるので便利です。
わざわざ console.log({変数});
としなくていいのがいいですね。
ちなみにこの方法は ES6 で追加されたオブジェクトの分割代入を活用した方法になります。
ブラウザーによっては対応していない可能性があります。
MDN:オブジェクトの分割代入
変数を {変数名} として定義することで、参照先オブジェクトの key で{変数名}と同じプロパティのみ格納されます。
そのため、kintone.app.record.get();
で取得できるオブジェクトの中の key が record のプロパティのみを変数に格納できます。
kintone JavaScript API の一覧を確認したい
利用シーン
- kintone JavaScript API の関数を使おうと思ったが、関数名を忘れてしまった際に、API ドキュメントを開くことなく、手っ取り早く関数名を確認したい時
便利ポイント
- API ドキュメントを開く必要なく、kintone JavaScript API の一覧を確認できる。
- kintone JavaScript API 一覧
実現方法
kintone の任意の画面上で、開発者ツールの Console 画面を開き、kintone
と入力し Enter を押下すると、kintone JavaScript API の一覧を確認できます。
kintone の画面の種類にかかわらず、すべての kintone JavaScript API の関数が表示されるため、一覧を表示した kintone の画面で実行できない関数がある点にご注意ください。
レコード一括取得 API のクエリを簡単に作りたい
利用シーン
- レコード一括取得 API を実行するときのリクエストパラメーター「query」の値を作成したい時
便利ポイント
- API ドキュメントを見つつ、自分でクエリを作成する必要がない。
- GUI で絞り込み結果を確認してからクエリを発行できるため、デバッグ時の手戻りが発生しにくい。
実現方法
レコード一覧画面の絞り込み条件で、レコード一括取得する際の条件を作成&適用した後に、以下のどちらかを Console 画面で実行すると、実行時に利用できるクエリを発行してくれます。
kintone.app.getQuery();
kintone.app.getQueryCondition();
発行したいクエリ条件によって、以下のように利用する API が異なることにご注意ください。
- 絞り込み条件のみのクエリを発行したい場合
kintone.app.getQueryCondition();
- レコード一覧のクエリ文字列を取得する
- 絞り込み条件に加え、ソート条件等も含んだクエリを発行したい場合
kintone.app.getQuery();
- レコード一覧のクエリ文字列を取得する(オプション付き)
おわりに
いかがでしたか。
中には知っている Tips もあれば、意外と知らなかった Tips もあったかと思います。
ここで紹介した Tips を駆使して、kintone カスタマイズ開発が少しでも捗ることを願っています!
この記事の内容の他にもこんな Tips があるよ、というネタをお持ちの方は、ぜひコメントで共有いただけると幸いです。
この Tips は、2019 年 10 月版 kintone で動作を確認しています。