cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

Google Chrome 開発者ツールのTips集 -kintone開発特化編-

作成日
更新日

（著者：サイボウズ 江﨑 全英）

Index

はじめに

kintoneのカスタマイズをする際に必ずと言って良いほど利用するのがブラウザの開発者ツール(以下、開発者ツール)ですよね。

最近の開発者ツールには、開発が捗る便利な機能がたくさん備えられていますが、なかなか全ての機能を使いこなすのは難しいのが現状だと思います。

そこで本記事では、皆様がよく利用するであろうブラウザ、Google Chromeの開発者ツールに特化した、
もっとkintone開発が捗るTipsを紹介します。(いくつかのTipsでは他ブラウザの開発者ツールでも応用できます)

やりたいことをベースにTipsをまとめたので、目次から気になるTipsに飛んでみてください。

 

ブラウザの開発者ツールについてご存知ない方は、まず以下の記事に目を通してみてください。

▼動かない？そんな時はデバッグをしてみよう！入門編
https://developer.cybozu.io/hc/ja/articles/207613916

レコード詳細画面で、recordオブジェクトの中身を確認したい

利用シーン

  • レコード詳細画面で、フィールドの操作をする際に利用するフィールドコードや値(value)、recordオブジェクトのJSON形式を簡単に確認したい時

便利ポイント

  • [アプリの設定]画面やAPIドキュメントを参照することなく、フィールドコードやフィールドタイプ、フィールドの値(value)やrecordオブジェクトの形式を確認できる

実現方法

レコード詳細画面で開発者ツールのConsole画面を表示し、
kintone.app.record.get();を実行すると、recordオブジェクトの中身を確認できます。

▼レコードの値を取得する
https://developer.cybozu.io/hc/ja/articles/201942014#step2

record_conf_2.gif

 

さらにもっとスマートにrecordオブジェクトのみを確認したい場合はこちら。

 

record_conf2_2.gif

Console画面で定義した変数については、変数名のみをConsole画面に入力するだけで変数の中身を出力してくれるので便利です。
わざわざconsole.log({変数});としなくていいのがいいですね。

ちなみにこの方法はES6で追加されたオブジェクトの分割代入を活用した方法になります。
※ブラウザによっては対応していない可能性があります

▼MDN：オブジェクトの分割代入
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring

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

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

利用シーン

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

便利ポイント

実現方法

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

kintoneJSAPI_2.gif

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

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

利用シーン

便利ポイント

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

実現方法

レコード一覧画面の絞り込み条件で、レコード一括取得する際の条件を作成&適用した後に、
kintone.app.getQuery(); もしくは kintone.app.getQueryCondition();をConsole画面で実行すると、
records.json実行時に利用できるクエリを発行してくれます。

query_2.gif

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

まとめ

いかがでしたか。

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

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

 このTipsは、2019年10月版 kintoneで確認したものになります。

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

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

サインインしてコメントを残してください。