--- title: GitHub Copilot app (神) で作ったアプリを Azure で公開しよう そしてロボットもはじめよう tags: #github copilot #atoms3r #azure author: [yuma(Maki)](https://www.docswell.com/user/yuma) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/27VV6KD97Q.jpg?width=480 description: [第 12 回 JAZUG for Women 【GitHub Copilot回】 - connpass](https://jazug.connpass.com/event/403783/) の登壇スライドです。GitHub Copilot appについてと、つくったアプリのデプロイ先としてのAzureリソースとAtomS3R AIChatbotの話です！ published: September 29, 26 canonical: https://www.docswell.com/s/yuma/5VJE6L-2026-09-29-jazug --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/27VV6KD97Q.jpg) GitHub Copilot app (神) で 作ったアプリを Azure で公開しよう そしてロボットもはじめよう ～GitHub Copilot app の Skill 全部読む話をするはずが～ 2026/09/29 第 12 回 JAZUG for Women Maki Nagase @yuma_prog # Page. 2 ![Page Image](https://bcdn.docswell.com/page/5JGLNQY47L.jpg) Maki Nagase @yuma_prog • My Info • 株式会社ゼンアーキテクツ所属 • GitHub Star • Microsoft MVP for Azure, Microsoft Foundry • 運営・主催コミュニティ • AI駆動開発勉強会, JAZUG(Japan Azure User Group), Azureわいがや会, GitHub Vibe Riders, Hack Everything., GitHub dockyard, AOAI Dev Day • 好きな技術 • Azure PaaS, Azure AI, C#, Terraform, GitHub Copilot • 趣味 • 技術コミュニティ,アニメ,キャンプ,しゃぼん玉,法螺貝,サバゲ,などなど # Page. 3 ![Page Image](https://bcdn.docswell.com/page/47QYQKMREP.jpg) GitHub Copilot app（神） とは # Page. 4 ![Page Image](https://bcdn.docswell.com/page/KE4WNPVQJ1.jpg) GitHub Copilot app とは エージェントファーストな GitHub Copilot のデスクトップアプリ https://github.com/features/ai/github-app # Page. 5 ![Page Image](https://bcdn.docswell.com/page/L71Y593LJG.jpg) Agentの待ち時間で遊べるゲーム付き Home にいる Octocat をつまむと… # Page. 6 ![Page Image](https://bcdn.docswell.com/page/G7WG5QPQE2.jpg) 会話・Issue・PRからタスクを開始 コードを開いて開始ではなく、タスクからセッションを始められる！ # Page. 7 ![Page Image](https://bcdn.docswell.com/page/4JZLNWK3E3.jpg) コードをあまり意識しなくていい コードを開いて開始ではなく、タスクからセッションを始められる！ 変更が競合しないよう、自動でWorktreeを作ってくれる（作らない設定もある） Issueにタスクの内容をまとめるのがおすすめ！ • それがプロンプトになる • チームでプロンプトを共有しているのと同じ状態 • 後で遡って検索も可能にできる # Page. 8 ![Page Image](https://bcdn.docswell.com/page/YE6W8GQZEV.jpg) いい感じのコードができたら # Page. 9 ![Page Image](https://bcdn.docswell.com/page/GE5M9VR9E4.jpg) ボタン一つで実行 実行コマンドはpackage.jsonから 自動で拾ってくる 任意のコマンドを設定で追加も可能 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/972923D5JR.jpg) 開いたページの要素を選択して修正を依頼できる # Page. 11 ![Page Image](https://bcdn.docswell.com/page/DJY4Y1267M.jpg) プルリクエスト作成＆Descriptionも書いてくれる # Page. 12 ![Page Image](https://bcdn.docswell.com/page/V7NYP2W1E8.jpg) PRレビューへの対応もブラウザ開く必要なし！ PRの下に表示されるこれをクリック セッションでレビューに対応を開始 返信＆コメントのResolveまでやってくれる # Page. 13 ![Page Image](https://bcdn.docswell.com/page/YJ9P31XY73.jpg) マージまでやってくれる マージしていい状態かどうか判断した 上でマージしてくれる • 未対応のレビューコメントがあれば それに対応するべきか判断 • 対応すべきものは修正をいれる • CIが通っていなければ修正 • コンフリクトがあれば修正 # Page. 14 ![Page Image](https://bcdn.docswell.com/page/GJ8DM42KJD.jpg) Canvasも最高 • • GitHub CopilotとのやりとりをUIで表現できる MCPやAPIで外部サービスの情報も表示できる 例えば、 • Issueをカンバンで表示 • PLANに移動すると、自 動でCopilotが計画を 始める タスク管理しているSaaSを つなぐCanvasも自作可能 https://awesome-copilot.github.com/extension/accessibility-kanban/ # Page. 15 ![Page Image](https://bcdn.docswell.com/page/LJLM362PER.jpg) Canvasの可能性は無限大 AIヒロインとの ギャルゲーができたり @ymd65536 https://x.com/ymd65536/status/2096128061788033411 # Page. 16 ![Page Image](https://bcdn.docswell.com/page/47MYD5827W.jpg) Canvasの可能性は無限大 GitHub AI CreaditsでAI彼女をレンタルしたり @Yuhei_FUJITA https://x.com/yuma_prog/status/2096143030424309922 # Page. 17 ![Page Image](https://bcdn.docswell.com/page/P7R94355E9.jpg) やっぱりGitHub Copilot appは最高だぜ！ 「/create-canvas」 で作りたいことを伝えれば作ってくれる！ しかもモデルの進化で、だいたい一発で動く！ # Page. 18 ![Page Image](https://bcdn.docswell.com/page/PJXQ24KX7X.jpg) そんなGitHub Copilot app作ったアプリを 公開したい # Page. 19 ![Page Image](https://bcdn.docswell.com/page/3JK9MZ59JD.jpg) 部品ごとのデプロイ先 アプリを部品に分け、部品ごとに実行・保存先を選ぶ 静的な UI Azure Static Web Apps サーバー側の処理 Azure Functions / App Service / Container Apps 画像などのファイル Azure Blob Storage JSON データ Azure Cosmos DB まず無料枠やゼロスケール可能なもので始め、要件が増えた時に高めのプランに切り替える https://azure.microsoft.com/en-us/products/app-service/static https://learn.microsoft.com/en-us/azure/azure-functions/functions-scale https://learn.microsoft.com/en-us/azure/storage/common/storage-plan-manage-costs 3 # Page. 20 ![Page Image](https://bcdn.docswell.com/page/LE3WYDK9E5.jpg) デプロイ先の選択フロー 静的ファイルだけで動く はい Static Web Apps いいえ 小さな API・イベント処理 画像・ファイルがある はい Azure Functions いいえ 常時接続したい 処理の種類とは別に判断する Azure Blob Storage JSON データがある いいえ Azure App Service はい Container Apps express Azure Cosmos DB はい HTTP 中心で簡単に出したい 未信頼のコードを実行する Container Apps Sandboxes いいえ Azure Container Apps 出典 https://learn.microsoft.com/en-us/azure/static-web-apps/plans https://learn.microsoft.com/en-us/azure/container-apps/express-overview 4 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/8EDK5P387G.jpg) Static Web Apps の概要 GitHub Repository push / pull request Azure Static Web Apps •静的 UI の配信 •HTTPS / カスタムドメイン •プレビュー環境 ソースリポジトリから静的フロントエンドをビルドし、 グローバル配信するサービス •GitHub または Azure DevOps との連携 •無料で自動更新される SSL 証明書 •プレビュー環境 •認証 •Azure Functions API との統合 出典 https://learn.microsoft.com/en-us/azure/static-web-apps/plans https://azure.microsoft.com/en-us/products/app-service/static 6 # Page. 22 ![Page Image](https://bcdn.docswell.com/page/V7PKGN4WJ8.jpg) 段階別の推奨構成 段階 推奨構成 画面を公開するだけ Static Web Apps Free 小さなフォームや CRUD 上記＋Managed Functions＋ Cosmos DB 理由 GitHub 連携、HTTPS、プレビュー環 境まで無料 少ない構成で UI・API・JSON DB を 分離 画像を保存する 上記＋Blob Storage バイナリを DB やアプリから分離 Node/.NET/Python Web サーバー App Service Linux B1 から検証 コードを持ち込みやすく、固定月額が 分かりやすい Dockerfile がある API Container Apps Consumption 従量課金 HTTP コンテナーを最速公開 Container Apps express 対応機能内なら環境設計を減らせる AI 生成コードを実行 Container Apps Sandboxes 隔離・停止・再開が必要な時だけ採用 https://learn.microsoft.com/en-us/azure/static-web-apps/plans 出典 https://learn.microsoft.com/en-us/azure/container-apps/overview 23 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/2JVV6KX9JQ.jpg) GitHub Copilot appに相談して Azureでアプリを公開してみよう 今どこまでできるんだろう、と思ってやってみたら全部やってくれた • • • • • リソース選定・作成 • 要件を満たせるリソースか？の調査からやってくれた • ドキュメントに書いてないことも検証してくれた アプリのデプロイ AIモデルのデプロイ 権限周り リソース同士の接続確認 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/5EGLNQV4JL.jpg) そこで今回やってみたのは # Page. 25 ![Page Image](https://bcdn.docswell.com/page/4JQYQK6R7P.jpg) AtomS3R を使ったAIロボ！ これが楽しすぎて、本当はGitHub Copilot appのSkillを細かーく喋る予定だったのに急遽内容変更しました # Page. 26 ![Page Image](https://bcdn.docswell.com/page/K74WNP4QE1.jpg) この子の構成 デバイス AtomS3R + Voice Base サーバー 音声を送信 • C++で顔を描画 • 音声をサーバー側に投げ、 受け取った音声を再生 Container Apps Express 呼び出し先の API API呼び出し • Voice Live APIを 呼び出す 音声を返す 応答 Voice Live API # Page. 27 ![Page Image](https://bcdn.docswell.com/page/LJ1Y594LEG.jpg) この子の作り方 GitHub Copilot appのPlanモードで、以下のような指示を投げた M5SackのAI Chatbot（AtomS3R＋VOICE Base）を使って、Microsoft Foundryの Voice Live API を使って会話できるようにしたい。WebSocketに対応しているAzureコンピュー ティングリソースでVoice Live APIと接続するような形にする。App ServiceかContainerなのか な、要調査。また、縦長の棒のような目を2つ表示して、かわいらしい見た目にしたい。目がふよふよ 動いたり、瞬きしたり笑ったりしてほしい。計画と情報収集から # Page. 28 ![Page Image](https://bcdn.docswell.com/page/GJWG5QXQ72.jpg) この子の作り方 • Planの結果を見てフィードバック • Container Apps Expressで動か せるか調べて、とか投げた • あとはAutopilotで実装 • 動かなければログを渡して「動かない」 と伝える これだけでできた！デプロイもやってくれた # Page. 29 ![Page Image](https://bcdn.docswell.com/page/4EZLNW6373.jpg) AtomS3R、ロボ初心者によさそう • 費用も安い • 簡単にしゃべらせられる • サーボ＋3Dプリンターボディで色々できそう # Page. 30 ![Page Image](https://bcdn.docswell.com/page/Y76W8G2Z7V.jpg) AtomS3R、ロボ初心者によさそう • 費用も安い • 簡単にしゃべらせられる • サーボ＋3Dプリンターボディで色々できそう みんなもGitHub Copilot appでロボ入門しよう！！！