このプラグインでできること
「Customize Editor AI+」は、kintoneアプリのJavaScript / CSSカスタマイズを、アプリの設定画面上で直接編集できるプラグインです。
ファイルをパソコンで作成してアップロードし直す作業が不要になります。
編集したコードは、そのまま保存するだけで運用環境へ反映されます。
AIアシスタント機能を使えば、日本語で指示するだけでカスタマイズコードを作成・修正できます。
主な機能は次のとおりです。
- コードエディターでJavaScript / CSSファイルを新規作成・編集・保存
- PC用（desktop）・モバイル用（mobile）それぞれのJS / CSSを1画面で管理
- 手元のファイルのアップロード、ダウンロード、ファイル名変更、削除
- 外部ライブラリ（CDN）のURL追加と、読み込み順の並べ替え
- kintone APIのひな形コードをクリックで挿入
- AIチャットによるコードの生成・修正（お客様ご自身のAPIキーで利用。Claude（Anthropic社）が初期設定で、OpenAIにも切り替えられます）
- 操作ログの表示
- GitHubリポジトリへのコミット＆プッシュ、過去のコミット状態への復元
⚠️ このプラグインは、アプリの設定画面（プラグインの設定画面）でのみ動作します。
⚠️ レコード一覧画面やレコード詳細画面に、このプラグイン自身のボタンなどが追加されることはありません。
動作環境・前提条件
2-1. 必要な権限
このプラグインを利用するには、次の権限が必要です。
| 必要な権限 | 用途 |
|---|---|
| アプリ管理権限 | プラグインの設定画面を開く／JavaScript・CSSカスタマイズを変更する／保存時に「アプリを更新」（運用環境への反映）を自動で行う |
💡 このプラグインを使うのはアプリの管理者だけです。レコードを使う人には、このプラグインのための権限は要りません（作成したカスタマイズは、ふだんのJavaScript / CSSカスタマイズと同じように全員の画面で動きます）。
⚠️ このプラグインは、保存操作を行うたびにアプリの「アプリを更新」（運用環境への反映）を自動で実行します。ほかの管理者がアプリの設定を編集中の場合、その未反映の変更も同時に反映されます。複数人で同時に設定変更を行わないようご注意ください。
2-2. 事前に必要なフィールドや設定
このプラグイン自体を使うために、事前に用意が必要なフィールドはありません。
プラグインをアプリに追加した時点で、すべての機能が使える状態になります。
💡 AIチャット機能とGitHub連携機能は任意の機能です。使わない場合、設定は不要です。
2-3. AIチャットを使う場合の事前準備
AIチャット機能を使う場合は、次の準備が必要です。
- Anthropic社（Claude）のアカウントを用意します。OpenAI社のアカウントでも利用できます。
- そのアカウントでAPIキーを発行します。
- 発行したAPIキーを、プラグインの「設定」画面に登録します（手順は「3-5」を参照）。
⚠️ APIキーはお客様ご自身で用意していただくものです。AIチャットの利用料金は、お客様のAPIアカウントに対して課金されます。料金体系については各提供元のサイトをご確認ください。
⚠️ AIチャットは、ご利用のブラウザからAI提供元のサーバーへ直接通信します。社内ネットワークの制限などで外部への通信が遮断されている場合、AIチャットは利用できません。
💡 登録したAPIキーは、kintoneのプラグイン設定のうち、暗号化された保存領域に保管されます。
2-4. GitHub連携を使う場合の事前準備
GitHub連携機能を使う場合は、次の準備が必要です。
- GitHubのアカウントを用意します。
- GitHubでパーソナルアクセストークン（GitHubの操作を許可するための鍵文字列）を発行します。
- 発行したトークンを、プラグインの「設定」画面に登録します（手順は「3-6」を参照）。
トークンに必要な権限（スコープ）は次のとおりです。
| スコープ | 用途 |
|---|---|
repo 系（リポジトリの読み書き権限） | リポジトリの作成、コミット、プッシュ、コミット一覧の取得 |
delete_repo | 「リポジトリ削除」を使う場合のみ必要 |
⚠️
delete_repoが付与されていないトークンで「リポジトリ削除」を実行すると、エラーになります。削除機能を使う予定がある場合は、トークン発行時に付与してください。💡 登録したトークンも、APIキーと同じく暗号化された保存領域に保管されます。
2-5. PC版・モバイル版の対応
| 画面 | 対応 |
|---|---|
| プラグインの設定画面（PCのブラウザ） | エディター・AIチャット・GitHub連携のすべての操作をここで行います |
| PC版のレコード画面 | 「desktop - js」「desktop - css」に登録したカスタマイズが動きます |
| モバイル版のレコード画面 | 「mobile - js」「mobile - css」に登録したカスタマイズが動きます |
💡 モバイル版のカスタマイズも、PCのブラウザで開いたプラグインの設定画面から編集します。プラグイン自身がレコード画面に部品を追加することはありません。
設定手順
3-1. プラグイン設定画面を開く
- 対象のアプリを開きます。
- 画面右上の歯車アイコンから「アプリの設定」を開きます。
- 「設定」タブの「プラグイン」をクリックします。
- 一覧から「Customize Editor AI+」の歯車アイコンをクリックします。
エディター画面が表示されます。
エディター画面。左にサイドメニュー、中央にエディター、下にターミナル（ログ）が並ぶ
3-2. 設定画面の各部の名称
この後の手順で使う各部の名称は次のとおりです。
| 名称 | 位置 | 役割 |
|---|---|---|
| ヘッダー | 画面上部 | プラグイン名、リンク表示の切り替え、拡大／縮小 |
| サイドメニュー | 画面左側 | ファイルとCDNの一覧。ここからファイルを開きます |
| エディター | 画面中央 | コードを編集する領域。タブで複数ファイルを切り替えます |
| ターミナル | 画面下部 | 「ログ」と「AIチャット」を表示します |
サイドメニューには、次の4つのフォルダが表示されます。
| フォルダ名 | 内容 |
|---|---|
| 「desktop - js」 | PC用のJavaScriptファイル |
| 「desktop - css」 | PC用のCSSファイル |
| 「mobile - js」 | モバイル用のJavaScriptファイル |
| 「mobile - css」 | モバイル用のCSSファイル |
💡 フォルダ名をクリックすると、そのフォルダの開閉が切り替わります。
3-3. 「設定」モーダルを開く
エディターの表示設定、AIの設定、GitHubの設定は、すべて同じ「設定」画面で行います。
- エディター右上の歯車アイコン（「設定」）をクリックします。
「設定」画面が表示されます。
エディター右上の歯車アイコン（「設定」）
「設定」画面は、上から「Editor」「AI」「GitHub」の3つの区分に分かれています。
3-4. 「Editor」でエディターの表示を設定する
「Editor」の区分では、コードエディターの見た目を設定します。
- 「設定」画面の「Theme」で、配色を選択します。
- 「Font Size」で、文字の大きさを選択します。
- 「Tab Size」に、タブ1つ分の空白の文字数を入力します。
- 「Margin Column」に、右端の目安線を表示する桁数を入力します。
「Editor」の区分
各項目の内容は次のとおりです。
| 項目名 | 選択肢・入力内容 | 初期値 |
|---|---|---|
| 「Theme」 | 「Ambiance」「Tomorrow」「Merbivore」「Chrome」「Github」「Textmate」 | Ambiance |
| 「Font Size」 | 12px / 13px / 14px / 15px / 16px / 18px / 20px / 22px / 24px | 13px |
| 「Tab Size」 | 数値を入力 | 2 |
| 「Margin Column」 | 数値を入力 | 80 |
💡 「Margin Column」は、コードの折り返し位置の目安として表示される縦線の位置です。表示のみの設定で、実際のコードには影響しません。
3-5. 「AI」でAIアシスタントを設定する
AIチャット機能を使う場合に設定します。使わない場合は、この手順は不要です。
- 「設定」画面の「プロバイダ」で、「Claude」または「OpenAI」を選択します（初期値は「Claude」）。
- 「APIキー」に、選択したプロバイダのAPIキーを貼り付けます。
- 「モデル取得」ボタンをクリックします。
ボタンの表示が「取得中…」に変わり、利用できるモデルの一覧が取得されます。 - 「モデル」で、使用するモデルを選択します。
「AI」の区分。「プロバイダ」「APIキー」「モデル」と「モデル取得」ボタン
各項目の内容は次のとおりです。
| 項目名 | 内容 |
|---|---|
| 「プロバイダ」 | 「Claude」または「OpenAI」から選択します |
| 「APIキー」 | Claudeの場合は「sk-ant-」、OpenAIの場合は「sk-」で始まる文字列です |
| 「モデル」 | 「モデル取得」で取得した一覧から選択します |
| 「モデル取得」 | APIキーを使ってモデル一覧を取得するボタンです |
⚠️ 「APIキー」を入力せずに「モデル取得」をクリックすると、「先にAPIキーを入力してください」と表示されます。先にAPIキーを入力してください。
⚠️ APIキーが誤っている場合や、通信に失敗した場合は、ボタンの下にエラー内容が表示されます。APIキーをご確認ください。
💡 「モデル取得」を一度も実行していない場合でも、既定のモデル候補から選択できます。最新のモデルを使う場合は「モデル取得」を実行してください。
💡 「プロバイダ」を切り替えると、「モデル」の選択は自動的にそのプロバイダの既定値に戻ります。切り替えた後は、もう一度「モデル取得」を実行してください。
3-6. 「GitHub」でリポジトリを連携する
コードのバックアップやバージョン管理にGitHubを使う場合に設定します。使わない場合は、この手順は不要です。
- 「設定」画面の「Git Access Token」に、GitHubのパーソナルアクセストークンを貼り付けます。
- 「Repository Name」に、作成したいリポジトリ名を入力します。
- 「GitHub」の右側に表示された「リポジトリ作成」ボタンをクリックします。
リポジトリが作成され、画面が再読み込みされます。
「GitHub」の区分。「Git Access Token」と「Repository Name」
各項目の内容は次のとおりです。
| 項目名 | 内容 |
|---|---|
| 「Git Access Token」 | GitHubのパーソナルアクセストークンを入力します |
| 「Repository Name」 | 作成するリポジトリ名を入力します。半角英数字とハイフンのみ使用できます |
| 「リポジトリ作成」 | トークンとリポジトリ名の両方を入力すると表示されるボタンです |
| 「リポジトリ削除」 | リポジトリ作成後に表示されるボタンです |
⚠️ リポジトリ名に半角英数字とハイフン以外の文字を使うと、「リポジトリ名は半角英数字及びハイフンのみにしてください」と表示され、作成できません。
⚠️ 作成されるリポジトリは、非公開（プライベート）リポジトリです。
⚠️ リポジトリを作成すると、「Repository Name」は変更できなくなります。名前を変えたい場合は、いったん「リポジトリ削除」を実行してから作成し直してください。
💡 リポジトリの作成後は、サイドメニューの一番下に「README.md」が表示されます。このファイルもエディターで編集できます。
リポジトリの連携をやめる場合は、次の手順で削除します。
- 「設定」画面の「リポジトリ削除」ボタンをクリックします。
「リポジトリを削除します よろしいですか？」という確認メッセージが表示されます。 - 「削除」をクリックします。
GitHub上のリポジトリが削除されます。
⚠️ 削除したリポジトリと、その中のコミット履歴は元に戻せません。実行前に内容をご確認ください。
3-7. 設定を保存する
- 「設定」画面の下部にある「保存」ボタンをクリックします。
設定が保存され、運用環境へ反映されたうえで、「設定」画面が閉じます。
「設定」画面の下部にある「保存」ボタン
⚠️ 「保存」をクリックせずに画面の外側をクリックすると、「設定」画面は閉じますが、設定は保存されません。必ず「保存」をクリックしてください。
💡 保存の進行状況は、画面下部の「ログ」タブで確認できます。「設定保存完了」と表示されれば完了です。
💡 「保存」を押すと、プラグインが「アプリを更新」まで自動で行います。アプリの設定画面で改めて「アプリを更新」を押す必要はありません。
3-8. 設定項目の一覧
「設定」画面の項目は次のとおりです。必須の項目はありません。AIチャットとGitHub連携は、使うときだけ設定します。
| 区分 | 項目 | 内容 | 初期値 | 必須 |
|---|---|---|---|---|
| Editor | 「Theme」 | エディターの配色 | Ambiance | − |
| Editor | 「Font Size」 | エディターの文字の大きさ（12px〜24px） | 13px | − |
| Editor | 「Tab Size」 | タブ1つ分の空白の文字数 | 2 | − |
| Editor | 「Margin Column」 | 右端の目安線を表示する桁数 | 80 | − |
| AI | 「プロバイダ」 | 「Claude」または「OpenAI」 | Claude | AIチャットを使うとき |
| AI | 「APIキー」 | 選んだプロバイダのAPIキー（お客様ご自身で用意） | 空欄 | AIチャットを使うとき |
| AI | 「モデル」 | AIチャットで使うモデル | 未選択（選ばないときは、Claudeは「Claude Opus 4.8」、OpenAIは「gpt-5.1」を使います） | − |
| GitHub | 「Git Access Token」 | GitHubのパーソナルアクセストークン | 空欄 | GitHub連携を使うとき |
| GitHub | 「Repository Name」 | 作成するリポジトリの名前（半角英数字とハイフン） | 空欄 | GitHub連携を使うとき |
💡 「APIキー」を登録すると、画面下部に「AIチャット」タブが表示されます。APIキーを消すと、「AIチャット」タブも表示されなくなります。
使い方
4-1. ファイルを新規作成する
- サイドメニューで、作成したいフォルダ（例：「desktop - js」）の行の右側にある「ファイル作成」アイコンをクリックします。
「新規ファイル作成」画面が表示されます。
フォルダの行の右側にある「ファイル作成」アイコン
- 「ファイル名を入力」の欄に、拡張子を除いたファイル名を入力します。
- 「作成」ボタンをクリックします。
エディターに新しいタブが開き、ひな形のコードが入力された状態になります。
「新規ファイル作成」の画面。拡張子は右側に表示されている
💡 拡張子（
.jsまたは.css）は自動で付きます。入力欄の右側に表示されている拡張子をご確認ください。⚠️ 同じフォルダに同じ名前のファイルがある場合、「※同名のファイルは追加できません。」と表示されます。別の名前を入力してください。
⚠️ この時点では、ファイルはまだアプリに登録されていません。「4-3」の手順で保存してください。
4-2. 既存のファイルを開いて編集する
- サイドメニューで、開きたいフォルダ名をクリックします。
フォルダが開き、登録済みのファイルとCDNが一覧表示されます。 - 一覧から、編集したいファイル名をクリックします。
エディターにタブが追加され、ファイルの内容が表示されます。 - エディター上でコードを編集します。
編集したタブには、変更ありを示す印が表示されます。
編集したタブ（右）には、変更ありを示す「●」が表示される
💡 ファイルを1つも開いていないときは、エディター中央に「左のメニューからファイルを開いてください」と表示されます。
💡 タブの右側の「×」をクリックすると、そのタブを閉じられます。保存していない変更は失われます。
💡 コードを入力していると、kintoneのAPI名の候補が自動的に表示されます。候補から選ぶと入力を省略できます。
4-3. 編集内容を保存してアプリに反映する
- エディター左上の「すべて保存」アイコンをクリックします。
変更したすべてのファイルが保存され、続けて運用環境へ反映されます。
「すべて保存 (Ctrl+S)」アイコン
- 画面下部の「ログ」タブを確認します。
「運用環境へ反映完了」と表示されれば、反映は完了です。
💡 キーボードの「Ctrl」＋「S」でも同じ操作ができます。
⚠️ 保存されるのは、開いているタブのうち変更のあるファイルすべてです。1つのファイルだけを選んで保存することはできません。
⚠️ 保存すると、アプリの「アプリを更新」が自動で実行されます。反映後は、レコード画面を再読み込みすると新しいカスタマイズが適用されます。
⚠️ 保存に失敗した場合は「保存に失敗しました」と表示されます。アプリ管理権限があるか、ほかの管理者が同時に設定を編集していないかをご確認ください。
4-4. 手元のファイルをアップロードして追加する
すでに手元にあるJavaScript / CSSファイルを、アプリに登録できます。
アイコンから選ぶ場合
- サイドメニューで、追加したいフォルダの行の右側にある「アップロードして追加」アイコンをクリックします。
ファイル選択画面が表示されます。 - アップロードするファイルを選択します。
ファイルが登録され、運用環境へ反映されます。
「アップロードして追加」アイコン
ドラッグ＆ドロップで追加する場合
- 追加したいファイルを、エクスプローラーからサイドメニュー上へドラッグします。
フォルダごとにドロップ領域が表示されます。 - 追加したいフォルダのドロップ領域でファイルを離します。
ファイルが登録され、運用環境へ反映されます。
⚠️ すでに同じ名前のファイルがある場合、「同名のファイルは追加できません。ファイル名を変更してアップロードしてください」と表示されます。
⚠️ フォルダの種類（js / css）と一致しない拡張子のファイルは、登録されません。
💡 複数のファイルをまとめて選択・ドロップできます。
4-5. URL（CDN）を追加する
外部ライブラリを、URL指定で読み込ませることができます。
- サイドメニューで、追加したいフォルダの行の右側にある「URL指定で追加」アイコンをクリックします。
「URL指定で追加」画面が表示されます。
「URL指定で追加」の画面。URLの入力欄と、ライブラリの一覧
- 「URLを入力」の欄に、読み込ませたいURLを入力します。
- 「追加」ボタンをクリックします。
URLが登録され、運用環境へ反映されます。
よく使われるライブラリは、チェックボックスから選ぶこともできます。
- 「URL指定で追加」画面の一覧から、使用したいライブラリのチェックボックスをオンにします。
- 「追加」ボタンをクリックします。
そのライブラリのJS・CSSが、それぞれ適切なフォルダへ登録されます。
チェックボックスで選べるライブラリは次のとおりです。
- 「Ace (v1.16.0)」
- 「axios (v1.11.0)」
- 「Chart.js (v4.5.0)」
- 「DataTables (v1.10.20)」
- 「DOMPurify (v3.2.6)」
- 「encoding.js (v2.2.0)」
- 「Font Awesome (v4.7.0)」
- 「Font Awesome (v7.0.0)」
- 「FullCalendar (v6.1.19)」
- 「highlight.js (v10.5.0)」
- 「jqGrid (v4.6.0)」
- 「jQuery (v3.7.1)」
- 「jQuery UI (v1.14.3)」
- 「jQuery.Gantt (v20210106)」
- 「JsRender (v1.0.16)」
- 「jsTree (v3.3.17)」
- 「JSZip (v3.10.1)」
- 「kintone REST API Client (v5.7.4)」
- 「Lodash (v4.17.21)」
- 「Luxon (v3.7.1)」
- 「Marked.js (v15.0.5)」
- 「Moment Timezone (v0.5.40)」
- 「OpenLayers (v10.6.1)」
- 「popModal (v1.26)」
- 「slabText (v2.2.0)」
- 「spin.js (v2.3.2)」
- 「sweetalert2 (v11.22.5)」
- 「Swiper (v11.2.10)」
- 「toastr (v2.1.4)」
- 「Vue3 (v3.5.20)」
⚠️ URLもチェックボックスも指定せずに「追加」をクリックすると、「※URLを入力または、CDNを選択してください。」と表示されます。
⚠️ 入力したURLの形式が正しくない場合、「※URLの形式が不正です。」と表示されます。
http://またはhttps://から始まるURLを入力してください。💡 追加されたURLは、必ずファイルよりも先に読み込まれる位置に配置されます。ライブラリを使うコードよりも先にライブラリが読み込まれます。
💡 チェックボックスから選んだライブラリにCSSが含まれる場合、CSSは自動的にcssのフォルダへ追加されます。
4-6. CDNの表示・非表示を切り替える
サイドメニューにCDNのURLが多く並んで見づらい場合は、非表示にできます。
- 画面左上のリンクアイコンをクリックします。
サイドメニューからCDNの行が非表示になります。 - もう一度リンクアイコンをクリックします。
CDNの行が再び表示されます。
💡 アイコンにマウスカーソルを合わせると、「リンク(CDN)を非表示にする」または「リンク(CDN)を表示する」と表示されます。
⚠️ 非表示にしても、CDNの登録自体が削除されるわけではありません。表示上の切り替えのみです。
4-7. ファイル・URLを右クリックで操作する
サイドメニューの項目を右クリックすると、操作メニューが表示されます。
- サイドメニューで、操作したいファイル名またはURLを右クリックします。
メニューが表示されます。 - 実行したい項目をクリックします。
ファイルを右クリックしたときのメニュー
ファイルを右クリックした場合のメニューは次のとおりです。
| メニュー項目 | 動作 |
|---|---|
| 「ダウンロード」 | ファイルをパソコンに保存します |
| 「ファイル名を変更」 | ファイル名を変更します |
| 「削除」 | ファイルをアプリから削除します |
URLを右クリックした場合のメニューは次のとおりです。
| メニュー項目 | 動作 |
|---|---|
| 「URLをコピー」 | URLをクリップボードにコピーします |
| 「リンクを変更」 | URLを別のURLに変更します |
| 「削除」 | URLをアプリから削除します |
ファイル名を変更する場合
- 右クリックメニューの「ファイル名を変更」をクリックします。
「ファイル名の変更」画面が表示されます。 - 新しいファイル名を入力します。
- 「変更」ボタンをクリックします。
ファイル名が変更され、運用環境へ反映されます。
⚠️ 拡張子（
.jsまたは.css）を含めて入力してください。付いていない場合は「拡張子 .js を付けてください」のように表示されます。⚠️ 同じ名前のファイルがすでにある場合は、「同名のファイルが既に存在します」と表示されます。
リンクを変更する場合
- 右クリックメニューの「リンクを変更」をクリックします。
「リンク（CDN）の変更」画面が表示されます。 - 新しいURLを入力します。
- 「変更」ボタンをクリックします。
URLが変更され、運用環境へ反映されます。
⚠️
http://またはhttps://から始まらないURLを入力すると、「http(s):// で始まるURLを入力してください」と表示されます。
削除する場合
- 右クリックメニューの「削除」をクリックします。
「ファイルを削除します よろしいですか？」という確認画面が表示されます。 - 「削除」ボタンをクリックします。
削除され、運用環境へ反映されます。
⚠️ 削除したファイルは元に戻せません。必要な場合は、削除前に「ダウンロード」で手元に保存してください。
💡 削除したファイルをエディターで開いていた場合、そのタブは自動的に閉じます。
4-8. ファイルの読み込み順を並べ替える
kintoneのカスタマイズは、上から順に読み込まれます。読み込み順は、サイドメニュー上で変更できます。
- サイドメニューで、動かしたい項目の左端にある横線のアイコンにマウスカーソルを合わせます。
- そのアイコンを、移動したい位置までドラッグします。
- マウスのボタンを離します。
並び順が保存され、運用環境へ反映されます。
⚠️ 並べ替えは、同じフォルダの中でのみ行えます。
💡 ライブラリは、それを使うファイルよりも上に配置してください。
4-9. エディターを左右2画面に分割する
2つのファイルを見比べながら編集できます。
分割ボタンを使う場合
- エディターでファイルを2つ以上開きます。
- タブ列の右上に表示される分割アイコン（「エディターを分割」）をクリックします。
一番右のタブが右側の画面へ移動し、画面が左右に分かれます。
エディターを左右に分割したところ
タブをドラッグする場合
- 右側へ移動したいタブをドラッグします。
画面の右側に「ここにドロップして分割」と表示されます。 - その領域でマウスのボタンを離します。
画面が左右に分かれます。
💡 中央の境界線を左右にドラッグすると、それぞれの画面の幅を変更できます。
💡 右側の画面のタブをすべて閉じると、分割は解除されます。
4-10. kintone APIのひな形コードを挿入する
よく使うkintone APIのコードを、クリックで挿入できます。
- エディターでファイルを開きます。
- コードを挿入したい位置をクリックし、カーソルを合わせます。
- タブ列のいちばん右上にある三角のアイコンをクリックします。
ひな形の一覧パネルが表示されます。
ひな形の一覧パネル。カテゴリーが並ぶ
- カテゴリー名をクリックします。
そのカテゴリーの項目が展開されます。 - 挿入したい項目名をクリックします。
カーソル位置にひな形のコードが挿入されます。
カテゴリーは次のとおりです。
| カテゴリー名 | 内容 |
|---|---|
| 「イベント」 | 各画面の表示時・保存時などのイベント登録 |
| 「情報の取得／設定」 | ログインユーザー、アプリ、レコードなどの情報取得 |
| 「要素の取得」 | 画面上の要素（スペースなど）の取得 |
| 「フィールド表示／非表示」 | フィールドやグループの表示切り替え |
| 「要素の表示／非表示」 | ボタンやサイドバーなどの表示切り替え |
| 「REST API」 | レコード、フォーム、一覧などのREST API呼び出し |
| 「外部 API」 | 外部APIの実行、外部へのファイルアップロード |
💡 モバイル用のJavaScriptファイルを編集している場合、挿入されるコードは自動的にモバイル用の記述に変換されます。
⚠️ ひな形が挿入されるのは、現在選択されているタブです。分割表示中は、最後に操作した側の画面に挿入されます。
4-11. ログを確認する
保存や反映の結果は、画面下部の「ログ」タブで確認できます。
- 画面下部の「ログ」タブをクリックします。
操作の履歴が時刻付きで表示されます。
「ログ」タブ。右側に「自動スクロール」「ログクリア」と×がある
| 操作 | 動作 |
|---|---|
| 「自動スクロール」のチェックをオンにする | 新しいログが追加されると自動的に一番下まで移動します |
| 「ログクリア」をクリックする | 表示中のログをすべて消去します |
| 右上の「×」をクリックする | ターミナルを閉じます |
💡 ターミナルを閉じた後は、エディター右上のターミナルアイコンをクリックすると再表示できます。アイコンにマウスカーソルを合わせると「ターミナルを表示」と表示されます。
💡 ターミナルの上端をドラッグすると、高さを変更できます。
⚠️ ログはブラウザのタブを閉じるまでの一時的な記録です。表示件数は最大500件で、超えた分は古いものから消えます。
4-12. AIチャットでカスタマイズを依頼する
AIに日本語で指示すると、コードが自動的に生成され、エディターへ直接書き込まれます。
- 「設定」画面でAPIキーを登録します（手順は「3-5」を参照）。
画面下部に「AIチャット」タブが表示されます。 - 「AIチャット」タブをクリックします。
- 下部の入力欄に、やりたいことを日本語で入力します。
- キーボードの「Enter」を押します。
AIの応答が始まり、「AIが応答中…」と表示されます。
「AIチャット」タブ。下部の入力欄に指示を入力する
- AIがコードを生成すると、対象のファイルがエディターに開かれ、コードが書き込まれます。
書き込み中は、エディターに「AIが編集中…」と表示され、手入力はできなくなります。 - 書き込みが終わったら、内容を確認します。
- チャット内の「アプリに反映」ボタンをクリックします。
コードが保存され、運用環境へ反映されます。
AIが書き込んだファイル名と「アプリに反映」ボタン
⚠️ AIが書き込んだコードは、この時点ではまだアプリに保存されていません。「アプリに反映」ボタン、またはエディターの「すべて保存」で保存してください。
⚠️ AIが生成したコードは、必ず内容を確認してから反映してください。意図しない動作をする可能性があります。
💡 指示の途中で改行したい場合は、「Shift」＋「Enter」を押します。
💡 応答を途中でやめたい場合は、入力欄の右側の停止アイコンをクリックします。
💡 AIから質問が返ってきた場合は、選択肢がボタンで表示されます。ボタンをクリックすると、そのまま回答できます。
💡 AIには、このアプリのフィールドコードやフォームのレイアウト、登録済みのカスタマイズファイルの内容が自動的に渡されます。フィールドコードを毎回伝える必要はありません。
💡 「他のアプリからレコードを取得したい」といった指示の場合、AIが対象アプリの情報を自動的に取得して回答します。似た名前のアプリが複数ある場合は、どのアプリかを質問されます。
⚠️ AIが外部ライブラリを必要と判断した場合、CDNのURLが自動的に追加されます。また、指示に応じてファイルやURLを一覧から外すこともあります。どちらも「ログ」タブに記録され、保存したときにアプリへ反映されます。
4-13. 差分編集モードを切り替える
既存ファイルの小さな修正を、変更箇所だけ書き換える方式に切り替えられます。
- 「AIチャット」タブの入力欄の上にある「差分編集」のスイッチをクリックします。
スイッチのオン・オフが切り替わります。
「差分編集」のスイッチ（初期状態はオフ）
| 状態 | 動作 |
|---|---|
| オン | 小さな修正のとき、該当箇所だけを書き換えます |
| オフ | ファイル全文を出力し直します |
💡 スイッチにマウスカーソルを合わせると、現在の状態の説明が表示されます。
⚠️ 差分編集では、変更箇所が現在のコードと一致しないと適用されません。適用できなかった場合は、チャット内に「○箇所は不一致」と表示されます。その場合は、差分編集をオフにして依頼し直してください。
⚠️ 応答の生成中は、スイッチを切り替えられません。
4-14. AIチャットに画像を添付する
画面のスクリーンショットなどを添付して、AIに伝えられます。
- 「AIチャット」タブの入力欄の上にあるクリップのアイコンをクリックします。
ファイル選択画面が表示されます。 - 添付したい画像を選択します。
入力欄の上に画像の縮小表示が追加されます。 - 指示の文章を入力します。
- キーボードの「Enter」を押します。
💡 画像をコピーした状態で入力欄に「Ctrl」＋「V」を押しても、添付できます。
💡 添付した画像を取り消す場合は、縮小表示の右上の「×」をクリックします。
⚠️ 添付できる画像は最大8枚、1枚あたり5MBまでです。上限を超えた場合は「ログ」タブに警告が表示されます。
4-15. チャットを新しく始める／履歴から再開する
新しいチャットを始める
- 「AIチャット」タブの右上にある「新規チャット」ボタンをクリックします。
これまでのやり取りが履歴に保存され、画面が空になります。
過去のチャットを再開する
- 「AIチャット」タブの右上にある「セッション履歴」ボタンをクリックします。
「チャットセッション履歴」の一覧が表示されます。
「AIチャット」タブ右上の「セッション履歴」
- 再開したいチャットをクリックします。
そのチャットの内容が画面に復元されます。
不要なチャットは削除できます。
- 「チャットセッション履歴」で、削除したいチャットの右側の「削除」ボタンをクリックします。
そのチャットが一覧から削除されます。
⚠️ 削除したチャットは元に戻せません。
💡 履歴は、アプリごと・プロバイダ（Claude / OpenAI）ごとに分かれています。プロバイダを切り替えると、そのプロバイダの履歴だけが表示されます。
⚠️ 履歴はご利用のブラウザ内に保存されます。別のパソコンやブラウザからは表示されません。
4-16. GitHubへコミット＆プッシュする
現在のカスタマイズ内容を、GitHubリポジトリに記録します。
- 「設定」画面でGitHub連携を設定します（手順は「3-6」を参照）。
エディター右上に「GitHub」アイコンが表示されます。 - 「GitHub」アイコンをクリックします。
「GitHub」画面が表示されます。
「GitHub」画面の「コミットする」タブ
- 「コミットする」タブを選択します。
- 「Commit message」の欄に、変更内容を説明する文章を入力します。
- 「Commit & Push」ボタンをクリックします。
登録済みのすべてのファイルがGitHubへ送信されます。 - 「ログ」タブで「Git 処理完了」と表示されることを確認します。
💡 「Commit message」を空欄のままにすると、実行日の日付がメッセージとして使われます。
💡 送信されるのは、アプリに登録済みのファイルとREADME.mdです。エディターで編集中の未保存の内容は含まれません。先に「すべて保存」を実行してください。
💡 CDNのURLはファイルとしては送信されませんが、読み込み順とあわせてプラグインに記録され、「4-17」で戻すときに復元されます。
⚠️ ファイル数が多い場合、処理に時間がかかります。完了するまで画面を閉じないでください。
4-17. 過去のコミットの状態に戻す
GitHubに記録した過去の状態へ、カスタマイズを戻せます。
- エディター右上の「GitHub」アイコンをクリックします。
- 「コミット一覧」タブをクリックします。
これまでのコミットが一覧表示されます。
「コミット一覧」タブ。戻したいコミットを選ぶ
- 戻したいコミットのラジオボタンを選択します。
- 「選択したコミットの状態に戻す」ボタンをクリックします。
カスタマイズ設定が、そのコミット時点の内容に置き換わります。 - 歯車アイコンの「設定」画面を開き、「保存」をクリックします。
戻した内容が運用環境へ反映されます。
⚠️ 現在のカスタマイズ設定は、選択したコミットの内容で上書きされます。戻す前に、現在の状態をコミットしておくことをおすすめします。
⚠️ 「選択したコミットの状態に戻す」を実行しただけでは、運用環境には反映されません。手順5の「保存」まで行ってください。
⚠️ 戻せるのは、このプラグインの「Commit & Push」で記録したコミットです。リポジトリ作成時に自動で作られる「Initial commit」や、GitHub上で直接行ったコミットを選ぶと、JavaScript / CSSの登録がすべて外れた状態になります。
⚠️ この操作を実行すると、エディターで開いていたタブはすべて閉じます。
4-18. 画面を拡大・縮小する
エディターの表示領域を、ブラウザの全画面まで広げられます。
- 画面右上の拡大アイコンをクリックします。
エディターがブラウザ全体に広がります。 - もう一度アイコンをクリックします。
元の大きさに戻ります。
💡 キーボードの「Ctrl」＋「O」でも切り替えられます。
💡 サイドメニューの右端をドラッグすると、サイドメニューの幅を変更できます。
4-19. レコード一覧・詳細・追加／編集画面での操作
このプラグインは、アプリの設定画面（プラグインの設定画面）でのみ動作します。
レコード一覧画面・レコード詳細画面・レコードの追加／編集画面に、このプラグイン自身のボタンやメニューが追加されることはありません。
これらの画面での動作は、このプラグインで作成・保存したJavaScript / CSSの内容によって決まります。
4-20. 使い方の例：AIチャットで「保存時に日付を自動入力する」カスタマイズを作る
AIチャットを使って、カスタマイズを作ってからアプリに反映するまでを、最初から最後まで通して説明します。
- 「設定」画面で「プロバイダ」と「APIキー」を登録し、「保存」をクリックします（「3-5」「3-7」）。
画面下部に「AIチャット」タブが表示されます。 - 「AIチャット」タブを開き、入力欄に「レコードを保存するとき、日付フィールドが空なら今日の日付を入れて」のように、やりたいことを入力して「Enter」を押します。
- AIから質問が返ってきたら、表示されたボタンから答えを選びます（「4-12」）。
- AIがコードを書き込むと、対象のファイルがエディターに開きます。内容を確認します。
- チャット内の「アプリに反映」ボタン（またはエディターの「すべて保存」）をクリックします。
- 「ログ」タブに「運用環境へ反映完了」と表示されたら、レコードの追加画面を開き直して動きを確かめます。
- 思いどおりに動かないときは、AIチャットで「日付が入らない」のように続けて伝え、手順4〜6を繰り返します。
- 期待どおりに動いたら、GitHub連携を使っている場合は「Commit & Push」で記録しておきます（「4-16」）。
💡 AIを使わずに自分で書く場合は、手順2〜5の代わりに「4-1」でファイルを作り、コードを書いて「すべて保存」をクリックします。
制限事項・注意点
5-1. 保存と反映について
- 保存操作を行うと、アプリの「アプリを更新」が自動的に実行されます。
- そのため、アプリの設定に未反映の変更がある場合、それらも同時に反映されます。
- 複数の管理者が同時に同じアプリの設定を編集すると、意図しない反映が起こる可能性があります。
- 保存は、開いているタブのうち変更のあるファイルすべてが対象です。ファイルを選んで保存することはできません。
5-2. 編集内容の保持について
- 開いているタブや編集途中の内容は、ブラウザのタブを閉じると失われます。
- 大切な変更は、こまめに保存してください。
- 削除したファイル、削除したリポジトリ、削除したチャット履歴は元に戻せません。
5-3. AIチャットについて
- APIキーはお客様ご自身でご用意ください（Anthropic社のClaude、またはOpenAI）。利用料金はお客様のAPIアカウントに課金されます。
- ブラウザからAI提供元のサーバーへ直接通信します。外部通信が制限された環境では利用できません。
- AIが生成したコードの動作は保証されません。必ず内容を確認し、動作テスト環境などで検証してから運用してください。
- AIには、アプリ名、フィールドコード、フォームのレイアウト、登録済みカスタマイズファイルの内容、参照可能なアプリの一覧が送信されます。機密性の高い情報が含まれる場合はご注意ください。
- 添付できる画像は最大8枚、1枚あたり5MBまでです。
- チャット履歴はご利用のブラウザ内に保存されます。別のパソコンやブラウザからは参照できません。
- 差分編集モードでは、変更箇所が現在のコードと一致しない場合に適用されないことがあります。
5-4. GitHub連携について
- 作成されるリポジトリは非公開（プライベート）リポジトリです。
- リポジトリ作成後、リポジトリ名は変更できません。
- 「リポジトリ削除」には、トークンに
delete_repoの権限が必要です。 - 「選択したコミットの状態に戻す」を実行すると、現在のカスタマイズ設定は上書きされます。運用環境への反映には「設定」画面の「保存」が必要です。
- 戻せるのは、このプラグインからコミットした状態です。
- 対象となるブランチは
mainです。
5-5. ファイル・CDNについて
- フォルダの種類（js / css）と一致しない拡張子のファイルはアップロードできません。
- 同じフォルダ内に同じ名前のファイルは登録できません。
- ファイルの並べ替えは、同じフォルダ内でのみ行えます。
- CDNのURLは、必ずファイルよりも先に読み込まれる位置に配置されます。
5-6. 画面表示について
- エディターの分割は、左右2画面までです。
- サイドメニューの幅は220px〜450pxの範囲で変更できます。
- 左右の画面幅は、25%〜75%の範囲で変更できます。
困ったときは
6-1. 表示されるメッセージと対処
保存・ファイル操作
| 表示されるメッセージ | 表示される場所 | 対処 |
|---|---|---|
| 保存に失敗しました／運用環境へ反映失敗 | 「ログ」タブ | アプリ管理権限があるか、ほかの管理者が同じアプリの設定を同時に編集していないかを確認し、もう一度保存します |
| 設定の保存に失敗しました／設定保存失敗 | 「ログ」タブ | 「設定」画面の保存に失敗しています。時間をおいて、もう一度「保存」をクリックします |
| APIキーの保存に失敗しました／Git アクセストークンの保存に失敗しました | 「ログ」タブ | APIキー・トークンを暗号化領域に保存できませんでした。もう一度「設定」画面で「保存」をクリックします |
| APIキーの移行に失敗しました。設定（⚙）から保存し直してください | 「ログ」タブ | 以前のバージョンで保存したAPIキーの移し替えに失敗しています。「設定」画面を開いて「保存」をクリックします |
| カスタマイズ設定の取得に失敗しました | 「ログ」タブ | アプリのJavaScript / CSSの設定を読み込めませんでした。画面を再読み込みします |
| ※ファイル名を入力してください。 | 「新規ファイル作成」画面 | ファイル名を入力します |
| ※同名のファイルは追加できません。／同名のファイルは追加できません。ファイル名を変更してアップロードしてください | 「新規ファイル作成」画面／アップロード時 | 同じフォルダに同じ名前のファイルがあります。別の名前にします |
| ファイル名を入力してください／拡張子 .js を付けてください／同名のファイルが既に存在します | 「ファイル名の変更」画面 | 拡張子を含めた、重複しない名前を入力します |
| ※URLを入力または、CDNを選択してください。 | 「URL指定で追加」画面 | URLを入力するか、一覧のライブラリにチェックを入れます |
| ※URLの形式が不正です。／http(s):// で始まるURLを入力してください | 「URL指定で追加」画面／「リンク（CDN）の変更」画面 | http:// または https:// から始まるURLを入力します |
AIチャット
| 表示されるメッセージ | 表示される場所 | 対処 |
|---|---|---|
| 先にAPIキーを入力してください | 「設定」画面（「モデル取得」） | 「APIキー」を入力してから「モデル取得」をクリックします |
| モデル一覧の取得に失敗しました | 「設定」画面（「モデル取得」） | APIキーが、選んだ「プロバイダ」のものか確認します |
| 設定（⚙）からAIのAPIキーを登録してください。 | AIチャット | 「設定」画面で、選んでいるプロバイダのAPIキーを登録して保存します |
| Claude（またはOpenAI） APIの残高が不足しています。… | AIチャット | お客様のAPIアカウントの残高（クレジット）が足りません。各提供元の管理画面で残高を追加します |
| … APIキーが正しくないか、権限がありません。設定画面でAPIキーを確認してください。 | AIチャット | APIキーを確認し、正しいキーを登録し直します |
| … APIのレート制限に達しました。少し時間をおいて再度お試しください。 | AIチャット | 短時間に送りすぎています。少し待ってから送り直します |
| 指定したモデルが見つかりません。設定画面で「モデル取得」を実行し、利用できるモデルを選び直してください。 | AIチャット | 「設定」画面で「モデル取得」をクリックし、一覧からモデルを選んで保存します |
| … API側で一時的な障害が発生しています | AIチャット | AI提供元の障害です。時間をおいて送り直します |
| （追加情報の取得回数上限に達しました。対象アプリを絞り込んで再度依頼してください。） | AIチャット | 他のアプリの情報を取りに行く回数が上限に達しました。対象のアプリ名をはっきり書いて依頼し直します |
| ○箇所は不一致 | AIチャット（ファイル名の横） | 差分編集で一部が適用されませんでした。「差分編集」をオフにして依頼し直します（「4-13」） |
| AI編集の対象（ファイル名）が見つかりません（未登録のため編集できません） | 「ログ」タブ | AIが、登録されていないファイルを差分編集しようとしました。「差分編集」をオフにして依頼し直します |
| 画像は最大8枚までです／画像が大きすぎます（…・5MB以下にしてください） | 「ログ」タブ | 添付する画像を8枚以内、1枚5MB以下にします |
GitHub連携
| 表示されるメッセージ | 表示される場所 | 対処 |
|---|---|---|
| リポジトリ名は半角英数字及びハイフンのみにしてください | 「設定」画面 | 「Repository Name」を半角英数字とハイフンだけにします |
| アクセストークンを設定してください | 確認ダイアログ | 「Git Access Token」にトークンを入力して保存します |
| リポジトリ削除に失敗しました（HTTP 403） | エラー画面 | トークンに delete_repo の権限がありません。GitHubで権限を付けたトークンを発行し直して登録します |
| リポジトリ削除に失敗しました（HTTP 401） | エラー画面 | トークンが無効か、有効期限が切れています。新しいトークンを登録します |
| リポジトリ削除に失敗しました（HTTP 404） | エラー画面 | リポジトリがすでに削除されているか、名前が変わっています。GitHub側で確認します |
6-2. うまく動かないときの確認ポイント
- 保存したのにレコード画面に反映されない：レコード画面を再読み込みします。「ログ」タブに「運用環境へ反映完了」と出ているかも確認します。
- PCでは動くのにモバイルでは動かない：モバイルのカスタマイズは「mobile - js」「mobile - css」に別に登録します。「desktop - js」のファイルはモバイル版では読み込まれません。
- ライブラリを使うコードがエラーになる：ライブラリのURL（CDN）が、同じ種類（PC用／モバイル用）のフォルダに登録されているか確認します。
- 「AIチャット」タブが表示されない：「設定」画面で、選んでいる「プロバイダ」のAPIキーが登録されているか確認します。APIキーはプロバイダごとに別に保存されます。
- 「GitHub」アイコンが表示されない：「設定」画面でトークンとリポジトリ名を入力し、「リポジトリ作成」まで行ったか確認します（「3-6」）。
- 意図しない設定まで反映された：このプラグインの保存は「アプリを更新」まで自動で行います。ほかの管理者が編集中の未反映の設定も、同時に反映されます（「2-1」）。
6-3. よくある質問
Q. AIチャットの料金は、プラグインの料金に含まれますか？
A. 含まれません。AIチャットは、お客様ご自身のAPIキー（Claude または OpenAI）で利用し、料金はお客様のAPIアカウントに課金されます。AIチャットを使わなければ、APIの料金はかかりません。
Q. 「設定」画面を開くと、「モデル」が空欄になっています。
A. 「モデル取得」で取得した一覧は保存されないため、画面を開き直すと既定の候補だけが並びます。既定の候補にないモデルを選んでいた場合は空欄に見えますが、選んだモデルはそのまま使われます。モデルを変えたいときは、「モデル取得」をクリックしてから選び直し、「保存」をクリックします。
Q. AIに、どんな情報が送られますか？
A. このアプリの名前と説明・フィールドコード・フォームのレイアウト、登録済みのカスタマイズファイルの内容、参照できるアプリの一覧、入力した指示と添付した画像です。レコードのデータそのものは送りません（「5-3」）。
Q. 間違えて保存したコードを、元に戻せますか？
A. このプラグインには、保存前の状態に戻す機能はありません。GitHub連携を使っていれば、「Commit & Push」で記録した時点の状態に戻せます（「4-17」）。大きな変更の前には、コミットしておくか、ファイルを「ダウンロード」で手元に保存しておくことをおすすめします。
Q. 複数の管理者で使っても大丈夫ですか？
A. 使えますが、同じアプリを同時に編集しないでください。保存のたびに「アプリを更新」が自動で行われるため、ほかの人の未反映の変更も反映されたり、後から保存した内容で上書きされたりします。