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:オブジェクトの分割代入 (External link)

変数を {変数名} として定義することで、参照先オブジェクトのkeyで{変数名}と同じプロパティのみ格納されます。
そのため、kintone.app.record.get();で取得できるオブジェクトの中のkeyがrecordのプロパティのみを変数に格納できます。

kintone JavaScript API の一覧を確認したい

利用シーン

  • kintone JavaScript APIの関数を使おうと思ったが、関数名を忘れてしまった際に、APIドキュメントを開くことなく、手っ取り早く関数名を確認したい時

便利ポイント

実現方法

kintoneの任意の画面上で、開発者ツールのConsole画面を開き、kintoneと入力しEnterを押下すると、kintone JavaScript APIの一覧を確認できます。

kintoneの画面の種類にかかわらず、すべてのkintone JavaScript APIの関数が表示されるため、一覧を表示したkintoneの画面で実行できない関数がある点にご注意ください。

レコード一括取得 API のクエリを簡単に作りたい

利用シーン

便利ポイント

  • APIドキュメントを見つつ、自分でクエリを作成する必要がない。
  • GUIで絞り込み結果を確認してからクエリを発行できるため、デバッグ時の手戻りが発生しにくい。

実現方法

レコード一覧画面の絞り込み条件で、レコード一括取得する際の条件を作成&適用した後に、以下のどちらかをConsole画面で実行すると、実行時に利用できるクエリを発行してくれます。

  • kintone.app.getQuery();
  • kintone.app.getQueryCondition();

発行したいクエリ条件によって、以下のように利用するAPIが異なることにご注意ください。

おわりに

いかがでしたか。

中には知っているTipsもあれば、意外と知らなかったTipsもあったかと思います。
ここで紹介したTipsを駆使して、kintoneカスタマイズ開発が少しでも捗ることを願っています!

この記事の内容の他にもこんなTipsがあるよ、というネタをお持ちの方は、ぜひコメントで共有いただけると幸いです。

information

このTipsは、2019年10月版kintoneで動作を確認しています。