cybozu developer network

Enhanced by Google

カテゴリー内の他の記事

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

作成日
更新日

（著者：サイボウズ 江﨑 全英）

はじめに

kintoneカスタマイズのデバッグ、できてますか？

「はじめようシリーズのカスタマイズは一通りできた！けど、自分で実装する時にカスタマイズがうまく動作しなくてどこをどう修正したらいいか分からない...」

という、"脱はじめようシリーズ"を目指すみなさんに向けて、本記事ではkintoneカスタマイズの基本的なデバッグの流れを紹介します。

kintoneカスタマイズのデバッグについては、以下の記事も参考になるのであわせて目を通してみてください。

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

※ デバッグの流れは様々な原因によって異なるため、本記事で紹介しているエラー対処の流れが、あらゆるパターンに当てはまるわけではありません。

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

Index

基本的なデバッグの流れ

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

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

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

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

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

Chrome 開発者ツールのコンソール画面は、以下の操作で開くことができます。

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

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

  • 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しているかどうか」など、
ケースに応じて、色んなチェックポイントが考えられます。
ここに挙げたチェックポイントを確認しても正常に動作しない場合は、
また他に何か間違っている点があるかもしれません。

根気強く、考えつく限りの可能性をチェックしてみる必要があります。

具体例①：'Cannot read property 'value' of undefined' エラーの場合

実現したいカスタマイズ

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

21_pattern1_goal.png

適用したカスタマイズ

開発者ツールのコンソール画面

エラーの内容：Uncaught TypeError: Cannot read properties of undefined (reading 'value')

01_console_err.png

デバッグの流れ

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

開発者ツールの「Sourcesタブ」から、適用したカスタマイズの中身を確認することができます(※)。

※ コンソール画面に出力されているエラーの2行目「at download.do?app=~」をクリックすると、
エラーが発生したソースコードに直接遷移することができます。

02_sources.png

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

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

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

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

A. ブレイクポイント機能を利用して、調査する方法

ブラウザ開発者ツールの Sources タブでブレイクポイントという機能を使うと、
カスタマイズの読み込みを好きなところで一時的に止めることができます。

また、ソースコード中の変数をマウスオーバーすることで、
変数の中に何が格納されているかを確認することができます。

そこでこの機能を使って、以下GIFのように14行目にブレイクポイントを入れて再度読み込みし、
変数 record をマウスオーバーすることで、record の中身を確認します(※)。

※ ブレイクポイントは複数箇所設定することができるので、
変数が複数存在しているカスタマイズでは、
怪しいと思われる全ての行にブレイクポイントを入れて一つ一つ確認します。

03_breakpoint.gif

上のGIFから、変数 record の中身はあるが、record の中に「会社名」という
フィールドコードのフィールドが存在しないことを確認できます。

そこで、アプリ管理のフォーム設定画面を確認すると、
会社名フィールドのフィールドコードは「文字列１行」だと判明しました。

22_fieldcode____.png

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

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

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

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

05_console_log.png

コンソールに出力されている変数recordの中身を確認すると、
record の中に会社名というフィールドが存在しないことを確認できます。

なので、会社名フィールドのフィールドコードが間違っていることが推測できます。
(以下、Aと同じ流れです)

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

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

具体的な使い方のイメージについては、以下の記事で詳しく解説しているので、
そちらを参照ください。

▼ レコード詳細画面で、recordオブジェクトの中身を確認したい | Google Chrome 開発者ツールのTips集 -kintone開発特化編-

コンソール画面で実行することで、Bと同様にrecordの中身を確認できるので、
自分で確認してみて下さい。

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

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

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

debugger.gif

debugger の詳細については以下の URL 先を参照ください。

▼ debugger - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/debugger

具体例②：'POST {URL} 403 (Forbidden)' エラーの場合

実現したいカスタマイズ

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

23_patern2_goal.png
※「はじめようkintone API の 第9回 kintone REST APIを利用したレコード追加」
     と同じアプリ内容とカスタマイズになります

▼ 第9回 kintone REST APIを利用したレコード追加｜はじめようkintone API

適用したカスタマイズ

開発者ツールのコンソール画面

エラーの内容： POST https://sample.cybozu.com/k/v1/record.json 403 (Forbidden)

console_post403.png

デバッグの流れ

コンソール画面を見ると、record.json のPOST リクエストがエラーコード403で出力されているのと、
カスタマイズ28行目に記載している「console.log('失敗');」が出力されていることが確認できるので、
ひとまず「console.log('成功');」「console.log('失敗');」それぞれの行のすぐ下にconsole.log(resp); を追記して、resp の中身を確認してみます。

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

console_post403_message.png

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

09_permission.PNG

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

再度読み込んで実行すると、まだうまく動作していないようです。

以下がコンソール画面に出力されています。

 

エラーの内容： POST https://sample.cybozu.com/k/v1/record.json 400 (Bad Request)

console_post400.png

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

つまり、フィールドコード「閲覧アプリID」の値(value)を、POSTリクエストの body に
正しくセットできていないことがわかります。

そこでカスタマイズの内容と「閲覧アプリID」フィールドのフィールドコードを再度確認すると、
カスタマイズが正しいフィールドコードになっていないことがわかったので、
アプリの設定に合わせて「閲覧アプリID」に修正します。

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

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

console_success.png

具体例③：コンソールにエラーが出ていない場合

実現したいカスタマイズ

「案件管理」アプリのレコードを閲覧したユーザーの閲覧ログを
「閲覧履歴」アプリにレコードとして残したい。
※エラーパターンその２と同じカスタマイズです

適用したカスタマイズ

開発者ツールのコンソール画面

出力なし

デバッグの流れ

このカスタマイズを適用しても、「閲覧履歴」アプリにレコードが追加されていないし、
コンソール画面を確認しても、何も出力が出ていません。

開発者ツールの「Sources」タブで、カスタマイズが適用されているかを確認してみるが、
カスタマイズは適用されているようです。

sources_loaded.png

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

sono3.gif

処理が止まらないということから、なんらかが原因でカスタマイズが実行されていないことが
推測されるため、以下を原因の可能性として考えました。

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

それぞれを確かめてみます。
kintone.events.onのイベントタイプについては、レコード詳細画面の表示後イベントが
発火して欲しいので、「app.record.detail.show」イベントである必要があります。

▼ レコード詳細画面の表示後イベント｜kintone JavaScript API レコード詳細イベント

カスタマイズを確認すると、同じイベントタイプが記載されているので、
イベントタイプは問題なさそうです。

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

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

partial_code.png

最初に適用したカスタマイズをよく確認すると、以下のような形になっています。
この書き方は、即時関数の書き方になっておらず、
再度読み込みしてもカスタマイズが実行されなかったため、
ブレイクポイントを設置しても処理が止まりませんでした。

即時関数について詳しく知りたい方は以下を参照してみてください。

▼ 即時関数(即時実行関数式)｜MDN
https://developer.mozilla.org/ja/docs/Glossary/IIFE

まとめ

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

ですが、この記事で紹介したデバッグの流れや考え方を参考にして、
何度もトライアンドエラーを繰り返していけば、
少しずつエラーの原因に近づけるようになるはずです。

ぜひ、この記事に書いてる方法や考え方を身につけてデバッグ力を磨いてください！

参考

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

▼ Chrome DevTools で JavaScript をデバッグする｜Tools for Web Developers
https://developers.google.com/web/tools/chrome-devtools/javascript?hl=ja

このTipsは、2022年9月版 kintoneで確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
Haruka

初めまして。

サブテーブルに複数行追加したい場合、下記のように作成したのですが

1行目のレコードも追加されない状態です。

 

複数行追加する場合、どのように記述したら宜しいでしょうか。

(() => {

    'use strict';

    kintone.events.on(['app.record.create.show', 'app.record.edit.show'], event => {

        const record = event.record;

        // テーブルを空にする

        record.テーブル.value = [];

        // // for文で繰り返し

        // for (let i = 0; i < 5; i++) {

        //     console.log((i) + '行追加'); // コンソールに追加行数表示

            record.テーブル.value.push({

                value: {

                    年_テーブル: {

                        type: 'NUMBER',

                        value: 10

                    },

                    月_テーブル: {

                        type: 'NUMBER',

                        value: 100

                    }

                }

            });

           

            record.テーブル.value[1].push({

                value: {

                    年_テーブル: {

                        type: 'NUMBER',

                        value: 20

                    },

                    月_テーブル: {

                        type: 'NUMBER',

                        value: 200

                    }

                }

            });

            return event;

        // }    

    });

})();
Harukaにより編集されました
Avatar
cybozu Development team

Haruka 様

お世話になっております。cybozu developer network 運営でございます。

恐れ入りますが、こちらのコメント欄は記事内容のフィードバック目的となっているため、
記事から派生した技術的なご質問はcybozu developer コミュニティをご活用ください。

ご質問新規投稿の際「良い質問をするためのガイド」というものが表示されますので、
それに沿ってエラーの詳細などを記載いただくと回答がつきやすくなると存じます。

よろしくお願い致します。

サインインしてコメントを残してください。