ファンリピート社のブログFR note

GPT-4(ChatGPT)を駆使してプログラミング!Chrome拡張機能の開発に挑戦

「GPT-4(ChatGPT)を駆使してChrome拡張機能を開発:スクリーンショットを自動保存」という記事のアイキャッチ画像

お世話になっております。ファンリピート代表の竹村です。

当社では、ITコンサルティングの事業を行っておりまして、技術調査や勉強の背景から、今回、AI(GPT-4)を活用した生産性の向上について調査しました。

結論として、システム開発のためのプログラミングの工程は、かなり生産性が上がっていくと感じます。現状でも、PoCなどに使うシステムをコンサルタント1名xGPT-4を駆使したSE1〜2名といった少数精鋭の座組でプロジェクトを推進していくことも可能なのではないかと感じました。

GPT-4(ChatGPT)との一連のやり取りをもとにまとめましたので、ぜひ一度読んでみてください。

完成したアプリのスクリーン録画:

目次

\ 年末までに限った無料特典 /
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着2社限定】デモアプリ構築・無料依頼フォーム

【当社では、こんなデモアプリがすぐに作れます】

  • 貴社で「まずつくってみたい」試作品アプリの構築を毎月先着2社限定で無料で承っております
  • 社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
  • ご興味のある方は下記のフォームよりお申し込みください

GPT-4(ChatGPT)でのプログラミング:概要

  • ブラウザのスクリーンショットを撮影して共有することが業務でよく発生する、それにあたってChromeの拡張機能を使うことが多い
  • GPT-4(ChatGPT)を活用して、「Googleドライブにスクリーンショットを自動保存」するChrome拡張機能の開発に挑戦してみる
  • 前提として、筆者はNode.jsやJavascriptなどの知見はあるが、Chrome拡張機能の開発経験は一切ない
  • 2〜3人日(16〜24時間)ほどかかる見積もりを立てたので、10倍の生産性を目標値に設定し、約2時間程度の工数を目標に進める

GPT-4(ChatGPT)でのプログラミング:実践

まず、下記のとおりプロンプトを投げてみる。

スクリーンショットを撮影して保存し、Web公開できるChrome拡張機能のソースコードを書いてください。

ChatGPT(GPT-4)のスクリーンショット1

こちらのプロンプトへの出力により、Chrome拡張機能を動かすためのファイル構成がなんとなくイメージできた。

ChatGPT(GPT-4)のスクリーンショット2

Web公開が難しいとのことだったので、GoogleDriveに変えてみる。

Web 公開はGoogleDriveへのアップロードと公開で考えてみてください。

ChatGPT(GPT-4)のスクリーンショット3

Google API と連携して機能実装となるようで、そちらについても把握できた。

全体像を改めて説明してほしかったので、下記のようにプロンプトを入力する。

それぞれをファイルにまとめて整理して、Chrome拡張機能にアップロードするためのディレクトリ構成を教えてください。

ChatGPT(GPT-4)のスクリーンショット4

なるほど、拡張機能をChromeで動かすために必要な要素がよく理解できた。

改めてソースコードを揃えたかったので、下記のようにプロンプトを入力する。

それぞれのファイルのソースコードを改めて教えてください。

ChatGPT(GPT-4)のスクリーンショット5

これでAIが生成したコードをローカルの環境に構築できた。

Chrome上での拡張機能のインストール(ローカルでの動作)方法については、Googleで検索した記事を見て対応して、実際に動かしてみた。

実際に拡張機能のアイコンは表示させることができたが、うまく動作しない。こちらも原因を聞いてみる。

実際にChromeにインストールして「Capture Screenshot」を押しても何も動かないです。直してください。

ChatGPT(GPT-4)のスクリーンショット6

上記を反映しても修正がされなかったので、下記の通り聞いてみる。

Google Driveにアップロードされません。なぜですか?

ChatGPT(GPT-4)のスクリーンショット7

ここから、5〜6ラリーほど修正依頼を投げたが同じようなプロンプトのため省略。

その後、Chromeの検証環境にてGoogle認証関連のエラーが表示されるようになったため、そちらのエラーメッセージと共に修正依頼をプロンプトで投げていく。

OAuth2 request failed: Service responded with error: ‘bad client id: と出てきます。

ChatGPT(GPT-4)のスクリーンショット8

Google Drive APIが必要とのことだったので、手順を聞くプロンプトを投げてみる。

Google Drive APIを有効化する手順を教えてください。

ChatGPT(GPT-4)のスクリーンショット9

Google認証に関連するエラーが出なくなり、代わりに他のエラーが出てきたので、こちらを解決するためのプロンプトを投げていく。

「Error handling response: TypeError: Cannot read properties of undefined (reading ‘success’)」と「Unchecked runtime.lastError: The message port closed before a response was received.」のエラーが出ます。

ChatGPT(GPT-4)のスクリーンショット10

これまでおよそ20〜25ラリーほどして修正を行ってきて、ようやく期待通りの動作をするようになった。

完成したアプリのスクリーン録画:

ここまでおおよそ1時間程度で構築ができた。

あとは微調整として、ファイル名がすべて同じになっていたので、日時を入れて区別しやすくしたり。

google driveに保存されるファイル名に日時や秒数の数値を入れて重複しないようにしてください。

ChatGPT(GPT-4)のスクリーンショット11

デフォルトではルートフォルダ(マイドライブ)に入ってしまっていたので、特定のフォルダを作成して保存させるようにしたり。

ありがとうございます。動きました。GoogleDriveのフォルダをマイドライブではなく、適当なフォルダを作成してそちらに保存するようにできますか?

ChatGPT(GPT-4)のスクリーンショット12

ありがとうございます。動きました。毎回同じ名前のフォルダが生成されてしまうので、一度つくったフォルダがあればそちらに保存するようにできますか?

ChatGPT(GPT-4)のスクリーンショット13

こうやって初めてのChrome拡張機能の開発を終えた。

Google Driveのスクリーンショット

ここまでかかった時間は約2時間程度で、当初の目標を達成できた。

プロンプトの生成に習熟したら、同じような新しい領域でも更に速く進めることができそうだと感じる。

GPT-4(ChatGPT)でのプログラミング:まとめ

  • 当初の目標である、見積の2〜3人日から実績で2時間程度へと、稼働工数を短縮できた
  • プログラミング、新しい実装への理解速度が大きく上がった。こういう風に実装するのか、こういう構成でディレクトリをつくるのか。といったことが瞬時に確認できるため、非常に生産性が高まった
  • プログラミングが将来不要になるというよりも、一人あたりの生産性が高いエンジニアが増えて、IT化がさらに進んでいくのではないかと感じる。
  • 当社でもGPT-4を活用した自社プロダクト、クライアントへのインテグレーションの支援を行っている最中で、今回の調査でどのようにGPT-4(ChatGPT)を、事業や業務に組み込んでいくかのイメージができた。

当社では、ノーコード/ローコードを活用したシステム開発プロジェクトの支援を行っております。

上記のツールに限らず、お客様のニーズに合わせて、最先端の技術を駆使してコスト削減やパフォーマンスの向上を徹底して行っております。

そのため、今後もGPT-4を活用した事業/業務改善の企画・提案を積極的に行って参ります。

ITコンサルタント・プロジェクトマネージャー、システムエンジニアと採用を随時進めておりますので、最先端技術を活用してビジネスの現場で成果を上げたい方はぜひ、当社の採用担当までご連絡ください。

メンバーを募集中!

当社ではお客様に向き合い、お客様の事業成功にコミットをできる仲間を募集しています。

正社員、インターンから副業まで、幅広く採用活動を進めております。プロジェクトマネージャーやシステムエンジニアとして当社のシステム開発業務に携わってみませんか?

当社と共に、業界トップを目指して挑戦したい方は未経験者から経験者まで広く募集しているので、ぜひエントリーをお待ちしています。

\ システム開発にお悩みの方へ /
貴社のシステム開発・アプリ開発を爆速で進めるための
超高速開発が分かる資料3点セット

【下記の3点の資料が無料でダウンロードできます】

  • 【料金表付き】新規事業を爆速で立ち上げられる高速開発支援サービスの紹介資料
  • 【最短24時間で納品?】高速開発のプロジェクト支援事例集
  • 導入に向けて開発プラットフォームのランニングコスト比較表
  • URLをコピーしました!

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。


目次
閉じる