Chat GPT o1-Previewで初めてのChrome拡張機能開発

はじめに

アソビューでバックエンドエンジニアをしている長友です。
皆様、ChatGPTを開発に活用しているでしょうか！そしてChromeの拡張機能は作ったことあるでしょうか！

今回はChromeの拡張機能開発未経験の私が、ChatGPT o1-previewと共にアジェンダ準拠のGoogle Meetのタイムキーパー機能を開発し、チーム課題の解決にチャレンジした話をシェアしたいと思います。

目的と課題背景

きっかけはチームのスプリントレトロスペクティブで「会議がオーバーしがち」という課題が出たことでした。

これは終了時間のみ意識すれば個人で解決できたり、既存の拡張機能でタイムキープは容易ですが、次のような課題が残ります。

  • 人力のタイムキープは意識が薄れやすく、根本的な解決にならない
  • 既存の拡張機能では会議ごとに時間設定が必要で手間がかかる
  • 複数のアジェンダがある会議では、各アジェンダのタイムキープが人力になる
    • 既存の拡張機能やアドオンではそこまでカバーされているものは無さげ

そこでアジェンダごとにタイムキープできるソリューションをChatGPTに相談しました。

最初の質問

すると以下の回答が返ってきました。

  • Googleスライドのタイマーを利用する方法
  • 既存のChrome拡張機能を利用する方法
  • MiroやAsanaとMeetの連携
  • Google Apps ScriptとGoogleカレンダーを組み合わせてタイマーを表示する
  • タイムキーパー専用アプリの使用

こちらの回答を組み合わせて、Googleカレンダーのアジェンダを読み込み、会議とアジェンダごとの時間を管理する拡張機能を作ることにしました。

スタートから完了まで、ほぼ全て対話で解決

基礎知識のインプットまでChatGPTが行ってくれる

作りたいものが決まったとはいえ、拡張機能については右も左も分かりません。
推論能力の向上やコーディング精度も上がったと噂されるo1-previewがどこまでやってくれるのかも期待しつつ対話形式で開発を進めてみることにしました。

早速お願いしてみると...

拡張機能を作りたいとオーダー

怒涛の勢いで解説を始めるo1-preview

怒涛の勢いで解説を始めるo1-previewその2

最初に「全体の流れ」を提示しつつ各ステップを猛烈な勢いで解説し始めました。(この間数秒)
特に指示もなくステップバイステップ指向で解説を始めるところがo1-previewの特徴らしく、同じようにChatGPT-4oのモデルに雑にお願いすると解説不足な返答 & 全く動かないコードを返してくるのでo1-previewの凄さを感じます。

ChatGPTの解説通り、今回の拡張機能を開発するためには以下のステップが必要となります。

  1. Google Calendar APIの設定

    1. Google Cloud Platformでプロジェクトを作成
    2. Google Calendar APIを有効化
    3. OAuth 2.0クライアントIDを取得
    4. 許可されたリダイレクトURIを設定

  2. Chrome拡張機能の開発

    1. manifest.json: 拡張機能の設定ファイル
    2. manifestで指定されたbackground, content_script, popupなどに対応したファイル群

  3. 拡張機能のテストとデプロイ

    1. デベロッパーモードをオンにし、「パッケージ化されていない拡張機能を読み込む」をクリックするとコード修正後すぐに反映できてテストが大変楽

ChatGPT付きでもハマったポイント

ChatGPTが示してくれたステップ通りGoogle Calendar APIを呼び出すための設定をGoogle Cloud Platformで行おうとすると早速つまづきました。

ChatGPTの示したStep1

1と2までは手順通りですが、3のOAuth 2.0クライアントIDを取得する際の手順が実際の画面と異なります。
具体的にはChatGPTは「アプリケーションの種類」で「Chromeアプリ」を選択、と指示していますが、実際にはそんな選択肢はありません。

実際のクライアントID作成時の選択肢

とりあえず「Chrome拡張機能」だろうか？と選択すると、次は「アイテムID」(Chrome 拡張機能の Chrome ウェブストア URL の最後の部分)の入力欄が出てきます。
これはChatGPTの言う「許可されたリダイレクトURIを設定」のことだろうか？後で良いらしいから一旦適当な値を入れよう...
そのように設定して払い出されたクライアントIDを元に実際に拡張機能をブラウザで動かすところまで行くとエラーで全く動きません。

そして何度かデバッグし問題箇所がAPI呼び出し分にあると確認し、そうしてようやくこのOAuth 2.0クライアントの設定に問題があると気づきました。
そこで調べてみると以下のことが分かりました。

  • Google APIは OAuth 2認証が必要な場合は拡張機能の公開に関わらずChrome Developer Dashboardへの登録が必要なこと
  • OAuth 2.0クライアントID作成時に求められたアイテムIDとはChrome Developer Dashboardにおいて自分の拡張機能を登録した際に払い出されるIDのこと

ChatGPT君、ステップ1の前にやることがあるじゃないか...そう思いつつChrome Developer Dashboardへの登録を済ませ、改めてクライアントIDを払い出し無事APIへの疎通ができました。

これらを通じて非常に優秀なo1-previewであっても、以下2点は注意しながらChatGPTの情報を補助的に利用する必要があると再認識しました。

  1. 設定画面操作を誘導をさせるとChatGPTで保持している情報次第では古くなっていたりして実際の画面と異なることがあること
  2. あらかじめこちらの知識がどの程度かを提示しておかないと特に設定値周りではマストで必要な知識であっても十分な説明がされないことがあること

詳細仕様を対話し実装してもらう

設定周りが無事に終わり拡張機能が問題なく動かせる状態となりましたが、自分のローカルにペーストしたChatGPTのコードを見ると、ところどころ処理が空振りであったり、仮置きになっていることに気づきます。

詳細仕様が決まっていないため仮置きで提示されたコード

どうやらおおよそのアウトラインを作ったから詳細は今から詰めたいようです。
ここからは以下のステップで拡張機能の完成度を高めていきました。

① ChatGPTにアイデアを相談（必要ならアイデア提案を依頼）
↓
② ChatGPTがアイデアを形にしてコードを提示
↓
③ ローカル環境で動作確認
↓
④フィードバック
↓
⑤ ChatGPTがコードを修正・改善
↓
以上を繰り返し

o1-previewはこれまで自分が出力したコードを全て覚えており、数会話前のコードについて修正を求めても問題なく出力してくれる他、ファイル横断で修正箇所を提示することも全体像を改めて出してくれることも容易です。そして提示してくるコードが毎回問題なく動作します。
まるで自分がPdMとなり非常に優秀なエンジニアと高速で機能拡張している感覚で短時間で作り込むことができました。

最終成果物

最終成果物のイメージは以下となります。

Googleカレンダーの説明欄に記載するアジェンダ

拡張機能のUI

提供機能

  • 自動アジェンダタイムキープ
    • Googleカレンダーの説明欄に「 - 〇〇分」といったフォーマットでアジェンダを記載すると、それを読み取り自動でアジェンダテーブルをMeet画面に表示
  • 早く終わったアジェンダをクローズする機能
    • 終了したアジェンダの残り時間を次のアジェンダに引き継ぐ
  • Meet自体の終了時刻を告げるタイマー
    • 説明欄にアジェンダの記載がなくてもMeetタイマーとして機能
  • アラートの音量調整・ミュート機能
  • 即席タイマー
    • その場で分数を入力すると別ウィンドウでタイマーが起動

利用イメージ

利用イメージをシーケンス図にすると以下になります。

拡張機能のシーケンス図

この拡張機能の導入によりアジェンダがきっちり決まっている会議であれば自動タイムキープの力は十分に発揮され、アジェンダが特に無い会議であっても終わり時間を知らせてくれたり、常時残り時間を出してくれるためこれまでより会議時間を意識したり、その意識をせずともタイムキープできるようになりました。

今後は会議中のアジェンダの時間変更を全員で共有するといったより実践的なユースケースに応えたり、生のJavaScriptとHTML・CSSでの開発からReact×TypeScriptでの開発に切り替えてUIのリッチ化を進め、保守性の向上と開発速度の向上を図りたいと思いました。

おわりに

ChatGPTと作るGoogle Meetタイムキープ拡張機能の事例は如何だったでしょうか？

今回利用したChatGPT o1-previewはまだ利用制約が強いですが、文脈把握力やコード精度は非常に高く、この機能開発において設定値以外のコードは何一つ自分で書かずに完成してしまいました。 反面、設定値や土台に関するところは依然として自力でキャッチアップする必要があったり、当然ですが出力されたコードの正当性のジャッジなどはしっかり人間で行う必要があるなど事例を通してAIとの付き合い方を改めて考えさせられました。

また今回は拡張機能を作成しましたが、拡張機能は非公開であればローカルでのコード修正がすぐに反映されます。そのプロセスを超高速化してくれるAIとの相性は非常に良く、更に”反映=即実践レベルで自分への価値提供”という点が非常に魅力的だと思いました。

「AIととりあえず何か作ってみたい」という方はそのファーストステップとして拡張機能開発を選んでみては如何でしょうか？

アソビューではより良いプロダクトを素早く世の中に届けられるよう、AIも活用しつつ挑戦を続けています。 我々と一緒に働くエンジニアも募集していますので、興味のある方はぜひお気軽にエントリーください！

www.asoview.co.jp