どうもこんにちは！
プラットフォームエンジニアリング部門DevSecOpsグループの舛田です。
今期テックブログ 2本目です(運用負荷軽減！Google Groupを活かしたGitHub Teamメンバーの自動同期の仕組み)。
私たちソフトウェアデリバリーチーム（SDチーム）では現在、JenkinsからGitHub Actionsへの移行を全社で推進しています。
移行を進める中で、実際にGitHub Actionsを使い始める開発者の皆さんから、環境取り違えの懸念の声があがりました…
「Jenkinsを使っていた頃は、環境ごとにURLや画面の色が違ったさかい、パッと見でわかって安心やったんやが…」(弊社一応、関西の会社なので関西弁が社内標準です（大嘘）)
GitHub Actionsに移行して早々『あっ、本番環境だった…』みたいな事故はなくしたい。。
「じゃ、AWSのAWS Peacock Management ConsoleやGoogle CloudのGCP console colorizeと同じようにChrome拡張で実現したらええやん！！」となりやってみることにしました。
google cloud
「もう作るしかない…! でも正直CSSとかchrome拡張について調べながら書くの面倒だな…」 そんな本音が胸にいっぱいに、、（苦笑）
しかし、『時は2025年、LLM全盛！』『弊社のテックブログもAIネタでバズったりしている。。。』これは伝家の宝刀『LLM』にお願いするといいのでは！？！？
とのことで、結果として「Cline/Claude sonnet4と1時間クッキング」とでも言うべき早さで、今回ご紹介するChrome拡張が出来上がりました。
で、何が出来上がったの？？
こんな感じでdev, stg, prod環境のワークフローが、一目でわかるようになり、任意の色に変更することができます。
機能紹介
この拡張機能でできることは、主に以下の通りです。
- ワークフロー名に
dev,stg,prodといった代表的な文字列が含まれていると、自動で背景色をハイライトします。 - 設定画面から、検知したい文字列と色を自由にカスタマイズできます。
- このworkflowは危険だからワークフローを決め打ちで色を設定しよう！みたいな使い方も可能です。
- 現状は、社内向けに限定公開しており、Chromeウェブストアからワンクリックでインストールするだけで、面倒な設定なしにすぐに使い始められます。
(AIで生成したiconもなかなかお気に入り。)
Claudeと1時間クッキング！
実際に投げたプロンプトがこちら
どんな”魔法の呪文”を唱えたのか？ 私が実際にClaudeに投げた最初のプロンプトが、これです。
GitHub Actionsのワークフロー一覧ページで、ワークフロー名に基づいて視覚的に区別したい（例：devの場合は青、prodの場合は赤など）です。 カスタムCSSやJavaScriptを使用して、特定のワークフロー名パターンに基づいて背景色を変更する拡張機能を作成してください。 https://github.com/XXXXX/xxxxx/actions/workflows/dev-release.yaml dev-release.yaml の部分を確認してprodが含まれていたら、赤色にする、devだったら青にするみたいな設定をできる拡張機能が欲しいです。
これをClineでclaude-sonnet-4に投げたところ、一発でChrome拡張としてほぼ完璧に動作するコードが返ってきました。
正直、これには「LLMすげー！」という小学生並みの感想しか出てきませんでした（笑）。 驚くべきことに、AIとのやり取りにかかった時間は、わずか15分。
残りの45分は、生成されたコードが意図通りに動くかを確認したり、色を調整したりといった、人間による仕上げの作業でした。
なぜ一瞬でできたのか？（考察）
今回、なぜここまでスムーズに開発できたのか、少し考えてみました。
1. プロンプトが超具体的だった 「〜したい」という曖昧なお願いではなく、「このURLの」「この部分を見て」「こうなったらこうする」という具体的な指示とURL例まで含めてお願いしたのが、LLMの精度を最大限に引き出せた要因だと思います。
2. 要件がシンプルだった やりたかったことが「特定の文字列に応じてCSSを変える」という、LLMが非常に得意とするタスクだったことも、スピード開発に繋がったと考えられます。
コストパフォーマンス
最後に、皆さんが気になるであろう、この開発にかかったコストの話です。
今回利用したモデルは anthropic:claude-4-sonnet-20250514で、この一連の開発（プロンプトのやり取り）にかかったAPI利用料は、
$1.3539 でした。
日本円にして約215円（2025年7月時点）です。
コーヒー1杯分の値段で、開発者のヒヤリハットを未然に防ぎ、安全なデプロイフローをサポートするツールが手に入ったのです。 もしこの拡張機能が、たった一度でも本番環境への誤デプロイを防げたとすれば、僕の人件費を含めたとしても、投資分は回収できると思います！
知見がなければ実装だけで一週間はかかっていたであろう社内ツールの開発が、これほどの低コストかつ短時間で実現できる。この事実は、今後の私たちの働き方やツール開発のあり方を、大きく変える可能性を秘めていると実感しました。
今後の展望
実は、画面遷移時に表示が崩れることがあるなど、細かいバグが残っています。（使えるものにはなりましたが、さすがに完璧なものが1時間でできたわけではないのですね！笑）
今後はまずはバグを修正し、安定性を高めていきます。
その後、社内で多くの皆さんに実際に使ってもらって、日々の業務で役立つツールとして、GitHub Actionsを触る時はとりあえず入れる拡張ぐらいの存在になることを目指して布教していこうと思います。
社内で十分に実績を積めたら、社内で必要な手続きをした上で、社外公開もしていきたいなと考えています。
とはいえ、15分で300円もかからず作成できるので読者の皆さんの自社で作成された方が早いかもしれませんね笑笑
まとめ
今回は、GitHub Actionsの環境取り違えを防ぐChrome拡張を、LLM(Claude)と共に1時間で開発した話をご紹介しました。
社内からの反応も良く、「JenkinsからGitHub Actionsに移行に関わる人には入れること推奨」のものとして社内に浸透してきています。
インストール数としては社内前提公開で50数名にインストールしていただけている状況です。（インストール率は、社内の開発者が大体600人強なので10％弱ぐらいですね。）
最後に、もしLLMが無かった時代にこのツールをゼロから作ろうとしたら…と想像してみます。 まずChrome拡張の基本的な作り方を調査するところから始まり、日々の様々なタスクと並行して開発を進めることを考えると、最低でも1週間はかかっていたはずです。
それが今回、たったの1時間で、しかもコーヒー1杯分（約$1.35）のコストで実現できてしまいました。
これまで「ちょっと面倒だから…」と後回しにされがちだったけれど重要な安全対策や業務カイゼンが、これからは誰でも、驚くほど気軽に、そしてスピーディに実行できる。そんな時代が、もう始まっているのかもしれませんね。
このアイデア（とりあえず、なんでもかんでも環境取り違い防止にはchrome拡張を作って色を変えたらいいのでは！？） が、日々の業務の安心に少しでも繋がれば幸いです。
最後まで読んでいただき、ありがとうございました！
当記事を通じてMonotaROに興味を持っていただいた方は、カジュアル面談もやっていますのでぜひご連絡ください。
チームの採用募集も合わせてご覧ください。
コメント