動かない?そんな時はデバッグをしてみよう!入門編

著者名:kintone エバンジェリスト 村濱 一樹 (External link)

目次

はじめに

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 カスタマイズするときは基本的にログを見るようにしたほうがいいでしょう。

  • alertalret と書き間違えた場合

    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デベロッパー・ツールの機能 (External link)

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

kintone 絡みのエラー

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

JavaScript カスタマイズをしたのに動かない・エラーも表示されない

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

  • 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) => {
        // 中略
      });
    })();// ←最後の()を忘れると動かない
    

kintone REST API を使ってデータを変更したいがうまくいかない

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

複数アプリのデータを取得したいが、なぜか中身が空になってしまう

  • 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 で聞いてみてください。
聞く際は「動かないんですけど」ではなく「こういうエラーがでています」というように、具体的な方が回答者も回答しやすいと思います。

information

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