プログラミング経験ゼロの非エンジニアがAI-StarterでChrome拡張機能を作ってみた

のんべぇ
2024.11.19
 はじめにオペレーション部カスタマーサポート部所属の「のんべぇ」です。

今回は非エンジニアの私がAI-Starterを使って業務で使えるChrome拡張機能を作ったお話をします。

非エンジニアでも生成AIを使えば拡張機能を作れる、ということを知ってもらえたら嬉しいです。
～私の簡単なプロフィール～
2024年4月入社
前職はサブカル系IT企業のカスタマーサポート部所属
ChatGPTを含めて生成AIはほぼ使ったことなし
2匹の愛猫のために働いている
 AI-StarterとはAI-Starterとは、クラスメソッド株式会社が提供する生成AI環境構築サービスです。つまり自社のサービスです。

https://classmethod.jp/services/generative-ai/ai-starter/

クラスメソッドでは日常的に生成AIが利用されていて、生成AIをほぼ使ったことのない私はこのツールをどう活用すればよいか全くわかりませんでした。
では、AI-Starterを使ってChrome拡張機能をなぜ作ろうかと思ったのか、それは業務効率化のツールを作成してくれた社員から「生成AIを使って作った」という一言を聞いたからでした。

その方は色々なツールを作って業務効率化を実施していて、ゼロから作っているものと思っていたので個人的にすごく衝撃を受けました。
非エンジニアの自分でも生成AIを使えば業務効率化ツールが作れるのでは？と思ったのが、AI-StarterでChrome拡張機能を作ってみようと思ったきっかけでした。
 作りたい拡張機能の決定正直なところ、作れるかどうかもわからなかったので、作業コストや作れなかったときの自分の心理的ダメージ(笑)を考えて、初めて作るなら1つの機能に絞ったシンプルなものが良いだろうと思いました。

そこで、前々から地味に面倒くさくてどうにかならないだろうかと思っていた「JIRAの要約とURLを同時にコピーする」拡張機能を作ることに決めました。
私の所属するチームではJIRAというプロジェクト管理ツールを利用していて、以下の画像の赤枠のJIRAの要約やURLをslackなどに貼る機会が頻繁に発生します。
これが地味に面倒くさい
要約だけ、URLだけならそれほど面倒くささは感じませんが、要約とURLとなると手間に感じてしまいます。

以前から一回で要約とURLが同時にコピペできないかな～と思っていたので、まずはこの拡張機能を作ってみることにしました。
 AI-Starterを使ってみるそれではさっそくAI-Starterにプロンプト（指示・命令文）を書いてみましょう。

はい、ここでさっそく非エンジニアはつまづきます。

頭をひねりながら、私が実際にひねり出した最初のプロンプトは
「JIRAの要約とURLだけを抽出してクリップボードにコピーできる拡張機能はどうやれば作れますか？」
でした。
ところがどうでしょう。AI-Starterはたったこれだけでも拡張機能に必要なファイルやそのコードを一発で作成してくれるではありませんか！

実際にAI-Starterから返ってきた結果は以下のとおりです。
JIRAの要約とURLを抽出してクリップボードにコピーする拡張機能を作成するには、以下の手順とポイントを考慮する必要があります。
拡張機能の基本構造:
manifest.json: 拡張機能の設定ファイル
background.js: バックグラウンドスクリプト
content.js: JIRAページで動作するコンテンツスクリプト
popup.html/js: (オプション) ユーザーインターフェース用

主要な機能実装:

a. JIRAページの検出

b. 要約とURLの抽出

c. クリップボードへのコピー

セキュリティ考慮事項:
必要最小限の権限要求
ユーザーデータの適切な処理

パフォーマンス最適化:
非同期処理の活用
不要なDOM操作の最小化

コードの保守性:
モジュール化
適切なコメントとドキュメンテーション

具体的な実装例:
manifest.json
{
  "manifest_version": 2,
  "name": "JIRA Summary Copier",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "clipboardWrite",
    "*://*.atlassian.net/*"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["*://*.atlassian.net/*"],
      "js": ["content.js"]
    }
  ],
  "browser_action": {
    "default_title": "Copy JIRA Summary"
  }
}
background.js
chrome.browserAction.onClicked.addListener((tab) => {
  chrome.tabs.sendMessage(tab.id, {action: "copySummary"});
});
content.js
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "copySummary") {
    const summary = document.querySelector('#summary-val').textContent.trim();
    const url = window.location.href;
    const copyText = `${summary}\n${url}`;

    navigator.clipboard.writeText(copyText).then(() => {
      console.log('Summary and URL copied to clipboard');
    }).catch(err => {
      console.error('Failed to copy: ', err);
    });
  }
});
この実装では、以下の点に注意しています：
セキュリティ: 必要最小限の権限のみを要求し、特定のJIRAドメインに限定しています。
パフォーマンス: クリップボードの操作に非同期APIを使用しています。
保守性: 機能ごとにファイルを分離し、簡潔で理解しやすいコードを心がけています。
追加の改善点：
エラーハンドリング: ユーザーへのフィードバック機能を追加する。
設定オプション: コピーする内容をカスタマイズできるようにする。
多言語対応: 国際化（i18n）を実装する。
この拡張機能をさらに発展させたい場合や、特定の要件がある場合は、お知らせください。また、特定のJIRAインスタンスや使用環境に関する追加情報があれば、より具体的なアドバイスが可能です。
ちなみにこの結果を見た私は、
「なるほど、なるほど、たぶん提示されたコードを使って作るんだな？

......で、どうやって作るの？」
となりました。流石非エンジニアです。
ですが、続けて「これはどうやって作ればいいですか？」や「このツールで作る場合はどうすればいいですか？」と聞けば自分の利用環境に合わせて作成方法を提示してくれました。
 作ってみたChrome拡張機能の動作検証なんとかAI-Starterの提示したファイルを作成して、拡張機能のフォルダを作成するところまでこぎつけました。

デベロッパーモードでChromeブラウザにさっそく拡張機能を入れて動作検証をしてみます。が、エラーが表示されました。
しかし、そこで諦めてはいけません。
表示されたエラーをAI-Starterに投げます。すると、そのエラーに合わせたコードに修正してくれます。

最終的にエラーが表示されなくなり、ついにJIRAの要約とURLを同時にコピーする拡張機能を作成することができました！
 振り返りと感想作成した拡張機能はセキュリティ面などに問題がないかなどエンジニアリングの知識のある社員に確認してOKをもらい、社内だけで利用することを条件に最終的にチームメンバーも利用できるように配布することになりました。
要約とURLを同時にコピーする単純な機能で、他の人は要らない機能かもしれないと思っていましたが、思いのほか「こういう機能が欲しかった！」というお声をいただくことができてとても嬉しかったです。プログラミングの楽しさを感じることができました。
また、その場ですぐに「この画面で要約とURLがコピーできない」という意見をいただき、作成したファイルをAI-Starterに添付し、「この画面で要約とURLがコピーしたいので修正してください」とプロンプトを書くと、すぐにコードが作成されて、当日中に修正することができました。
 まとめゼロからものを生み出すことができない非エンジニアの私が拡張機能を作り、それを業務で使えるツールにできたことは私の中ではかなり有意義な体験となりました。

不便を感じても、エンジニアに依頼するまでもないなと諦めていたことが自分でできるようになることで、エンジニアの作業コストをかけることなく、実際に業務を行う目線で欲しかった機能を手に入れることができます。
今回さらりとできました！と記載しておりますが、実際には何度も失敗してようやく形にすることができました。ですが、つまずいた時に生成AIにそのつまづいたことをプロンプトとして書けば何かしら答えをくれます。

もし失敗したとしても、誰かに迷惑をかけるわけではありません。なのでどんどん失敗して、非エンジニアこそ少しずつ生成AIの使い方を学んで業務効率化を目指しましょう！