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

私が kintone 開発で便利に使っている Chrome デベロッパーツールの使い方をご紹介します。
cybozu developer network コミュニティでは、REST API や DOMについての質問がかなりありますので、皆さん結構苦労されているようです。
Chrome デベロッパーツールを使うと、REST API の実行や DOM操作がちゃっちゃと簡単に試せます。

# 詳細画面、編集画面でレコード情報取得

詳細画面、編集画面で kintone で提供されている関数を実行できます。

cybozu developer network [レコード詳細情報取得](https://developer.cybozu.io/hc/ja/articles/201942014-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E8%A9%B3%E7%B4%B0%E6%83%85%E5%A0%B1%E5%8F%96%E5%BE%97)


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

kintone のアプリ詳細画面を開いてから、Chrome デベロッパーツールの Console を開きます。
kintone.app.record.get() で、表示しているレコードの情報が取得できます。
アプリのフィールドコードの確認やタイプの確認が簡単に出来ます。

```.js
kintone.app.record.get()
```

<img width="1128" alt="2018-12-03_23h15_09.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/3600d0d7-fb4f-4277-9019-8f1fe2915c9d.png">

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

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

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

```.js
var resp = kintone.app.record.get()
```
<img width="542" alt="2018-12-05_00h04_22.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/4d45adb3-9bfc-cd44-594a-1263247e94d8.png">

変数名のみ入力すると、内容が表示されます。
変数名に「.」を追加入力すると、入力支援で要素の一覧が表示されます。
変数に格納されたレコード情報の確認が容易です。

<img width="548" alt="2018-12-05_00h06_16.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/5dfb2c8f-8c0f-75dc-a40f-0313f739563a.png">


## 入力履歴の呼び出し

Console の入力エリアで「↑」、「↓」キーを押すと、入力履歴の呼び出しが出来ます。
前に実行した関数をいちいち最初から入力しないで済みます。

<img width="767" alt="2018-12-04_22h30_25.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/397a1838-6d0e-9fbb-3f26-d79e9df52df5.png">

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

<img width="570" alt="2018-12-05_11h40_05.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/c7f86079-6e1e-1d77-924c-10092aca6f32.png">


# REST API

kintone の画面を開いていれば、REST API を実行できます。
REST API のパラメータ指定の確認などに有効です。

[kintone REST API](https://developer.cybozu.io/hc/ja/articles/201941754)

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

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

<img width="619" alt="2018-12-03_23h37_42.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/a61fdbe6-abec-b1b2-f5fa-f901fd0524fa.png">


## レコードを変数へセット

kintone.api は、非同期処理なので、単純に変数に代入しても結果が反映されません。
await を使うと、REST API の実行を待って、変数に結果をセットしてくれます。
**※ IE では await がサポートされていませんので、IE を使用する場合は JavaScript カスタマイズで await を使えません。**

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

<img width="628" alt="2018-12-05_00h08_18.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/49c454f2-583a-31c1-4711-742960bd0656.png">


## REST API のエラー表示

REST API のエラー時は、エラー内容を確認できます。

```.js
kintone.api('/k/v1/records', 'GET', {app:382, query:'レコード番号 > 10' }) // 正常

kintone.api('/k/v1/records', 'GET', {app:382, query:'レコード番号A > 10' }) // エラー
```


<img width="780" alt="2018-12-04_23h29_13.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/e3d080ec-4833-b197-8942-628ba900fd32.png">

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

<img width="1127" alt="2018-12-04_23h32_38.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/a2feddc0-46dd-254c-414c-a9bbd352bf9b.png">



## フォーム設定の取得

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


<img width="691" alt="2018-12-04_00h17_57.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/75ac7e31-97a0-e496-261c-c79c87db7d94.png">

 

# DOM 操作

DOM操作を行いたいときも chrome の開発ツールを使うと簡単に調べることが出来ます。
いちいち JavaScript をアップロードして動作確認しなくても、Console からすぐに実行できます。
**※ DOM操作は、kintone の仕様変更によって動作しなくなるなどのリスクがあるため、非推奨となっています。それでもやるときは自己責任で！**

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

- はじめに「顧客名」のタイトルを調べます。
    - 顧客名のタイトルを選択して右クリック
    - 検証をクリック
    - 「label-2019」がタイトルにつけられた識別クラスだとわかります。

<img width="1128" alt="2018-12-04_12h29_11.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/e90ea5ae-4147-198a-de4e-374854a2f6f2.png">


- DOM要素の取得
    - Console タグに移動して、document.querySelector('.label-2019')を入力します。
    - 入力した時点で、指定に間違いが無ければ DOM要素が表示されます。<br>実行しなくても要素が表示されるので便利です。

```.js
document.querySelector('.label-2019')
```
  

<img width="671" alt="2018-12-04_12h54_32.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/d05af508-696a-c8c3-c460-8d1760f28434.png">


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

<img width="622" alt="2018-12-04_13h19_44.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/95618489-fc33-da8b-dbf6-10e9d304469d.png">


- 色の設定

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

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

<img width="621" alt="2018-12-04_13h53_09.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/d6e462e2-3f3c-5b33-0edb-9f09855da9d1.png">


#jQuery によるDOM操作

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

<img width="639" alt="2018-12-04_22h14_22.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/445a97c4-66ba-aaac-df76-3a991123a771.png">

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

複数要素も jQuery を使うと、簡単に処理できます。
指定内容の確認がすぐに出来るのがいいですね。

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


<img width="1127" alt="2018-12-04_22h18_50.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/e827ee99-6688-084f-71c4-f6473f37cb59.png">


# モバイル表示

Toggle device toolbar をクリック後に、ブラウザーで再表示を行うとモバイル表示に切り替わります。
スマホの種類も選択できます。
これでモバイル対応の JavaScript カスタマイズのデバッグも可能です。


<img width="1128" alt="2018-12-04_22h49_24.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/93025f64-e7e5-0953-8f64-25c8ddfac5da.png">

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

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

```.js
kintone.mobile.app.record.get()
```

<img width="1128" alt="2018-12-04_22h57_23.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/d7a7b205-95cd-cd0b-ecc7-3e4d61ba7fb4.png">

## モバイル表示のDOM操作

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

<img width="1128" alt="2018-12-04_23h09_18.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/2b9ac2e3-6f5a-8001-ef1b-d1fabc1e1a75.png">

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

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

<img width="725" alt="2018-12-04_23h18_11.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/97bf3b71-8685-c990-1ec8-169ff7043b3a.png">



# あとがき

kintone 開発では、ちょっとしたことでつまずいて進まなくなることがあります。
Chrome デベロッパーツールで動作確認すると簡単に原因が判明する場合が多いと思います。