kintoneはJavaScriptを使って柔軟にカスタマイズができますが、次のような場合で解決策を見いだせずお困りの方を コミュニティ でみかけることがあります。

• Tipsのとおりに書いたけどエラーが出て動かない。
• 思ったのと違う挙動をしてしまう。

今回は、kintoneカスタマイズでJavaScriptのコーディングを始めた方向けに、kintoneカスタマイズのデバッグ方法をいくつか紹介したいと思います。

本Tipsを読むことで、JavaScriptで書いたコードが動かないときの対処方法や、注意すべきポイントを理解できればと思います。

最近のWebブラウザーには、JavaScriptやHTML/CSSをデバックするためのデバッガーがついています。（以下開発者ツールとします）

• Chrome: デベロッパーツール
  • 開き方： Ctrl + Shift + I（MacはCommand + Option + I）
• Firefox: 開発ツール/Firebug
  • 開き方： Ctrl + Shift + I（MacはCommand + Option + I）
• Microsoft Edge : 開発者ツール
  • 開き方： F12

エラーを解決するときの流れをツールで見てみましょう。（実行環境はChrome）
意図的にエラーを発生させてみます。
レコード詳細画面を開いた時に「会社名」フィールドの値をアラートダイアログに出すプログラムですが、フィールドコードを間違ってしまうパターンです。

当然ですが、この状態で実際にレコード詳細画面を見ても何も表示されません。

1
2
3
4
5
6
7

(() => {
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    window.alert(record['会社'].value); // 「会社名」を「会社」と記述してしまう
    return event;
  });
})();

さっそくどういうエラーが発生しているか見てみます。

1. JavaScriptが実行される画面で開発者ツールを開きます。
   今回はレコード詳細画面になります。
2. Consoleタブを押します。
3. エラーログを確認します。

エラーが発生していれば、上記のように、Consoleタブからエラーが表示されていることを確認できます。
エラーログは基本的に英語ですが、Googleなどで検索すれば原因を判明できることが多いです。
上記のエラーメッセージの場合は「valueというプロパティがありません」という内容です。
このエラーの原因は、「会社」というフィールドコードのフィールドが存在しないことです。
逆にいうと正しくフィールドコードを指定すれば、record['会社名'].valueというプロパティは存在するためエラーになりません。

他にも、JavaScriptのタイプミスをしてしまった時にもエラーとなってログに表示されますので、JavaScriptカスタマイズするときは基本的にログを見るようにしたほうがいいでしょう。

• alertをalretと書き間違えた場合

  1 2 3 4 5 6 7

  (() => { kintone.events.on('app.record.detail.show', (event) => { const record = event.record; window.alret(record['会社名'].value); // alertをalretを書き間違える return event; }); })();

  

他にも、実行中のプログラムを一時停止（ブレークポイント）したり、変数の中身をみたりできるので、下記を参考に使いこなせるとkintoneのカスタマイズも捗ります。
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

私がよくやっているのは、開発者ツールのconsoleに直接コーディングをして動作を確かめることです。
たとえば、表示している レコードの値を取得するというのもそのまま実行できます。

上記はどちらかというとJavaScriptによるエラーですが、kintone特有のよくあるエラーもあります。

意外によくあります。
次の可能性があります。

• jsファイルをアップロードしていない、もしくはリンクが間違っている。
  設定画面を見なおして、ファイルがアップロードされているか、ファイルが正しいかなどをみましょう。

• イベントが指定されていない、間違っている。
  次のようにイベントの指定がまちがっている場合があります。

  1 2 3 4 5 6

  (() => { kintone.events.on('app.record.detail.shou', (event) => { // ↑間違い。 正しくは show // ... }); })();

• 最後の括弧が抜けている。
  どちらかというとJavaScript起因の問題ですが、次のように書かなければ実行されません。
  興味のある方は"即時関数"で検索をしてみてください。

  1 2 3 4 5

  (() => { kintone.events.on('app.record.detail.show', (event) => { // 中略 }); })();// ←最後の()を忘れると動かない

• 権限がない。
  アプリの権限設定を見直し、権限が十分か確認してみましょう。
  自分の権限は問題ないが、他のユーザーはデータの更新ができない、などはよくあります。
• フィールドコードの指定が間違っている。
  アプリのフィールド名とフィールドコードは別で設定できるので、勘違いしてしまう場合があります。
  フィールドコードが正しく指定できているかアプリの設定を見てみましょう。
• JSON の記述が間違っている。
  テーブルなどを使っているアプリでは、どうしてもJSONが複雑になりがちで、なかなかエラーを解決できない場合があります。
  その場合は次のような整形・構文チェックサービスで、JSONが間違っていないかなど確認できます。
  JSON Pretty Linter Ver3
• フィールドを必須項目にしているのに値を指定しないままPOSTしている。
  kintoneのフィールド設定では、「必須項目にする」というオプションがあります。
  これを有効にすると、kintone REST APIを使ってデータを登録・更新するときも値の指定が必要です。
  忘れないようにしましょう。
• ルックアップフィールドのコピー元フィールドで重複禁止オプションを指定していない。
  kintone REST APIでルックアップフィールドに値を指定する場合は、ルックアップに関連付けるアプリのコピー元フィールドの設定で「値の重複を禁止する」オプションを有効にする必要があります。
  下記記事に詳しく載っていますので参考になります。
  REST APIを使ってルックアップフィールドの一括更新を行う

• APIからのレスポンスがある前に次の処理が実行されている。
  kintoneのリクエスト系の標準APIはすべて非同期リクエストとなっており、レスポンスを待たずに次の処理へ行ってしまい想定していた値がはいらない、ということがあります。
  処理を待ちたい場合は、コールバックメソッドに書いていく方法がありますがそれだと階層が深くなってしまいがちなので、Promiseやasync/awaitを使ったカスタマイズも有効です。
  詳細は kintone カスタマイズで非同期処理をするを参考してください。

• JavaScriptでエラーになっていると、処理が最後まで実行されず、kintoneへデータの反映などがされないことがあります。
  エラーがでてないか確認してみましょう。
• 基本的な話ですが、「kintone JavaScriptコーディングガイドライン」に沿うとエラーを未然に防げます。
  kintone コーディングガイドライン

kintoneのアプリのURLを以下に変更することでモバイルビューのデバッグを行うことができます。

• PCビュー ：https://sample.cybozu.com/k/{appId}
• モバイルビュー：https://sample.cybozu.com/k/m/{appId}

ゲストスペースの場合は以下のURLです。

• https://sample.cybozu.com/k/guest/{spaceId}/m/{appId}

まだまだ、記載できていないエラーのパターンもあると思いますが、少しでもkintoneのJavaScriptカスタマイズの助けになれば幸いです。
どうしてもわからないことはぜひ developer network community で聞いてみてください。
聞く際は「動かないんですけど」ではなく「こういうエラーがでています」というように、具体的な方が回答者も回答しやすいと思います。

この記事は、2016年1月版kintoneで動作を確認しています。