ウィンドウ渋滞を解消。チャット風UIで直感的に操作できるChromeサイドパネルツール「majina-Sidebar-Utils」

PC作業中、「ちょっとした計算」や「一時的なメモ」のために電卓やメモ帳を起動し、気づけば画面がウィンドウで溢れかえっている……そんな「ウィンドウ渋滞」に悩まされていませんか？

あなた

何のメモか忘れたメモ帳を保存せずに閉じたけど、重要な顧客への連絡先だった…。

あなた

オンライン会議で画面共有中、カレンダーが隠れていて即座に日程確認ができない

こうした日常のPC操作に潜む小さなストレスを根絶するため、ブラウザのサイドパネル（デッドスペース）を活用し、あらゆるユーティリティを1箇所に集約させたChrome拡張機能「majina-Sidebar-Utils」を開発しました。

この記事では、生成AIと対話しながら高速に実装する手法「Vibe Coding」を用いて自作したChrome拡張機能「majina-Sidebar-Utils」の開発背景や設計思想について解説します。

森田ユウゴ

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

「面倒くさい！」を原動力に、kintoneカスタマイズやChrome拡張機能開発などを通して、日常や業務の課題をテクノロジーで解決することに注力しています。

• 2025年12月 kintone認定 アプリデザインスペシャリスト取得
• 2026年01月 kintone認定 カスタマイズスペシャリスト取得

ココナラやクラウドワークスなどでご相談いただけます！
下記のお問い合わせフォームからお気軽にご相談ください▼

森田ユウゴへお問い合わせ(Google Formに移動します)

コア体験：すべてを1画面で完結させる「チャット風UI」

本ツールの最大の設計上のこだわりは、複数のアプリを切り替えるのではなく、1つのタイムライン上でコマンドを実行していく「チャット風UI」です。

投稿された「ブロック」はダブルクリックで再編集でき、右側の「ゴミ箱」アイコンから個別に削除することも可能です。

このチャット風UIをベースに下記の3つの特徴を持っています。

1.直感的なメモ機能

入力欄にテキストを打ち込んで送信するだけで、そのままタイムラインにメモとして残ります。ちょっとした備忘録や、コピー＆ペーストの一次置き場として機能します。

チャットに投稿された「ブロック」はダブルクリックでも編集が可能です。画面右側の「ゴミ箱」アイコンをクリックすることで削除することもできます。

2.スラッシュコマンドによる機能呼び出し

チャットツールのように「/（スラッシュ）」を入力することで、電卓やカレンダーなどの各機能モジュールを呼び出せます。目的の機能をシームレスに起動できるため、思考を中断させません。

例えば入力欄に「/」と打ち込むと、利用可能なコマンドがサジェストされます。「/c」と入力すればclockやcalculatorが候補として挙がり、「/cl」まで入力すると「時計」に絞り込まれます。

ターミナルのように「Tab」キーで入力を補完・確定し、送信するとタイムライン上に時計ブロックが展開される仕組みです。

そして投稿をすると次の画像のように「時計」が表示される仕組みです。

3.柔軟なログ管理

不要になった計算結果やメモは、チャットの吹き出しを消す感覚で個別に削除可能です。画面上を常に整理された状態に保つことができます。

チャットをまとめる「タブ機能」も用意しています。

下記の画像の通り名称変更も可能です。

業務や打ち合わせ単位でタブを作成・削除するなど、状況に合わせた柔軟な運用が可能です。

業務を加速させる3つの主要コマンド

2026年3月現在、「/（スラッシュ）」から呼び出せるコマンドは以下の10種類です。

1. /clock: 時計を表示
2. /calculator: 電卓を表示
3. /color: カラーピッカーを表示
4. /todo: タスク管理リストを表示
5. /timer: タイマーを表示
6. /note: 簡易メモ帳（リッチテキストエディタ）
7. /stopwatch: ストップウォッチを表示
8. /text: テキストブロックを作成
9. /link:お気に入りリンクを追加
10. /image: 画像ファイルを追加

チャット風UI上で活躍する、現場の課題解決から生まれた3つの実用的なコマンドをピックアップして紹介します。

1. 履歴が残って比較ができる電卓（/calc）

Windows標準電卓の最大の弱点である「ウィンドウを閉じると履歴が消える」問題を解消しました。
チャットのタイムライン上に計算式と結果が残るため、直前の数字を見返したり、複数の見積もりパターンの計算結果を比較したりする際に非常に便利です。

操作は直感的で、画面上のボタンまたはキーボードから直接数式を入力できます。

下記は/calcで「1+3」まで入力した状態です。

Enterキーで結果を確定させると、チャットの吹き出しのような形式でタイムラインに計算ログが蓄積されていきます。

森田ユウゴ

ブラウジング中、画面上の数値やデータを元に「ちょっと計算したい」と感じる場面は非常に多く、現場のニーズに最も直結する機能です。

2.画面共有時にサッと出せるカレンダー（/calendar）

オンラインミーティングで「次の打ち合わせ、いつにしますか？」と聞かれた際、別アプリを立ち上げる必要はありません。

ブラウザの画面共有をしたままサイドパネルでカレンダーを呼び出せるため、相手を待たせることなくスムーズな日程調整が可能です。

森田ユウゴ

小さな悩みですが、Windowsのサブディスプレイの画面全体をZoomなどで共有している時、カレンダーが表示されないんですよね…。

3.会議の空気を壊さずタイムマネジメントするタイマー（/timer）

上司やお客様とのミーティング中、「残り〇分です」とは口に出して言いづらい場面があります。

このコマンドを使えば、共有しているブラウザの端で静かにタイマーを起動できるため、参加者全員に角を立てることなく自然にタイムマネジメントを意識させることができます。

バックグラウンドで動作するため、ブラウザが非アクティブの状態でもOSの通知ポップアップで終了に気づくことができます。

その他機能

本ツールはAI駆動開発で、モジュールベースで動作をするため「思いついた機能」を簡単に実装できています。

カラーピッカー機能

カラーコードを取得するために専用のChrome拡張機能を入れる…。ということに抵抗がある私です。一方で何かフリーソフトを使うのも枠を無駄に使っている気がします。そこでスラッシュコマンドに追加しました。

ストップウォッチ機能

ページごとの読み込み速度は開発者ツールでも確認可能ですが、「運用手順の測定」など人の手を介する部分の測定などにも役立ちます。

画像保存機能はチャットに直接コピペも可能

/imageで次のようにファイルを選択することが可能です。

画像をドラッグアンドドロップしたり、チャットに張り付けることで画像を表示することも可能です。

開発アプローチ：AIによる「バイブコーディング」とディレクション

本ツールのコーディングは、すべて生成AIを用いた「バイブコーディング」で実装しています。

しかし、AIに「Chrome拡張機能を作って」と丸投げしたわけではありません。ここで重視したのは、人間が手作業でコードを1行ずつ書くことではなく、AIが拡張しやすいアーキテクチャを設計し、プロジェクトを正しい方向へ導く「ディレクション（プロダクトマネジメント）」の役割です。

AIを「単なるコード生成機」で終わらせない、プロのディレクション力

本ツールの開発には、生成AIを活用した「Vibe Coding」を採用しています。しかし、AIに要件を丸投げしたわけではありません。

AIの出力スピードは圧倒的ですが、時にテストの妥当性を欠く表面的なコードを出力することもあります。システムを破綻させず、保守性の高いプロダクトを作るためには「エンジニアによる適切な介入とディレクション」が不可欠です。

私はインフラSEとしての10年間の知見を活かし、ソースコードの構造を正確に読み解き、「どのファイルの、どの処理に、どのような検証が必要か」を的確にAIへ指示することで、開発スピードとエンタープライズ品質の安全性を両立させています。

拡張性を担保するモジュール分離設計

AIを活用した開発において、1つのファイルが肥大化するとAIが全体のコンテキストを失いやすくなり、バグの温床になります。
そのため、システム全体の安定性を保ちながら継続的に機能を追加できるよう、コードベースのモジュール設計には特にこだわりました。

[画像：js/commands/ フォルダ内に、各コマンドのJSファイルが綺麗に分離されているエディタ画面のスクショ]

majina-Sidebar-Utils
├─ css
├─ icons
├─ js
│  ├─ commands
│  │  ├─ calculatorCommand.js
│  │  ├─ calendarCommand.js
│  │  ├─ clockCommand.js
│  │  ├─ colorCommand.js
│  │  ├─ imageCommand.js
│  │  ├─ linkCommand.js
│  │  ├─ noteCommand.js
│  │  ├─ stopwatchCommand.js
│  │  ├─ textCommand.js
│  │  ├─ timerCommand.js
│  │  └─ todoCommand.js
│  └─ utils
├─ node_modules
├─ test
├─ .gitignore
├─ manifest.json
├─ options.html
├─ package-lock.json
├─ package.json
├─ README.md
├─ sidepanel.html
└─ vitest.config.js

各コマンドの機能（calc, calendar, timerなど）は、完全に独立したファイルとして js/commands/ ディレクトリ配下に分離しています。

これにより、新しいコマンドを追加する際も、コアとなるサイドパネルの描画処理や履歴管理システムに影響を与えることなく、アドオン感覚で安全かつスピーディに実装できる構造を実現しました。

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

「majina-Sidebar-Utils」は、日常のPC作業における「ウィンドウ渋滞」という小さな課題を発見し、AIを駆使して最速で解決策を形にするという、課題解決型アプローチの原点となるプロジェクトです。

特定のツールや言語に縛られるのではなく、「目の前の課題に対してAIを使って最適な解決策を提示する」というプロセスそのものが、現在の私のエンジニアリングの土台となっています。

AIを単なるコードジェネレーターとしてではなく、共にシステムを組み上げるパートナーとして扱い、的確なディレクションで品質を担保する。この開発で得た知見は、後のより高度なシステム開発へと直結していきました。

kintone特化型拡張機能「kinDevST」への繋がり

このサイドパネルを活用した拡張機能開発のノウハウと、トラブル時にソースを読み込んでAIをディレクションする技術を最大限に活かし、kintoneエンジニアの生産性を劇的に向上させるために開発したのが、kintone API実行ツール「kinDevST」です。

画面遷移ゼロでkintone APIを実行し、日々の開発の分断を防ぐ「kinDevST」の詳細は、以下の記事で解説しています。私がAI駆動開発において「開発効率」と「セキュリティ」をどのように両立させているかを示す別の事例として、ぜひこちらも併せてご覧ください。

あわせて読みたい

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

今後のロードマップ：オープンソース化

現在は自身の課題解決ツールとしてローカルで稼働させていますが、今後はChromeウェブストアでの公開や、GitHubでのソースコード公開を検討中です。

本ツールはコマンドごとにモジュールを完全に分離した設計になっているため、他のユーザーや開発者が「自分にとって便利な新しいコマンド」をアドオン感覚で自由に追加することが可能と考えています。

単なる個人用ツールに留まらず、誰もが自分の業務に合わせたコマンドを拡張していけるようなエコシステムの構築を目指しています。

あなた

自社の社内システムと連携するサイドパネルツールが欲しい

あなた

kintoneの操作を補助する専用の拡張機能を開発してほしい

あなた

エンジニアじゃないのですが、生成AIを活用した業務改善（Vibe Coding）の相談に乗ってほしい

このようなお悩み・ご要望がありましたら、SIer出身の「面倒解決エンジニア」森田ユウゴが伴走支援いたします。時差1時間の台湾から、フルリモートで「日本品質のきめ細やかなサポート」をご提供します。

まずは「こんなことできる？」といった軽いご相談からで構いません。お気軽にお問い合わせください！

森田ユウゴ

ここまでご覧いただきありがとうございました！

各種お仕事のご依頼や、案件のご相談は下記をご覧ください！

森田ユウゴのポートフォリオ / Morita Yugo’s Portfolio

お問い合わせ

森田ユウゴ(Yugo Morita)

面倒解決エンジニア

X

専門学校卒業後、新卒で大手ITベンダーに入社して約10年勤務、フルタイムで働きながら通信制大学を卒業。その後1年XR/メタバース関連企業で挑戦後、現在は台湾のIT企業でプリセールスエンジニア(產品專員)として勤務。kintone認定 アプリデザインスペシャリスト(2025), kintone認定 カスタマイズスペシャリスト(2026)を保持し、kintone開発に携わっています。プロダクトの価値を伸ばすカスタマイズの提案と実装が得意領域。AnkiカスタマイズやChromeアドオン開発にも熱中しています。尽きない好奇心とインフラ経験、AIであなたの「不便」を解決へ導きます。