kintone カスタマイズの基本的なデバッグの流れを身につけよう

著者名:江﨑 全英(サイボウズ株式会社)

目次

はじめに

kintone カスタマイズのデバッグ、できていますか?
「はじめようシリーズのカスタマイズはできたけど、自分で実装するとカスタマイズがうまく動作しなくてどこをどう修正したらいいか分からない」という声を聞くことがあります。
"脱はじめようシリーズ"を目指すみなさんに向けて、本記事では kintone カスタマイズの基本的なデバッグの流れを紹介します。

kintone カスタマイズのデバッグについては、 動かない?そんな時はデバッグをしてみよう!入門編 も合わせて目を通してみてください。
デバッグの流れはさまざまな原因によって異なるため、本記事で紹介しているエラー対処の流れがあらゆるパターンに当てはまるわけではありません。

カスタマイズのデバッグには Google Chrome(バージョン:104.0.5112.102)を利用しています。

基本的なデバッグの流れ

kintone カスタマイズの基本的なデバッグの流れは以下です。

  1. カスタマイズを適用して、開発者ツールのコンソール画面を開く。
  2. コンソール画面を開いて、エラーが出ているか確認する。
  3. エラーが出ている場合、エラーの内容から原因調査をする。
  4. エラーが出ていない場合、起きている現象から原因調査をする。

この流れに沿ってカスタマイズが動作しない原因を探しにいきましょう。

1. カスタマイズを適用して、開発者ツールのコンソール画面を開く

カスタマイズを適用した後に意図した動作ができていない場合は、まずブラウザー開発者ツールのコンソール画面を開きましょう。
Chrome 開発者ツールのコンソール画面は、以下の操作で開くことができます。

  • Google Chrome
    1. Ctrl + Shift + I キーを同時に押下(Mac は Command + Option + I
    2. コンソール(英語の場合は Console)タブをクリック

その他ブラウザーの開発者ツールのコンソール画面の開き方については、以下になります。

  • Firefox

    1. Ctrl + Shift + I を同時に押下(Mac は Command + Option + I
    2. コンソールタブをクリック
  • Microsoft Edge

    1. F12 を押下
    2. コンソールタブをクリック

2. コンソール画面を開いて、エラーが出ているか確認する

次に、コンソール画面にエラーが出ている時は、エラーの内容を読み取ってその原因を調査します。
一方、コンソール画面にエラーが出ていない時は、発生している現象の内容を基にうまく動作しない原因を調査します。

本記事では、3 つのエラーパターンでデバッグの流れの例を紹介しているので、気になるエラーパターンを確認してみてください。

3. エラーが出ている場合、エラーの内容から原因調査をする

コンソール画面に出力されているエラーの内容をもとに以下のいずれか、もしくは複数の方法を組み合わせて調査します。
各調査方法の具体的なやり方についてはリンク先を参照してください。

4. エラーが出ていない場合、起きている現象から原因調査をする

コンソール画面にエラーが出力されていない場合は、起きている現象を把握したうえで、主に以下をチェックします。

  • カスタマイズが正しく適用されているか。
  • kintone.events.on でセットしたイベントタイプが間違っていないか。
  • 即時関数の書き方ができているか。

上記以外にも「kintone.events.on のイベントハンドラー内で、return event しているか」など、ケースに応じていろんなチェックポイントが考えられます。
ここで挙げたチェックポイントを確認しても正常に動作しない場合は、他に何か間違っている点があるかもしれません。
根気強く、考えつく限りの可能性をチェックしてみる必要があります。

よくあるエラー

1. 'Cannot read property 'value' of undefined' エラーの場合

実現したいカスタマイズ

アプリストアにある「案件管理」アプリをカスタマイズして、会社名というフィールド名のフィールドの値をアラートで出力したい。

適用したカスタマイズ
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
/*
 * sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
 */
(() => {
  'use strict';
  const companyNameTxt = '会社名';

  kintone.events.on(['app.record.detail.show'], (event) => {
    const record = event.record;
    alert(record[companyNameTxt].value);
    return event;
  });
})();
開発者ツールのコンソール画面

エラーの内容は以下のとおりです。

1
Uncaught TypeError: Cannot read properties of undefined(reading 'value')

デバッグの流れ

コンソール画面に表示されるエラーを確認すると、valueundefined ということがわかります。
ここでは、valueundefined になっている原因調査のため、カスタマイズのソースコードを確認します。

開発者ツールの Sources タブから、適用したカスタマイズの中身を確認できます。
コンソール画面に出力されているエラーの 2 行目 at download.do?app=〜 をクリックすると、エラーが発生したソースコードに直接遷移できます。

コンソール画面に出力されているエラー内容とカスタマイズ内容を照らし合わせると、value の記載があるのは 14 行目だけです。
そのため、14 行目に何か問題がありそうだと見当をつけることができます。

さらに、14 行目の value は変数 record の中の「会社名」というフィールドコードのフィールドの値(value)です。
上記の理由から、以下 2 点が原因として考えられると推測しました。

  • 変数 record の中身がない。
  • 「会社名」というフィールドコードのフィールドが存在しない。

ここからは以下の 4 パターンの調査方法のいずれかを利用して、原因調査を進めます。

  • A. ブレイクポイント機能を利用して、調査する方法
  • B. console.log(record); をソースコードに入れて調査する方法
  • C. kintone.app.record.get(); をコンソール画面に入力して調査する方法
  • D. debugger; をソースコードに入れて調査する方法
A. ブレイクポイント機能を利用して、調査する方法

ブラウザー開発者ツールの Sources タブでブレイクポイント機能を使うと、カスタマイズの読み込みを好きなところで一時的に停止できます。
また、ソースコード中の変数をマウスオーバーすることで、変数の中に何が格納されているかを確認できます。

そこで、この機能を使って以下の GIF のように 14 行目にブレイクポイントを入れて再度読み込みます。
読み込んだら、変数 record をマウスオーバーし record の中身を確認します。
なお、ブレイクポイントは複数ヵ所設定できるので、変数が複数存在するカスタマイズでは、怪しいと思われるすべての行にブレイクポイントを入れて 1 箇所ずつ確認します。

上の GIF から、変数 record の中身はあるものの record の中に「会社名」というフィールドコードのフィールドは存在しないことが分かります。
そこで、アプリ管理のフォーム設定画面を確認すると、会社名フィールドのフィールドコードは「文字列 1 行」だと判明しました。

そのため、カスタマイズ 10 行目の「会社名」の記述を「文字列 1 行」に書き換える必要があります。
コードを書き換えて再度レコードの詳細画面を開いてみると、想定どおりアラート画面が表示されており無事に意図した動作を確認できました。

B. console.log(record); をソースコードに入れて調査する方法

「変数 record の中身がない」もしくは「会社名というフィールドコードのフィールドが存在しない」かどうかを確認するために、カスタマイズの 14 行目に console.log(record); を挿入して実行してみます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/*
 * sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  const companyNameTxt = '会社名';

  kintone.events.on(['app.record.detail.show'], (event) => {
    const record = event.record;
    console.log(record);
    alert(record[companyNameTxt].value);
    return event;
  });
})();

このカスタマイズを実行し、開発者ツールの Console タブを確認します。
コンソールの画面にはさきほどのエラーと一緒に、変数 record の中身が出力されているのを確認できます。

コンソールに出力されている変数 record の中身を確認すると、record の中に「会社名」というフィールドは存在しないことが分かります。
そのため、会社名フィールドのフィールドコードが間違っていると推測できます。
あとは、A と同じ流れです。

C. kintone.app.record.get(); をコンソール画面に入力して調査する方法

「変数 record の中身がない」もしくは「会社名というフィールドコードのフィールドが存在しない」かどうかを確認します。
開発者ツールの Console タブで kintone.app.record.get(); を実行して、record の中身を確認します。

具体的な使い方のイメージは、 Google Chrome 開発者ツールの Tips 集 -kintone 開発特化編- で詳しく解説しています。

コンソール画面で実行すると、B と同様に record の中身を確認できます。
ぜひご自身で確認してみてください。

D. debugger; をソースコードに入れて調査する方法

カスタマイズの実行を任意の場所で停止する方法として、A で紹介したブレイクポイントを使う方法以外にもソースコードの中に debugger; を入れる方法があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/*
 * sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() =>{
  'use strict';
  const companyNameTxt = '会社名';

  kintone.events.on(['app.record.detail.show'], (event) => {
    const record = event.record;
    debugger;
    alert(record[companyNameTxt].value);
    return event;
  });
})();

上のように 14 行目に debugger; と記述したソースコードを kintone に読み込ませて実行すると、debugger; の記述があるところでカスタマイズの実行を停止できます。

debugger の詳細については debugger(外部サイト) (External link) を参照ください。

2. 'POST {URL} 403 (Forbidden)' エラーの場合

実現したいカスタマイズ

「案件管理」アプリのレコードを閲覧したユーザーの閲覧ログを「閲覧履歴」アプリにレコードとして残したい。

第9回 kintone REST APIを利用したレコード追加 と同じアプリ内容とカスタマイズです。

適用したカスタマイズ
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
 * sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const APP_ID = event.appId;
    const RECORD_ID = event.recordId;
    const params = {
      app: 547,
      record: {
        閲覧アプリid: {
          value: APP_ID
        },
        閲覧レコード番号: {
          value: RECORD_ID
        }
      }
    };

    kintone.api(
      kintone.api.url('/k/v1/record', true), // - pathOrUrl
      'POST', // - method
      params, // - params
      (resp) => { // - callback
        console.log('成功');
      },
      (resp) => { // - errback
        console.log('失敗');
      }
    );
  });
})();
開発者ツールのコンソール画面

エラーの内容は以下のとおりです。

1
POST https://sample.cybozu.com/k/v1/record.json 403(Forbidden)

デバッグの流れ

コンソール画面を見ると、以下 2 点を確認できます。

  • record.json の POST リクエストがエラーコード 403 で出力されていること
  • カスタマイズ 28 行目に記載している console.log('失敗'); が出力されていること

ひとまず console.log('成功');console.log('失敗'); それぞれの 1 行下に、console.log(resp); を追記して resp の中身を確認します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
/*
 * sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const APP_ID = event.appId;
    const RECORD_ID = event.recordId;
    const params = {
      app: 547,
      record: {
        閲覧アプリid: {
          value: APP_ID
        },
        閲覧レコード番号: {
          value: RECORD_ID
        }
      }
    };

    kintone.api(
      kintone.api.url('/k/v1/record', true), // - pathOrUrl
      'POST', // - method
      params, // - params
      (resp) => { // - callback
        console.log('成功');
        console.log(resp);
      },
      (resp) => { // - errback
        console.log('失敗');
        console.log(resp);
      }
    );
  });
})();

追記して再度読み込んでみると、コンソール画面に resp の内容が出力されます。

message に「権限がありません」と出力されるので、POST 先アプリのアクセス権設定を確認します。

「閲覧履歴」アプリのアクセス権を確認したところ、アプリのアクセス権で「レコード追加」が設定されていないとわかります。
そこで、レコード追加にチェックを入れて保存します。

再度読み込んで実行すると、まだうまく動作していないようです。
以下のエラーがコンソール画面に出力されています。

1
POST https://sample.cybozu.com/k/v1/record.json 400(Bad Request)

message に「入力内容が正しくありません」とあるので、errors の中を見てみます。
record.閲覧アプリID.valuemessages が「必須です」と出力されています。

つまり、フィールドコード「閲覧アプリ ID」の値(value)を POST リクエストの body に正しくセットできていないことがわかります。
そこでカスタマイズの内容と「閲覧アプリ ID」フィールドのフィールドコードを再度確認します。
カスタマイズが正しいフィールドコードになっていないことがわかったので、アプリの設定に合わせて「閲覧アプリ ID」に修正します。

  • カスタマイズに記載した「閲覧アプリ ID」フィールドのフィールドコード:閲覧アプリ id
  • アプリに設定した「閲覧アプリ ID」フィールドのフィールドコード:閲覧アプリ ID

再度読み込むと閲覧ログが「閲覧履歴」アプリに登録され、意図した動作を確認できました。

3. コンソールにエラーが出ていない場合

実現したいカスタマイズ

「案件管理」アプリのレコードを閲覧したユーザーの閲覧ログを「閲覧履歴」アプリにレコードとして残したい。
2. 'POST {URL} 403 (Forbidden)' エラーの場合 と同じカスタマイズです。

適用したカスタマイズ
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
 * sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  'use strict';
  kintone.events.on('app.record.detail.show', (event) => {
    const APP_ID = event.appId;
    const RECORD_ID = event.recordId;
    const params = {
      app: 547,
      record: {
        閲覧アプリID: {
          value: APP_ID
        },
        閲覧レコード番号: {
          value: RECORD_ID
        }
      }
    };

    kintone.api(
      kintone.api.url('/k/v1/record', true), // - pathOrUrl
      'POST', // - method
      params, // - params
      (resp) => { // - callback
        console.log('成功');
      },
      (resp) => { // - errback
        console.log('失敗');
      }
    );
  });
});
開発者ツールのコンソール画面

出力なし

デバッグの流れ

このカスタマイズを適用しても、「閲覧履歴」アプリにレコードが追加されておらずコンソール画面にも何も出力されていません。
開発者ツールの Sources タブで、カスタマイズが適用されているか確認してみると、カスタマイズは適用されているようです。

カスタマイズは適用されているようなので、カスタマイズが実行されているかを確認するためにブレイクポイントをセットします。
再度読み込みしてみたところ、なぜかブレイクポイントで処理が止まりません。

このことから、何らかの原因でカスタマイズが実行されていないと推測されます。
原因の可能性として次の 2 点を考えました。

  • kintone.events.on のイベントタイプが間違っている。
  • 即時関数の書き方になっていない。

それぞれを確かめてみます。
kintone.events.on のイベントではレコード詳細画面の表示後イベントを実行してほしいので、 レコード詳細画面の表示後イベントapp.record.detail.show が設定されている必要があります。
カスタマイズを確認すると同じイベントタイプが記載されているので、イベントタイプは問題なさそうです。

では、次に即時関数の書き方になっているか確認してみます。
カスタマイズを確認すると、正しい即時関数の書き方になっていませんでした。

33 行目に以下のように () をつけることで、意図した動作を確認できました。

最初に適用したカスタマイズをよく確認すると、以下のような形になっています。

1
2
3
(() => {
  // 処理内容
}); // ()が必要

この書き方は即時関数の書き方になっておらず、再読み込みしてもカスタマイズは実行されません。
そのため、ブレイクポイントをセットしても処理が止まりませんでした。

即時関数について詳しく知りたい方は IIFE(即時実行関数式)(外部サイト) (External link) を参照してください。

まとめ

カスタマイズが動作しない原因はさまざまです。
実際のデバッグケースは、この記事で取り上げた内容より複雑でエラーの原因を探し出すのはたいへんだと思います。

しかし、この記事で紹介したデバッグの流れや考え方を参考にトライアンドエラーを繰り返していけば、少しずつエラー原因へ近付けるようになるはずです。
ぜひ、この記事に書いている方法や考え方を身につけてデバッグ力を磨いてください!

Chrome の開発者ツールを利用した JavaScript カスタマイズのデバッグ方法についてもっと知りたい方は、公式サイト DevTools(外部サイト) (External link) の記事も参考にしてみてください。

information

この Tips は、2022 年 9 月版 kintone で動作を確認しています。