はじめに
現役の社内SEとして日々効率と品質を追求する中で、Windsurfのクレジットを使い切ってしまい、別の方法でAIと連携して作業を進められないかと模索していました。
そんな中、Mac版ChatGPTアプリとWindsurfの連携により、Chrome拡張機能「MarkXdown」の開発が可能であることを発見しました。
本記事では、具体的な連携手法とそのメリットを、実践的な開発事例として紹介します。
今回作成したChrome拡張機能はGithubで公開しております。興味のある方は使ってみてください。
背景と課題
現状の課題
• ツール利用の制約：Windsurfのクレジットが尽き、既存の自動修正機能が使えなくなった。
• 作業効率の改善：限られたリソースで、手動操作が増えると生産性が低下する可能性がある。
• キャリアの変革：AI技術に対する興味を持ち、実践的なスキル向上を目指しているが、実務との両立が課題。
解決策としてのChatGPT Macアプリとの連携
ChatGPT Macアプリは、ファイルを自動で選択するわけではないものの、修正対象のデータを明示すれば、その指示に従ってファイル編集を実行してくれます。
これにより、少しの手間で効率的な作業が実現でき、今後の副業やキャリアアップにも役立つ可能性があります。
実例：Chrome拡張機能「MarkXdown」の開発
1. アイコン画像の生成とリサイズ
私はシステム開発は好きですが、アイコンなどのようなセンスを問われるようなものはほぼ作れません。なので、GPT-4oに REDMEを入力し画像を生成してもらいました。
以下のREADMEを添付します。
Chrome拡張機能の最適なアイコンの画像を作成してください。
（READMEのテキストを貼り付け）わかりやすいアイコン画像を一発で作ってくれました！
そして、Chrome拡張機能に必要な各アイコンサイズ（16×16、32×32、48×48、128×128）の画像が必要なので、それもプロンプトで支持することで各サイズのアイコン画像を作成してくれます。本当に自分の苦手な領域を補ってくれるので、生成AIは必須です！
このデザインでOKです。
Chrome拡張機能として必要なサイズすべてのサイズで画像を作成ダウンロードできるようにして出力してください2. manifest.json の編集
生成した各サイズのアイコン画像を manifest.json に正しく反映させることで、拡張機能としてのアイコン表示を実現しました。ChatGPT Macアプリを活用して、ファイル修正の指示を自動化することで、手作業のミスを防ぎました。
3. popup.html のスタイル調整
ポップアップ内のテキストボックスの幅が狭かったため、body に明示的な幅を指定することで、テキストエリアが十分な幅で表示されるように修正しました。
自分なりに修正してもなかなかうまくいかず、問題のpopup.htmlを連携したWindsurfで開いた状態で以下の質問をしたら、すぐに解決してくれました。
htmlを修正してみたけど幅がやっぱりかわらないんだけど、なぜですか？ChatGPTの回答は以下です
ありがとうございます、popup.html の内容を確認したところ、以下のような原因が考えられます：
⸻
✅ 原因：Chrome拡張のポップアップの全体の幅が 100px 相当になっている
現在、<textarea> に対して以下のようなスタイルが適用されています：
textarea {
width: 100px;
...
}
この状態では、width: 100% にしても親要素（＝body）が狭いので意味がありません。
⸻
✅ 解決策：<body> にも幅を明示的に指定する
<body> に対して width をしっかり指定することで、textarea も正しく広がるようになります。
⸻
🔧 修正案（実際のコード）
<style>
body {
width: 400px;
margin: 0;
padding: 10px;
}
textarea {
width: 100%;
height: 300px;
padding: 8px;
font-family: monospace;
font-size: 14px;
box-sizing: border-box;
}
button {
margin-top: 10px;
margin-right: 10px;
}
</style>
⸻
このように body の幅を明示することで、textarea の width: 100% が「400px」に基づいて展開されるようになります。
すぐに反映する修正をご希望でしたら、この内容で popup.html を書き換えます！どうしましょうか？すぐに修正をお願いして、しっかり幅が広くなって文句なしのツールに仕上がりました！！
利点と実践的なメリット
1.効率の向上
• 迅速なファイル修正：ファイルを手動で開き、指示を与えるだけで自動編集が行われるため、細かな作業の時間を大幅に削減できます。
• 実践的なAIスキル習得：実際にプロジェクトでAIを活用することで、日々の業務や副業においても応用可能なスキルが身につきます。
2.安定性と柔軟性
• 堅実な運用：従来のツールに頼らず、ChatGPTとWindsurfの連携で新たな手法を確立することで、安心して作業が進められます。
• 細かいカスタマイズが可能：自動化だけでなく、自分の意図に沿った微調整が容易で、業務環境に合わせた最適なツール運用が実現できます。
今後の展望とキャリアへの影響
今回の取り組みは、AIツールを日常の業務や副業開発に取り入れる一例として、非常に実践的な成功事例です。
• キャリアシフトの一歩：AI技術を取り入れることで、従来の業務効率化だけでなく、新たな収入源確立にもつながる可能性があります。
• 更なる自動化の可能性：今回の連携をベースに、今後はより大規模なプロジェクトや自動化ツールの開発への応用も期待できます。
まとめ
忙しい業務の中でも、効率と品質を両立させるためにAIツールを活用する方法は大いにあります。
ChatGPT MacアプリとWindsurfの連携を通じて、Chrome拡張機能「MarkXdown」の開発に成功した事例は、今後のキャリアアップや副業の収入拡大に向けたヒントとなるでしょう。
堅実な現状維持をしながらも、新しい技術にチャレンジする姿勢が、将来の経済的自立への大きな一歩となります。
コメント