私が kintone 開発で便利に使っている Chrome デベロッパーツールの使い方をご紹介します。
cybozu developer network コミュニティでは、REST API や DOMについての質問がかなりありますので、皆さん結構苦労されているようです。
Chrome デベロッパーツールを使うと、REST API の実行や DOM操作がちゃっちゃと簡単に試せます。
詳細画面、編集画面でレコード情報取得
詳細画面、編集画面で kintone で提供されている関数を実行できます。
cybozu developer network レコード詳細情報取得
kintone.app.record.get() の実行
kintone のアプリ詳細画面を開いてから、Chrome デベロッパーツールの Console を開きます。
kintone.app.record.get() で、表示しているレコードの情報が取得できます。
アプリのフィールドコードの確認やタイプの確認が簡単に出来ます。
kintone.app.record.get()
▼ {record: {…}} をクリックすると、展開表示されます。
変数へレコード情報をセット
kintone.app.record.get() で取得したレコード情報は、そのまま変数へセットできます。
var resp = kintone.app.record.get()
変数名のみ入力すると、内容が表示されます。
変数名に「.」を追加入力すると、入力支援で要素の一覧が表示されます。
変数に格納されたレコード情報の確認が容易です。
入力履歴の呼び出し
Console の入力エリアで「↑」、「↓」キーを押すと、入力履歴の呼び出しが出来ます。
前に実行した関数をいちいち最初から入力しないで済みます。
「kintone.app」を入力すると、Console で入力したkintone.appの履歴が一覧表示されます。
REST API
kintone の画面を開いていれば、REST API を実行できます。
REST API のパラメータ指定の確認などに有効です。
クエリ指定でレコード取得(REST API)
kintone.api('/k/v1/records', 'GET', {app:382, query:'$id > 10' })
レコードを変数へセット
kintone.api は、非同期処理なので、単純に変数に代入しても結果が反映されません。
await を使うと、REST API の実行を待って、変数に結果をセットしてくれます。
※ IE では await がサポートされていませんので、IE を使用する場合は JavaScript カスタマイズで await を使えません。
var resp = await kintone.api('/k/v1/records', 'GET', {app:382, query:'$id > 10' })
REST API のエラー表示
REST API のエラー時は、エラー内容を確認できます。
kintone.api('/k/v1/records', 'GET', {app:382, query:'レコード番号 > 10' }) // 正常
kintone.api('/k/v1/records', 'GET', {app:382, query:'レコード番号A > 10' }) // エラー
Network タブを見ると、送受信の詳細とエラー内容が分かります。
フォーム設定の取得
kintone.api('/k/v1/app/form/fields', 'GET', {app:382})
DOM 操作
DOM操作を行いたいときも chrome の開発ツールを使うと簡単に調べることが出来ます。
いちいち JavaScript をアップロードして動作確認しなくても、Console からすぐに実行できます。
※ DOM操作は、kintone の仕様変更によって動作しなくなるなどのリスクがあるため、非推奨となっています。それでもやるときは自己責任で！
項目タイトルの色を変えてみる
- はじめに「顧客名」のタイトルを調べます。
- 顧客名のタイトルを選択して右クリック
- 検証をクリック
- 「label-2019」がタイトルにつけられた識別クラスだとわかります。
- DOM要素の取得
- Console タグに移動して、document.querySelector('.label-2019')を入力します。
- 入力した時点で、指定に間違いが無ければ DOM要素が表示されます。
実行しなくても要素が表示されるので便利です。
document.querySelector('.label-2019')
- 要素で使える関数を入力支援してくれる
- 色の設定
style.color に 'red' を設定すると、「顧客名」タイトルの色が変わります。
document.querySelector('.label-2019').style.color = 'red'
#jQuery によるDOM操作
JavaScript カスタマイズで jQuery ライブラリを指定すると、Chrome Console でも jQuery を使うことができます。
一覧画面のヘッダ部の色設定
複数要素も jQuery を使うと、簡単に処理できます。
指定内容の確認がすぐに出来るのがいいですね。
$('.recordlist-header-label-gaia').css('color','red')
モバイル表示
Toggle device toolbar をクリック後に、ブラウザーで再表示を行うとモバイル表示に切り替わります。
スマホの種類も選択できます。
これでモバイル対応の JavaScript カスタマイズのデバッグも可能です。
kintone.mobile.app.record.get() の実行
モバイル表示中は、kintone の関数もモバイル対応版を使います。
kintone.mobile.app.record.get()
モバイル表示のDOM操作
モバイル表示中の DOM構造は、PC 版の DOM構造と異なりますので、別の指定が必要です。
項目タイトルの色を変えてみる
document.querySelector('.field-2019 .control-label-gaia').style.color = 'red'
あとがき
kintone 開発では、ちょっとしたことでつまずいて進まなくなることがあります。
Chrome デベロッパーツールで動作確認すると簡単に原因が判明する場合が多いと思います。