2026.02.02

画面遷移ゼロでkintone API実行！Chrome拡張機能「KinDevST」を自作してMITライセンスで公開してみた

majinalife.com

kintoneカスタマイズや連携開発において、生産性を下げる部分と言えば何でしょうか。それは、「APIの挙動を確認するために、本来の作業画面（kintone）から離れる時間」です。

kintoneエンジニアなら、以下のような経験が一度はあるはずです。

レコード取得のクエリを確認したいが、わざわざPostmanやPowerShellやターミナルを立ち上げてcurlコマンドを入力するのが億劫。
必須パラメータをドキュメントで確認している間に、「あれ、今どの処理を書いていたっけ？」とコンテキストを見失う。
Chromeの開発者ツールでkintone.api(…)を叩くにも、長ったらしいJSONを書くのが面倒でタイプミスする。

この「数秒の画面遷移」や「ツールの切り替え」が積み重なると、開発のリズムが分断されてしまいます。

そこで私が生成AIと対話しながら高速に実装する手法「Vibe Coding」を用いて開発したのが、ブラウザの「サイドパネル」で動くChrome拡張機能、『kinDevST (kintone Development Support Tools)』です。

Githubの公開リポジトリはこちらから(MIT License)

この記事では、開発の背景から、Manifest V3の技術的な裏側、そしてMITライセンスで公開した理由までを詳しくご紹介します。

森田ユウゴ

台湾で「面倒解決エンジニア」として活動している森田ユウゴです！

私は台湾在住のソフトウェアエンジニアです。「面倒くさい！」を原動力に、kintoneカスタマイズやChrome拡張機能開発などを通して、日常や業務の課題をテクノロジーで解決することに注力しています。

ご相談はこちらから▼

森田ユウゴのプロフィール | ココナラ

【開発背景】 kinDevSTとは？：kintone開発における「画面遷移ゼロ」の体験

kinDevST(kintone Development-Support-Tools)は、森田ユウゴが「Vibe Coding（AIとの対話的コーディング）」を用いて開発した、Google Chrome拡張機能です。

簡単に説明するならば「kintoneのAPIを網羅したリファレンス付き実行ツール」です。

既存のkintone APIテスト手法とその課題

APIのテストをするなら「cybozu developer networkデモ環境」という方法もありますが、全てのAPIに対応していません。

そのため、通常kintone APIの挙動を確認するには、以下の3パターンが基本でしょうか。

1.外部ツールを使う場合

Postmanなどを開き、URL、認証ヘッダー、Bodyをセットして送信。
課題: タブやアプリの切り替えが発生し、kintone上のレコードIDやフィールドコードを見ながら作業できない。

2.開発者ツールを使う場合

F12でコンソールを開き、kintone.api(…)を手打ちする。
課題: JSONの記述が面倒な上に、過去の履歴が残りにくく、再利用性が低い。

3.カスタマイズに反映する

LiveServerなどを用いてカスタマイズを修正する。
課題：動作確認用の専用のアプリが必要。実行したいAPIに応じてアプリ環境の準備が手間。VSCodeやCursorを開くのが手間

kinDevSTは、特に「画面の分断」という課題をChromeのサイドパネルに機能を詰め込むことで解決しました。

なぜ「ポップアップ」ではなく「サイドパネル」なのか

従来のChrome拡張機能によくある「アイコンをクリックして出るポップアップ」は、別の場所をクリックすると消えてしまいます。これでは、kintoneの画面でフィールドコードをコピーして貼り付けるといった並行作業ができません。

kinDevSTはサイドパネルに常駐するため、ブラウザの表示領域を分割してkintoneアプリと並列に表示され続けます。

左側: 操作・確認したいkintoneアプリの画面
右側: APIを実行し、レスポンスを確認するkinDevSTの画面

この「画面遷移ゼロ」のレイアウトにより、kintoneの画面で見えている情報（レコードIDやフィールドの値）を、視線を動かすだけで右側のツールに入力し、即座に結果を得るという「思考を途切れさせない開発フロー」を実現しました。

配布・導入方法：MITライセンスでの公開と使い方

kinDevSTは、Chromeウェブストアでの配布ではなく、GitHub上でのソースコード公開（MITライセンス）という形をとっています。これには理由があります。

なぜMITライセンスなのか

クローズドな製品として配布するのではなく、MITライセンス（著作権表示さえすれば、商用利用・修正・配布が自由）で公開することで、以下のようなサイクルが生まれることを期待しています。

企業のセキュリティ基準に合わせる: 社内規定で外部拡張機能が禁止されていても、コードレビューを経て自社専用ツールとして再ビルドできる。
AIによる機能追加: ユーザー自身が「この機能も欲しい」と思ったら、コードをClaudeやCursorに読ませて、自分だけの最強ツールへと進化させられる。

エンジニアの皆さんには、ぜひこのリポジトリをForkして、自分専用のkinDevSTを作り上げてほしいと思います。

インストール手順（開発者モード）

現在はストア審査を通していないため、Chromeの「パッケージ化されていない拡張機能を読み込む」機能を使用します。

コードのダウンロード

GitHubリポジトリからZIPをダウンロードして解凍（または git clone）します。

拡張機能管理画面を開く

Chromeのアドレスバーに chrome://extensions/ と入力して開きます。

開発者モードをON

右上の「デベロッパーモード」トグルをONにします。

パッケージ化されていない拡張機能を読み込む

左上のボタンをクリックし、ダウンロードしたフォルダ内の kinDevST-kintoneSupportTools フォルダ（manifest.jsonが含まれている階層）を選択します。

使い方：5ステップで完了

導入後の使い方は非常にシンプルです。

kintoneアプリを開く

操作したいkintoneのアプリ（レコード一覧画面や詳細画面）を開きます。

サイドパネルを起動

Chromeのツールバーにある「サイドパネル」アイコンをクリックし、『kinDevST』を選択します。
※アイコンは検討中のため、今後変更となる場合があります。固定表示しておくと便利です

APIを選んで実行

サイドパネルが表示されるので、表示名もしくはAPI名から入力して検索して選択をします。

表示名から選択すると自動でAPIも選択され、逆も同様です。

bodyや引数の入力

REST APIであればbody、JavaScript APIであれば引数を入力します。

※下記はkintone REST APIの「1件のレコードを取得するAPI(GET /k/v1/record.json)」でBodyをプレースホルダーから入力した例です。

実行

青いボタンで実行し、結果が下部に出力されます。

Settingタブには「タブ記憶機能」やログやRequest HeadersやStatus Codeを表示・非表示する設定なども用意しています。

kinDevSTの主な機能：痒い所に手が届く3つの特徴

kintoneのREST APIやJavaScript APIのテストをしたい人が求めているのは「作業の手を止めないスムーズさ」です。kinDevSTでは、kintone開発における「面倒」を徹底的に排除するため、以下の3つの特徴を実装しました。

特徴1: REST APIとJavaScript APIのハイブリッド実行

通常、REST APIはPostmanやPowerShell / ターミナルで、JavaScript APIはブラウザのコンソールで、とツールを使い分ける必要があります。 kinDevSTはサイドパネル上部のタブを切り替えるだけで、この2つのAPI実行環境を瞬時に行き来できます。

REST APIタブ: サーバーサイドでの処理や外部連携のデバッグに。
JS APIタブ: 画面上の値の取得や、フロントエンドでの挙動確認に。

これらが「同じサイドパネル内」で完結するため、思考のスイッチングコストがかかりません。

特徴2: ドキュメント不要の「プリセット入力」

「APIのパラメータ、なんだっけ？」とドキュメントを探しに行く時間は、開発のリズムを崩す最大の要因です。 kinDevSTでは、APIを選択すると「よく使うパラメータの雛形（JSON）」が自動的に入力欄にセットされます。

必須パラメータがあらかじめ入力されているため、値を書き換えるだけで実行可能。
「公式ドキュメント」へのリンクボタンも常設しており、詳細仕様を確認したい場合も1クリックで到達できます。

特徴3: 試行錯誤を支える「履歴管理」

開発中は、同じAPIをパラメータを少しずつ変えて何度も叩くことがよくあります。 kinDevSTは実行したAPIの履歴を自動的に保存し、リスト化します。「さっき成功したあのクエリ」をワンクリックで呼び出し、再実行することが可能です。ブラウザをリロードしても履歴は消えません。

さらにその履歴は「実行ログのコピー」を容易に行うことが出来、AIに情報を投げる際にも便利です。

kinDevSTの動作の仕組み

「拡張機能からkintoneを操作する」といっても、単にHTTPリクエストを送るだけではありません。ここでは、kinDevSTを支える技術的な裏側（Vibe Codingで実装したこだわりの設計）を解説します。

技術解説 1: JS APIの「埋め込み実行」 (Manifest V3 / World: MAIN)

Chrome拡張機能の開発における最大の壁の一つが、「隔離された世界（Isolated World）」です。通常、拡張機能のJavaScript（Content Script）は、Webページ上のグローバル変数（window.kintoneオブジェクトなど）に直接アクセスできません。

従来の解決策は、<script>タグをDOMに注入してwindow.postMessageで通信するという泥臭い方法でした。しかし、kinDevSTではManifest V3の最新機能である chrome.scripting.executeScript の world: 'MAIN' オプション を採用しています。

これにより、拡張機能からWebページと同じ「メインワールド」のコンテキストでJavaScriptを直接実行することが可能になりました。結果として、ユーザーが開いているkintone画面上の window.kintone オブジェクトへ拡張機能側からダイレクトにアクセスし、その実行結果を即座にサイドパネルへ返す仕組みを実現しています。

この仕組みに対して「XSSのリスクはないのか？」と懸念されるかもしれませんが、Chromeの仕様上、拡張機能から渡される引数は安全にJSONシリアライズ（文字列化）されてメインワールドに渡されます。

仮に引数の中に "); alert('XSS'); // のような文字列が含まれていても、それは単なる「文字列データ」として扱われ、実行可能なコードとして解釈されることはありません。

セッション認証を実現した仕組み (Content Script Proxy)

REST APIを実行する際、重要なのは「認証情報」です。

kinDevSTでは、Content Scriptを経由してAPIリクエストを代理送信するアーキテクチャを採用しました。

サイドパネルからContent Scriptへ「実行指示」を送る。
Content Scriptが、現在開いているページと同じオリジンからfetchを実行する。
この時、ブラウザが保持しているCookie（セッション情報）とCSRFトークンが自動的に利用される。

これにより、認証ヘッダーを一切意識することなく、まるでkintoneの画面内操作の一部であるかのようにAPIを叩くことができます。

もちろん「パスワード認証」「APIトークン認証」にも対応しているので、要件に応じて使い分けることが出来ます。

JSON設定ファイル駆動 (Configuration over Code)

kintoneのAPIは種類が豊富で、今後も増える可能性があります。これらをハードコードで管理するとメンテナンスが困難になります。 kinDevSTでは、APIの定義（エンドポイント、パラメータの雛形、ドキュメントURLなど）をすべて外部のJSONファイル (js-api-definitions.jsonやrest-api-definitions.json) に切り出しました。

下記が実際の記述例です。

//sample: rest-api-definitions.jsonの定義の一部
"apis": [
  {
    "name": "GET /k/v1/record.json",
    "displayName": "1件のレコードを取得する",
    "method": "GET",
    "endpoint": "/k/v1/record.json",
    "docUrl": "https://cybozu.dev/ja/kintone/docs/rest-api/records/get-record/",
    "bodyPlaceholder": "{\"app\": 1, \"id\": 100}",
    "args": []
  }
]

//sample: js-api-definitions.jsonの定義の一部
"name": "kintone.api(pathOrUrl, method, params, successCallback, failureCallback)",
"displayName": "kintone REST APIリクエストを送信する",
"docUrl": "https://cybozu.dev/ja/kintone/docs/js-api/api/kintone-rest-api-request/",
"args": [
  {
    "name": "pathOrUrl",
    "type": "string",
    "required": true,
    "description": "kintone APIのパスまたはURL（例: '/k/v1/records.json'）",
    "placeholder": "/k/v1/records.json"
  }
]

AIに「新しいAPIが出たから、このJSONの形式に合わせて追加して」と指示するだけで、ツールの機能を拡張できる設計になっています。

こだわり：開発者の「セキュリティの不安」と「手間」を技術で解消する

機能が動くのは当たり前。kinDevSTでは、プロフェッショナルが安心して使えるツールであるために、機能以外の「非機能要件」や「UX」に徹底的にこだわりました。

安全に認証情報を扱う（自動削除と暗号化）

kintone認定カスタマイズスペシャリストを学習していると「セキュアコーディングガイドライン」は避けて通れません。

通常のバイブコーディングでは、どうしても「機能優先」となってしまい、認証情報の扱いが雑になってしまいます。そこでkinDevSTではセキュアコーディングガイドラインも出来る限り採用しています。

アイドル時の自動削除（オートロック機能）

認証情報をsessionStorageに保存することはセキュリティ上推奨されませんが、ツールの利便性を高めるためには一時的な保存が必要です。

そこでChrome拡張機能の chrome.idle APIやメッセージング監視を利用し、一定時間操作がない場合やブラウザを閉じた際に、メモリ上・フォーム上の認証情報を自動的にクリアする機能を実装しました。

画面ロックを忘れたまま離席をしてしまい、APIキーが漏洩する
一時期の検証で保存したままで後から漏洩して発覚する

といったリスクをシステム側で防止しています。

セキュリティ設計：AES-GCMによる暗号化

認証情報を扱うため、Web Crypto API（標準規格）を利用した crypto-manager.js を実装し、AES-GCMアルゴリズムを用いて暗号化・復号を行う堅牢な設計としています。

「便利なツールだからこそ、セキュリティホールにはしない」という強い意志をコードに込めました。

結果をAIに渡しやすくするための「整形コピー」

私のようなAI活用者は、結果を見て「ふ～ん」だけで終わらず、生成AIに投げることが付き物です。その際に必要なコンテキストを簡単に用意することは重要な機能です。

kinDevSTのコピー機能は地味ながら便利で「API実行 → ボタン一発でコピー → AIにペーストして即デバッグ」という、爆速の開発ループを実現しました。

タブの保存機能（コンテキストの固定）

※現在はベータ機能（実験的機能）として提供しており、一部環境での動作安定化に向けた調整を行っています。

kintone開発あるあるなのが、「APIの仕様を調べるために『cybozu developer network』のタブを開いたら、テスト対象のkintoneアプリのタブがどこかに行ってしまった」という現象です。

開発者ツールは「現在アクティブなタブ」に対して動作しますが、これではドキュメントを読みながらAPIをテストすることができません。

kinDevSTでは、「操作対象のkintoneタブをメモリに固定（ピン留め）する機能」を実装しました。

kintoneアプリのタブで「このタブを操作対象にする」と設定。
別タブでドキュメントやChatGPTを開く。
サイドパネルからkinDevSTを操作すると、裏にある（固定された）kintoneタブに対してAPIが実行される。

この機能により、「ドキュメントを見ながら」「AIと相談しながら」、画面を切り替えずに裏側のkintoneアプリを操作するという、デュアルディスプレイいらずの開発体験が可能になりました。

機能制限(未実現の機能)

User API（ユーザー管理系API）には未対応
ファイルアップロード（multipart/form-data）には未対応

まとめ：エンジニアとしての思考プロセス

kinDevSTは、私が「kintoneカスタマイズスペシャリストの学習をもっと気楽に行いたい」を、Vibe Codingという手法で形にしたツールです。しかし、単なる学習用ツールでは無く、「開発者の思考を止めないためのインターフェース」として設計出来ていると考えています。

このツールが、私がAI駆動開発においても「セキュリティ」と「開発効率」をどのように両立させているかを示す、ポートフォリオの1つになれば幸いです。

今後のロードマップ：kintoneの進化に追随する

kintoneは毎月進化し続けるプラットフォームです。APIも定期的に追加・更新されます。 kinDevSTもその進化に遅れることなく追随していく予定です。

更新サイクル: kintoneの定期メンテナンス（毎月第2日曜日）に合わせて、ドキュメントの更新内容を確認します。
対応目標: ドキュメント更新から約2週間程度を目安に、定義ファイル（JSON）の更新や新機能への対応作業を行う予定です（※あくまで努力目標ですが、Vibe（開発意欲）が高まっている時はもっと早いかもしれません！）。