kintoneカスタマイズJavaScriptが動かない時のデバッグ手順：CSPエラー／ライブラリ読込順／APIトークン権限の見極め方
目次 クリックで開く
kintoneのJavaScriptカスタマイズが「ローカルでは動くのにkintone上で動かない」とき、原因の大半は「CSP（Content Security Policy）違反」「ライブラリ読込順」「APIトークンの権限不足」の3つに集約されます。本記事では、Chrome DevToolsを使った最短診断手順と、各原因の解決パターンを実例コード付きで解説します。
最短診断：原因の見極めチェックリスト
| 原因カテゴリ | 確認ポイント |
|---|---|
| CSP違反 | 外部CDNから読み込んだスクリプトがCSPでブロック。kintoneのCSP設定でドメイン許可が必要。 |
| ライブラリ読込順 | jQuery, lodash等の依存ライブラリがメインスクリプトより後に読み込まれている。 |
| APIトークン権限 | アプリ設定→APIトークンで「レコード閲覧」「レコード追加」等の権限が不足。 |
| kintone JS API バージョン | kintone.app.record.get()が古いバージョンで未定義。最新APIリファレンス確認。 |
| CORS問題 | 外部API呼び出しでCORSエラー。kintoneプロキシAPI（kintone.proxy）の利用が必要。 |
解決手順（推奨実行順）
- Chrome DevToolsの Console タブで赤いエラーメッセージを確認。
- 「Refused to load… CSP」が出ていれば、kintoneシステム管理→セキュリティでドメイン許可を追加。
- 「is not a function」「undefined」が出ていれば、kintone(()=>{…}) の依存ライブラリ配列順序を確認。
- APIエラー（403）→ アプリ設定のAPIトークン or ユーザーアクセス権限を確認。
- CORSエラー（外部API）→ kintone.proxy() に書き換え、URL／メソッド／ヘッダ／ボディの4要素を渡す。
- 本番反映前に必ず「テストアプリ」でフィールドコードと実装が一致するか確認。
よくある質問
kintoneでReactやVueは使える？
使えます。webpack等でバンドル → kintone-cli または手動でJSを上げます。ただしCSP設定の調整が必要なことが多いです。
無料プラグインで実現できる範囲は？
サブテーブル集計・条件分岐・PDF出力など多くは無料プラグインで足ります。独自業務ロジックはJSカスタマイズが必須です。
kintone-CLI（旧 customize-uploader）は使うべき？
5人以上の開発体制ならGit管理 + CLIアップロードが標準。1人開発ならブラウザ直接アップロードで十分です。
kintoneプロキシAPIの料金課金は？
kintone APIリクエスト枠（プランごとに月10,000〜100,000回）を消費します。大量リクエストは注意。
セキュリティを保ちつつ外部公開する方法は？
kintone API + ゲストスペース or REST APIラッパーをCloud Run/Lambdaで構築 → 認証層を別建てするのが現実解です。
参考：Aurant Technologies 実プロジェクトのLooker Studio実装
本記事のテーマを実装段階まで進める際の参考として、Aurant Technologies が支援した複数の実案件で構築した Looker Studio ダッシュボードの一例をご紹介します。数値・社名・部門名はマスキングしていますが、実際に運用されている可視化です。
CRM・営業支援
Salesforce・HubSpot・kintoneの選定から導入・カスタマイズ・定着まで一貫対応。営業生産性を高め、商談化率を改善します。