船井デジタル道場

Digital Dojo

中小企業のデジタル経営のための情報サイト

エラーの原因を突き止める!コンソール画面の確認方法

公開日:2020年07月28日

kintoneを修正した後、動作確認などを行ったときに、「保存ボタンを押しても保存ができない…」「入力画面が正しく表示されない…」ということはございませんか?
エラーが起こる原因として、よく挙がるものが下記になります。

  1. プラグインの設定が外れてしまった・間違っている
  2. JavaScriptのコードが間違っている

これらは、kintoneの標準機能では実装できない機能を補うものになり、私達も活用されることをおすすめしておりますが、kintoneを便利にするために色々と設定を触っている際に、プラグインやJavascriptで設定していたフィールドを削除してしまったり、フィールドコードの名を変更してしまったりすること、うまく動かなくなってしまうことがあります。

このような時に見ていただきたいのが「コンソール画面」です。

「コンソール画面」を見ることで、どのプラグイン・どのJavascriptの設定に問題があるのかがすぐに分かります

コンソール画面の表示方法

コンソールとは、プログラムの出力やコードなどを実際に表示するもので、プログラミングでよく用いられます。

Google ChromeまたはInternet Explorerを利用している場合、キーボードの「F12」キーを押すとコンソール画面がでてきます。
押していただいた際に、下記のコンソール画面ではないページが表示されている場合はメニュ―バーの「Console」をクリックしてください。

コンソール画面でエラーを確認する方法

①エラーが起きているページを開きます。

まずはじめに、エラーが起きているページを開きます。何かしらの操作をしてエラーが起きている場合は、同じ操作を行い意図的にエラーを起こす必要があります。

②コンソール画面を開きます。

上記で記述した通り、エラーが起きている状態でキーボードの「F12キー」を押します。
エラーが起きている場合は、背景が赤くなり英文が記載されています。
エラーが起きていない場合は、真っ白で何も書かれていない状態になります。

ただし、この状態ではエラーが起きているということだけしか分からず、何のエラーが出ているかは分かりませんので、次にエラー原因を突き止めます。

③「downroad.do?~」のリンクをクリックします。

黒文字で記載されている「downroad.do?~」のリンクをクリックします。

④表示されたコード画面を上までスクロールします。

  • プラグインがエラーを起こしている場合

プラグインがエラーを起こしている場合は、コード画面の一番上にプラグイン名称が記載されています。
下記画像の場合は「textConnect Plug-in 」と記載されており、「文字結合プラグイン」にエラーが出ていることが分かります。

プラグイン名称は英語で記載されているため、どのプラグインか分からない!という場合は、検索エンジンで「kintone プラグイン (プラグイン英語名)」で検索するとどのプラグインか分かります。

  • JavaScriptがエラーを起こしている場合

JavaScriptがエラーを起こしている場合は、1行目に「(function(){」と書かれていることが多く、エラーの原因になっているコードの背景が赤くなります。
今回の場合は12行目のコードにエラーが起きていることが分かります。

⑤エラー箇所の修正を行い完了です!

④で確認できたエラー原因のプラグインまたはJavaScriptの修正を行います。

プラグインは、アプリ設定の設定タブ内、プラグインから修正を行うことができます。

JavaScriptの修正を行う場合は「JSEdit for kintone」がおすすめです。

下記の記事に「JSEdit for kintone」の利用方法を記載していますので、ぜひ見てください。

いかがでしょうか?
原因不明のエラーが出た際に活用いただければ幸いです。

船井ファストシステムのサポートを受けていらっしゃる方へ

船井ファストシステムには、kintoneをより利便性を高くするために、jsやプラグインをあらかじめ設定させていただいております。そのため、自社仕様にカスタマイズしていく際に必要ないと思って削除してしまった!というケースがよくあります。

このような場合、Chatworkにてコンソール画面のキャプチャを送っていただければ、弊社から修正方法についてアドバイスさせていただきます。

お送りいただきたいコンソールの画面は「downroad.do?~」のリンクをクリックしたあとの画像(上記の④)の画像です。

こちらの画像をお送りください。

Chatworkでキャプチャ画像を簡単にお送りいただく方法