Edited at
kintoneDay 7

kintone 開発で Chrome デベロッパーツールを使おう

私が 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()

2018-12-03_23h15_09.png

▼ {record: {…}} をクリックすると、展開表示されます。


変数へレコード情報をセット

kintone.app.record.get() で取得したレコード情報は、そのまま変数へセットできます。

var resp = kintone.app.record.get()

2018-12-05_00h04_22.png

変数名のみ入力すると、内容が表示されます。

変数名に「.」を追加入力すると、入力支援で要素の一覧が表示されます。

変数に格納されたレコード情報の確認が容易です。

2018-12-05_00h06_16.png


入力履歴の呼び出し

Console の入力エリアで「↑」、「↓」キーを押すと、入力履歴の呼び出しが出来ます。

前に実行した関数をいちいち最初から入力しないで済みます。

2018-12-04_22h30_25.png

「kintone.app」を入力すると、Console で入力したkintone.appの履歴が一覧表示されます。

2018-12-05_11h40_05.png


REST API

kintone の画面を開いていれば、REST API を実行できます。

REST API のパラメータ指定の確認などに有効です。

kintone REST API


クエリ指定でレコード取得(REST API)

kintone.api('/k/v1/records', 'GET', {app:382, query:'$id > 10' })

2018-12-03_23h37_42.png


レコードを変数へセット

kintone.api は、非同期処理なので、単純に変数に代入しても結果が反映されません。

await を使うと、REST API の実行を待って、変数に結果をセットしてくれます。

※ IE では await がサポートされていませんので、IE を使用する場合は JavaScript カスタマイズで await を使えません。

var resp = await kintone.api('/k/v1/records', 'GET', {app:382, query:'$id > 10' })

2018-12-05_00h08_18.png


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' }) // エラー

2018-12-04_23h29_13.png

Network タブを見ると、送受信の詳細とエラー内容が分かります。

2018-12-04_23h32_38.png


フォーム設定の取得

kintone.api('/k/v1/app/form/fields', 'GET', {app:382})

2018-12-04_00h17_57.png


DOM 操作

DOM操作を行いたいときも chrome の開発ツールを使うと簡単に調べることが出来ます。

いちいち JavaScript をアップロードして動作確認しなくても、Console からすぐに実行できます。

※ DOM操作は、kintone の仕様変更によって動作しなくなるなどのリスクがあるため、非推奨となっています。それでもやるときは自己責任で!


項目タイトルの色を変えてみる


  • はじめに「顧客名」のタイトルを調べます。


    • 顧客名のタイトルを選択して右クリック

    • 検証をクリック

    • 「label-2019」がタイトルにつけられた識別クラスだとわかります。



2018-12-04_12h29_11.png


  • DOM要素の取得


    • Console タグに移動して、document.querySelector('.label-2019')を入力します。

    • 入力した時点で、指定に間違いが無ければ DOM要素が表示されます。
      実行しなくても要素が表示されるので便利です。



document.querySelector('.label-2019')

2018-12-04_12h54_32.png


  • 要素で使える関数を入力支援してくれる

2018-12-04_13h19_44.png


  • 色の設定

style.color に 'red' を設定すると、「顧客名」タイトルの色が変わります。

document.querySelector('.label-2019').style.color = 'red'

2018-12-04_13h53_09.png


jQuery によるDOM操作

JavaScript カスタマイズで jQuery ライブラリを指定すると、Chrome Console でも jQuery を使うことができます。

2018-12-04_22h14_22.png


一覧画面のヘッダ部の色設定

複数要素も jQuery を使うと、簡単に処理できます。

指定内容の確認がすぐに出来るのがいいですね。

$('.recordlist-header-label-gaia').css('color','red')

2018-12-04_22h18_50.png


モバイル表示

Toggle device toolbar をクリック後に、ブラウザーで再表示を行うとモバイル表示に切り替わります。

スマホの種類も選択できます。

これでモバイル対応の JavaScript カスタマイズのデバッグも可能です。

2018-12-04_22h49_24.png


kintone.mobile.app.record.get() の実行

モバイル表示中は、kintone の関数もモバイル対応版を使います。

kintone.mobile.app.record.get()

2018-12-04_22h57_23.png


モバイル表示のDOM操作

モバイル表示中の DOM構造は、PC 版の DOM構造と異なりますので、別の指定が必要です。

2018-12-04_23h09_18.png


項目タイトルの色を変えてみる

document.querySelector('.field-2019 .control-label-gaia').style.color = 'red'

2018-12-04_23h18_11.png


あとがき

kintone 開発では、ちょっとしたことでつまずいて進まなくなることがあります。

Chrome デベロッパーツールで動作確認すると簡単に原因が判明する場合が多いと思います。