GitHub Copilot Chatをつかって、iOSアプリとWebアプリを作ってみました

最近、ClaudeやCursorなど、ソフトウェア実装の時間を大幅に短縮できるサービスが増えています。

その中の１つにGitHub Copilotがあります。GitHub CopilotではVisual Studio Codeなどのエディタでコーディングの補完ができるだけでなく、「〜という機能をもつアプリを作ってください」という書き方をして、必要なファイル一式を作ってもらうこともできます。

今回は、GitHub Copilotを使ってXcode向けiOSアプリを作ってみました。そのときの手順や最終系に仕上げるまでの過程を整理しました。

1. GitHub Copilotの概要

改めてですが、公式HPの内容を引用します。

GitHub Copilot は AI コーディング アシスタントであり、コードをより速く楽に記述できるため、問題解決とコラボレーションにより多くのエネルギーを集中できます。

GitHub Copilotの機能です。

・IDE で入力したコード候補を取得する
・コードに関するヘルプを求めて Copilot とチャットする
・コマンド ラインを使用して Copilot にヘルプを依頼する
・pull request _ (Copilot Enterprise のみ) の変更の説明を生成する
・Copilot (Copilot Enterprise のみ) とのチャットのコンテキストとして使用するために、サポート技術情報と呼ばれるドキュメントのコレクションを作成および管理します。

GitHub Copilotが使える場所です。

・IDE 内 (例：Xcode, Android Studio, IDEと呼んで良いかわからないですがVisual Studio Codeでも使えます)
・チャット インターフェイスとして GitHub Mobile 内
・Windows Terminal Canary (Terminal Chat インターフェイスを使用)
・GitHub CLI を使用したコマンド ライン上
・GitHub ウェブサイト上

引用：GitHub Copilot とは何ですか? - GitHub Docs

無料でも使えますが、月額の有料プランではコード補完やチャットのフルアクセス (モデルは限定)など、できることが増えます。

docs.github.com

私はGitHub Proを契約済みのため、今回の開発で使ったチャット応答は無制限に使用できました。

2. Visual StudioでのGitHub Copilot環境構築方法

公式HPの中で紹介されています。

docs.github.com

環境構築については英語のみのようです。

Set up GitHub Copilot in VS Code

別の記事ですが、環境構築はこちらの日本語解説がよさそうです。 VSCodeでGithub Copilotを設定して使う方法

これらの設定が済めば、Visual Studio CodeにGitHubアイコンが表示されます。

アイコンの右側をクリックし、"Open Chat"を選択すると、右側にチャットウインドウが表示されます。あとはここで相談していきます。

3. 試したこと：メモ帳アプリ開発 (Xcode)

まずはじめに、Xcode向けプロジェクトを出力してもらいました。iOS/iPad OS/Mac OSで使われている「メモ帳」とほぼ一緒の仕様です。

以下の機能を持つiOSアプリを作りたいです。これを作るためのXcodeプロジェクトを出力してください。  

・作ったメモがリスト形式で並ぶ  
・画面右下に新規作成アイコンを作り、これを押すと新しいメモを作ることができる  
・作ったメモは、リストに追加される  
・画面上に検索フィールドを作る。任意の言葉で検索すると、該当するメモのリストを表示する  

この文章を入力すると、使用しているMacの中でXcodeプロジェクトを作るためのフォルダを聞かれます。フォルダを指定すると、その中にXcodeプロジェクトが作成されます。

少しだけ変更指示を出しましたが、生成されたXcodeプロジェクトをビルドして、すぐに動かすことができました。

Apple Developer Programにも入っているため、iPhone の実機へのデプロイもすぐ完了し、純正のメモ帳アプリのような挙動で問題なく使えました。

なお、私はずっと前にObjective-Cで少し作った程度でSwiftはほぼ知らない状態です。それでも、Xcodeの基本的使い方がわかっていれば、「こういうものが作ってみたい」が実現できることがわかりました。

4. 試したこと：Azure Open AI Serviceを使った音声解析と文書要約 (JavaScript)

次は、全く別の内容として、Azureを使った処理が書けるかを試してみました。

ただ、Azure周りの処理が中々動かず、自分の使える時間の時間切れもあり、最終的にできたのはタイトルのような内容でした。

【当初のプロンプト】

以下の機能を持つWebページを作りたいです。

・Webページである

・動画をアップロードする画面を表示

・ユーザが動画をアップロードすると、その動画の要約をテキストで表示する  

・動画の要約には、Azure Open AI Servicesを使用する。

【試行錯誤しつつ、最終的に動作確認できたこと】

・Webページ上で音声ファイル(.wav)をアップロードすると、AzureのSpeech To Textによって文章で結果を返す  

・Webページ上でテキストファイル(.txt)をアップロードすると、Azure のLanguage Serviceによって、要約、要素分解、感情分析結果を返す

まず、Azure OpenAI Serviceを使うには、Azure Portalでリソースグループの作成、リソースの立ち上げが必要です。

最初に上記に示したプロンプトを書いたところ、まずはVisual Studio Code向けのExtentionであるGitHub Copilot for Azureをインストールしてください、それから質問に回答します、という趣旨の英語の応答がありました。

そこで、GitHub Copilot for Azureをインストールし、"@Azure"でメンションする形で作成を試みたのですが、問いと回答が合いませんでした。最終的に「GitHub Copilot for Azureを使わない作成方法を教えてください」と伝えて、リソースはAzure Portalにアクセスして自分で作りました。

今回はうまく使えませんでしたが、一方で下記の記事で書かれている通り、ある程度のことはできるようです。別の機会に再度試してみるかもしれません。

www.publickey1.jp

改めて、「GitHub Copilot for Azureを使わない作成方法を教えてください」＋仕様を書いたところ、このような返答があって、自分のMacの指定フォルダにファイルを作ってくれました。

この後で、"npm install" (関係するモジュール化したJavaScriptファイルの入手と展開)、"npm start" (package.jsonファイルに定義した、サーバ実行コマンド) を実行しましたが、エラーになりました。

以後、エラーが出るたびにエラーログを書いて対処方法を聞いて、生成された修正版のコードを使って再度試す、を繰り返しました。

Azure APIエンドポイントがうまく認識できず、何度かエラーと修正を繰り返しましたが、最終的には自分で準備した.wavファイルをアップロードすると、Azure Speech To Textにかけてテキストを返す、.txtファイルをアップロードすると、要約＋要素分解＋感情分析を返すという処理ができました。

以下は、テキストの要約＋要素分解＋感情分析の結果です。

ここで使った文章は、以前自分で執筆したBabylon.js レシピ集Vol.4の記述です。Apple Vision ProとWebXRについて書いているため、結果にもWebXRという文字が入っています。

techbookfest.org

5. その他の学び

5.1 Azure APIのエンドポイント

何度かやり直すことになったので、備忘録のために書いておきます。

◾️Azure Speech To Textのエンドポイント

https://japaneast.stt.speech.microsoft.com/language/analyze-text/jobs

("japaneast"はリージョンの選択場所によって変わります)

◾️Azure AI Languageのエンドポイント

https://<自分で作ったリソース名称>.cognitiveservices.azure.com/language/analyze-text/jobs?api-version=2022-05-01

5.2 Godot Engineのプロジェクト出力もできた (詳細は未実行)

web版で作ったものと同じようなプロジェクトをGodot Engineで作ってほしい、と書いたところ、Godot Engineプロジェクトを生成してくれました。処理の中身は空っぽだったので何度かやり取りが必要になりますが、うまく使えばGodot Engineのアプリも作れそうです。

5.3 今回の問題が解決できる、という意味ではClaude 3.7 Sonnet > GPT 4oだった

GitHub Copilot Chatでは、自分の使用するモデルを複数の候補から選ぶことができます。

初期状態ではChat GPT-4oになっており、最初はこれを使っていました。
iOSのメモ帳アプリは4oだけでできたので、これでも十分すごいのですが、今回試したAzure関係の処理は、4oではうまくいきませんでした。途中からClaude 3.7 Sonnetに変更したところ、提示された修正版ですぐに動くようになりました。

これだけで判断はできませんが、Claude 3.7の方が良さそうに思います。

実際、いくつかの記事を読んでもClaude3.7は良さそうです。

Claude 3.7 Sonnet vs ChatGPT o1 最強AIモデルはどっち？ - GPT Master

web開発素人だけど、Claude 3.7 Sonnetを使ったら半日でアプリ開発&リリースできた記念記事 #個人開発 - Qiita

5.4 ChatGPTのモデルの種類

改めて調べたところ、このように分類されていました。

www.ai-souken.com

6. おわりに

ここ最近、プライベートで子育ての対応が多くて開発関係にほとんど時間を取れておらず、ようやくGitHub Copilot Chatをちゃんと使えました。

GitHub Copilot Chatはとにかくさまざまな言語に対応できるため、少なくとも個人開発には必須と思いました。

こちらの記事にもあるように、要件定義から始めつつ、画面設計イメージも交えてアプリ開発までできるようです。

今回は数行のプロンプト＋エラー直しの繰り返ししかしませんでしたが、それでも動くものができたのが驚きでした。

次回は上記の記事にあるような要件定義や画面設計を交えて試したいと思います。