公開日：
（更新日：）
こんにちは。最近 gusuku Everysiteであーんなことやこーんなことができるんじゃないかと思ってわくわくしているよなしろです。
gusuku Customine との組合せ(特にJob Runnerとの組合せ)で夢がひろがりすぎています。
そんな気持ちをいったん落ち着かせて、gusuku Customineの「kintoneアプリのカスタマイズ」のほうにかかわってくる本題へ。
この記事は連載企画、 kintoneが動かないときにチェックする項目 の第3弾です。
第1弾・第2弾も是非ご覧ください。
「kintoneが動かない」って言われたときにチェックする項目 シリーズの第3弾です。第1弾ではネットワークやPC環境のチェック、第2弾ではkintoneアプリの設定項目を対象に取り上げました。
今回は、より技術的な視点から「プラグイン」「JavaScriptカスタマイズ」「外部サービス連携」の不具合原因とチェックポイントをまとめていこうかと思ったのですが、プラグインとJSカスタマイズだけで、まぁまぁの文字数になったので、外部連携サービスの話は次回に持ち越しにします。
プラグインやJavaScriptによるカスタマイズはkintoneを便利にします。
その一方で、複数のプラグインやJavaScriptでのカスタマイズ・gusuku Customine のようなkintoneの機能を拡張するサービスを組合せて使用すると、トラブル時には切り分けが難しくなりがちです。
gusuku Customineはカスタマイズで並べた「やること」「条件」の組み合わせの「アクション」を並べることで、その「アクション」をJavaScriptに変換してkintoneに登録するような仕組みとなっています。
そのあたりは下記の動画を参照してください。
ですので、今回の説明で「JavaScriptによるカスタマイズ」の中には「gusuku Customine」で生成したカスタマイズも同様に該当すると思って読んでいただければと思います。
この記事を通して、読者の方が「どこから疑うべきか」「何を見ればよいか」の判断ができるようになることを目指します。
kintoneでのJavaScript読み込み・実行の流れを知る
レコード表示までに何が起きているのかを知る
kintoneのレコード一覧・詳細・編集画面が表示されるとき、内部では以下のような順序で処理が行われます。
(この仕様は独自に分析したもので、公式に表明されているものではありません。また、将来にわたってこのような挙動をする保証はありません)
- kintoneの動作に必要なJavaScriptが読み込まれる
- アプリにインストールされているプラグインのJavaScriptが読み込まれる
- アプリの「JavaScript/CSSでカスタマイズ」に設定されたJSファイルが読み込まれる
この順序を理解していないと、「なぜか思った通りに動かない」「いつもと違う結果になる」といったトラブルの原因が見えづらくなります。
kintoneで動いているJavaScriptでのありがちなミスや罠
event のreturn忘れ
kintoneのプラグイン・JavaScriptによるカスタマイズでは、画面表示や操作時に実行される処理の際に、以下のように関数を登録します。
kintone.events.on('app.record.create.submit', function(event) {
// 何らかの処理
return event;
});このreturn eventやreturn kintone.Promise.resolve(event)を忘れた場合、処理が途中で打ち切られるように見える挙動になります。特に非同期処理がある場合、Promiseを返さないと次の処理が待たずに進んでしまい、
- DOMが整う前に値を読み取ってしまう
- 前の処理の結果を使いたいのに未定義になっている
といった“順番ズレ”の問題が起こります。
また、複数のプラグインやカスタマイズが同じイベント（例：app.record.detail.show）に登録されている場合、1つでも登録されている処理の中でreturnを忘れていると、後ろのほうで登録された処理が実行されないことが発生します。
(プラグインで登録した処理がeventのreturnを忘れた場合、カスタマイズで登録した処理が動かなくなるなど)
JavaScriptでの関数の書き換え
ブラウザで動作するJavaScriptは、関数を書き換えることができる場合があります。
よく使う
console.log(“ログを出力する”);というコードを書いて、コンソールに出力することがあるのですが、これを
console.log = () => {};というコードを記載し、console.log 関数を上書きすると、以降、
console.log(“ログを出力する”);とコードを書いても、現在表示中のページにおいては、ログが出力されなくなります。
このようなコードが処理の序盤で読み込まれるJavaScriptに記載されていると、以降のJavaScriptに影響がでます。
かなり昔の話ですが、別の言語で記載したコードからJavaScriptのコードを生成するツール(トランスパイルツール)のプラグインで、ログ出力を一括で止めるようにするというプラグインを入れると、このような挙動をするものがありました。
console.log() くらいならまだいい(よくない)のですが、kintone JavaScript APIの関数を上書きしてしまうようなコードを書いてあるものを読み込んだ場合、カスタマイズ・プラグインの挙動やもしかするとkintone自体の挙動がおかしくなります。
このあたりはプラグイン・カスタマイズの開発者が、他の同時に動かすプラグイン・カスタマイズのことを考慮して書いていれば防げる不具合かもしれません。が、プラグインの一利用者としてはこういうことをするプラグインがあるとは想定していないと思います。
開発者が意図的にやることは多分無いと思います。
やるとすれば、自分が開発した部分に悪影響がでるからという理由で、他のカスタマイズ・プラグインで動いてほしくない関数を動かさないようにする!!!みたいなことは、魔が差した場合、ちょっと考えるかもしれません…
(当然コードレビューで指摘されてそういうコードは除外されるはずです。)
複数のプラグインで処理結果の上書きをしてしまう
たとえば、
・フィールド値が編集されたら半角から全角に変換するプラグイン
・フィールド値が編集されたら全角から半角に変換するカスタマイズ
みたいなのが同時に動いている場合、両方の処理が交互に動いて暴走する。みたいなこともありえます。
あとは、
・一覧画面で上のほうに検索ボックスを表示するカスタマイズ
・一覧画面の上のほうに帳票出力のためのボタンを設置するプラグイン
が入っている場合に、後で動いたほうが前に設置した検索ボックスやボタンを消してから自分の機能のための検索ボックスやボタンを設置する。ということも考えられます。
プラグインを導入する人の視点だと、プラグインの機能からこういうことをやるだろうな。っていうのが想像できる場合は解決しやすいかもしれません。
ただし、プラグインベンダーが前に開発したプラグインのコードをコピーしてきて作っているような場合、一覧画面に何かするようなプラグインではないけど、一覧画面の上のほうを初期化するコードが残った状態でプラグインにしちゃったりしているプラグインを入れると全然関係ないプラグインを入れたのに、一覧画面の挙動がおかしい。みたいなことになることもあるかもしれません。
(それは普通にプラグインの不具合です)
動かないプログラム
そもそも文法エラーなどで動かないJavaScriptが登録されている可能性もあります。
他にも、特定のブラウザでのみ動作するJavaScriptが記述されているケースとかもあります。
プラグイン・JavaScriptカスタマイズのチェックポイント
上記の例示は、可能性の一部ではありますが、プラグイン・JavaScriptによるトラブルの原因である可能性としては十分ありえる話です。
そういうプラグイン・JavaScriptが入っているかどうかを判断するにあたって、下記のポイントに注意をしながらトラブルシューティングをしていくといいと思います。
まず確認する：最近何か変えていないか？
- プラグインを追加・削除・バージョンアップしていないか?
- JavaScriptファイルを差し替えたり、読み込み順を変えていないか?
- kintoneアップデート直後に発生していないか?
一見関係なさそうに見えても、過去に手を加えた部分が影響していることはよくあります。
プラグインが原因かも？
管理画面で対象アプリのプラグイン一覧を開き、一時的にひとつずつ無効化して検証するのがわかりやすいです。
また、特定の画面でのみ発生する挙動（例：編集画面だけ崩れる）場合だと、その画面で動くであろうプラグインを無効にしてみるとかできるかもしれません。
プラグインが複数入っている場合、機能の競合の可能性があります。
特にDOMのレイアウト操作やフィールド制御系は干渉がありえるので、同じフィールドを操作するようなプラグインを複数入れている場合は1つをオフにして正常に動くかどうかを確認してみましょう。
JavaScriptによるカスタマイズが原因かも?
JavaScriptによるカスタマイズの場合でもプラグインと対応方法は同じです。
ただ、JavaScriptによるカスタマイズの場合、カスタマイズ内容ごとにファイルを分けているケース、全部1つのファイルに記載しているケース、イベントごとにファイルを分けているケースなどがあります。
自分が開発者である場合はコードをコメントアウトして試してみるみたいなことも可能かもしれません。
開発者ではない場合は、まずはファイルの名前から想像して、kintoneのJavaScriptカスタマイズ画面から消してみるなどで対応することになるかと思います。
kintoneのアップデートによる影響かも?
kintoneは毎月のようにアップデートがあり、
- ボタンやテーブルなどのDOM構造の変更
- 標準フィールドの動作仕様の微調整
が行われることがあります。これにより、DOMに依存したカスタマイズが効かなくなる、プラグインの動作がおかしくなるなどの事例も発生しています。
サイボウスから公開されているアップデート情報を定期的にチェックし、リリース時期と不具合発生時期が近い場合は要注意です。
どれにも当てはまらないときの対応
自分ではトラブルシューティングができない…と思ったときには、下記の内容を試してみましょう。
- 現在動いているアプリとは別にテスト用アプリを作成し、最小構成で再現環境を作ってみて、再現するか確認してみる。
- スクリーンショットや再現手順を記録して、開発者へ問合せをしてみる。
おわりに
プラグインやカスタマイズによる拡張は、kintoneを業務にフィットさせるための強力な手段です。
ですがそのぶん、トラブル時の切り分けは複雑になります。特に「動いていたのに突然おかしくなった」というときは、環境や仕様の変化を見逃しがちです。
大事なのは、「何を変えたのか」「いつ変えたのか」を記録しておくこと。トラブルの早期発見・早期解決に必ず役立ちます。
大変ではありますが、このあたりのトラブルの切り分けができるとだいぶいい感じになりますので、是非トラブルがおきたときには挑戦してみてください。
次回は「外部サービス連携編」の予定です。
投稿者プロフィール
- 沖縄で業務しています。オンプレ生まれ・クラウド育ち。
