一樹)はじめにkintoneはJavaScriptを使って柔軟にカスタマイズができますが、「Tipsのとおりに書いたけど動かない」「思ったのと違う挙動をしてしまう」というように、解決策を見いだせずお困りの方をコミュニティでみかけることがあります。今回は、いままでJavaScriptをあまり使ったことがなく、kintoneのカスタマイズでガッツリ触るようになった方向けに、kintoneカスタマイズのデバッグ方法をいくつか紹介したいと思います。本Tipsを読むことで、JavaScriptが動かない時にまず何をしたら良いか?どこに注意すべきかが判断できるようになるかと思います。簡単なデバッグ最近のウェブブラウザには、JavaScriptやHTML/CSSをデバックするためのデバッガーがついています。F12エラーを発生させてみるエラーを解決するときの流れをツールで見てみましょう。(実行環境はChrome)意図的にエラーを発生させてみます。レコード詳細画面を開いた時に「会社名」フィールドの値をアラートダイアログに出すプログラムですが、フィールドコードを間違ってしまうパターンです。当然ですが、この状態で実際にレコード詳細画面を見ても何も表示されません。いうエラーが発生しているか見てみるさっそくどういうエラーが発生しているか見てみます。開発者ツールを開く(JavaScriptが実行される画面で。この場合はレコード詳細画面。エラーログを確認するエラーが発生していれば、上記のように、Consoleタブからエラーが表示されていることが確認できます。エラーログは基本的に英語ですが、Googleなどで検索すれば原因がわかることが多いです。上記の場合はvalueというプロパティがありませんといった内容ですが、「会社」というフィールドコードがないのが原因ですね。(逆に言うと正しい場合はrecord["会社名"]["value"]は存在するのでエラーにならない)他にも、JavaScriptのタイプミスをしてしまった時にもエラーとなってログに表示されますので、JavaScriptカスタマイズするときは基本的にログは見るようにしたほうがいいでしょう。他にも、実行中のプログラムを一時停止(ブレークポイント)したり、変数の中身をみたりすることもできるので、下記を参考に使いこなせるようになるとkintoneのカスタマイズも捗ります。私がよくやっているのは、開発者ツールのconsoleに直接コーディングをして動作を確かめることです。表示しているレコードのデータを取得する、というのもそのまま実行できます。上記はどちらかというとJavaScriptに依るエラーですが、kintone特有のよくあるエラーもあります。JavaScriptカスタマイズをしたのに動かない・エラーも表示されない意外によくあります。下記の可能性があります。jsファイルをアップロードしていない、もしくはリンクが間違っている設定画面を見なおして、ファイルがアップロードされているか、ファイルが正しいかなどをみましょう。下記のようにイベントの指定がまちがっている場合があります。どちらかというとJavaScript起因の問題ですが、下記のように書かなければ実行されません。興味のある方は"即時関数"で検索をしてみてください。APIを使ってデータを変更したいがうまくいかない権限がないアプリの権限設定を見直し、権限が充分か確認してみましょう。自分の権限は問題ないが、他のユーザーはデータの更新ができない、などはよくあります。フィールドコードの指定が間違っているアプリのフィールド名とフィールドコードは別で設定できるので、勘違いしてしまう場合があります。フィールドコードが正しく指定できているかアプリの設定を見てみましょう。JSONの記述が間違っているテーブルなどを使っているアプリでは、どうしてもJSONが複雑になりがちでなかなかエラーが解決できない場合があります。その場合は下記のような整形・構文チェックサービスで、JSONが間違っていないかなど確認できます。APIを使ってデータを登録・更新するときも値の指定が必要です。忘れないようにしましょう。APIでルックアップフィールドに値を指定する場合は、ルックアップに関連付けるアプリのコピー元フィールドの設定で「値の重複を禁止する」オプションを有効にする必要があります。下記記事に詳しく載っていますので参考になります。APIを使ってルックアップフィールドの一括更新を行う複数アプリのデータを取得したいが、何故か中身が空になってしまう。APIからのレスポンスがある前に次の処理が実行されているkintoneのリクエスト系の標準APIは全て非同期リクエストとなっており、レスポンスを待たずに次の処理にいってしまい想定していた値がはいらない、ということがあります。処理を待ちたい場合は、コールバックメソッドに書いていく方法がありますがそれだと階層が深くなってしまいがちなので、下記のようにPromiseを使ったカスタマイズも有効です。使ってみよう!その他JavaScriptでエラーになっていると、処理が最後まで実行されず、kintoneへデータの反映などがされないことがあります。エラーがでてないか確認してみましょう。コーディングガイドライン」に沿うとエラーを未然に防げます。アプリのURLを下記に変更することでモバイルビューのデバッグを行うことができます。:https://{subdomain}.cybozu.com/k/{appId}モバイルビュー:https://{subdomain}.cybozu.com/k/m/{appId}最後にまだまだ、記載できていないエラーのパターンもあると思いますが、少しでもkintoneのJavaScriptカスタマイズがしやすくなれば幸いです。networkのコミュニティで聞いてみてください。聞く際は「動かないんですけど」ではなく「こういうエラーがでています」というように、具体的な方が回答者も回答しやすいと思います。このTipsは、2016年1月時点で確認したものになります。コミュニティをご活用ください。本公式サイトの情報が古くなっている場合もあるので、JSONでうまくいかない場合は、下記も確認すること。Permalinkログインしてコメントを残してください。