--- title: ただの営業マンが 大阪観光エージェントをCopilotと作ってみた tags: author: [ニシ サダオミ](https://www.docswell.com/user/4997286788) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/4JMYXMP9JW.jpg?width=480 description: ただの営業マンが 大阪観光エージェントをCopilotと作ってみた by ニシ サダオミ published: June 06, 26 canonical: https://www.docswell.com/s/4997286788/ZPRWV8-2026-06-06-070725 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/4JMYXMP9JW.jpg) ただの営業マンが 大阪観光エージェントを Copilotと作ってみた なんでもCopilot 特別回 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/PJR9NV1979.jpg) おしながき 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ # Page. 3 ![Page Image](https://bcdn.docswell.com/page/PEXQNZY3JX.jpg) 私と大阪 ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ # Page. 4 ![Page Image](https://bcdn.docswell.com/page/3EK9N83NED.jpg) 私と大阪 11歳のニシ 南港で生まれ育つ 今はなき緑小学校に入学する その後、阿倍野に引っ越す # Page. 5 ![Page Image](https://bcdn.docswell.com/page/L73WV2GZ75.jpg) フミダセさん登壇資料より抜粋 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/87DK8Z14JG.jpg) 私と大阪 ケチはつきましたが（苦笑） 大阪は私にとって大切な場所です # Page. 7 ![Page Image](https://bcdn.docswell.com/page/VJPK8DQVE8.jpg) 大切なご報告 ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ # Page. 8 ![Page Image](https://bcdn.docswell.com/page/2EVVN15REQ.jpg) # Page. 9 ![Page Image](https://bcdn.docswell.com/page/57GLK266EL.jpg) 大切なご報告 なれるとは1ミリも思っていませんでした 本当に温かいコミュニティの皆様は 感謝してもし切れません # Page. 10 ![Page Image](https://bcdn.docswell.com/page/4EQYNP42JP.jpg) 大切なご報告 今後も、営業現場におけるリアルな活動や 知見をベースに、独自路線の アウトプットを続けます # Page. 11 ![Page Image](https://bcdn.docswell.com/page/KJ4WGYQP71.jpg) 作ったもの ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ # Page. 12 ![Page Image](https://bcdn.docswell.com/page/LE1YD6PX7G.jpg) なんでもCopilot 大阪エージェント # Page. 13 ![Page Image](https://bcdn.docswell.com/page/GEWGYW2KJ2.jpg) 一般的な知識に加えて たこ焼き屋から観光スポット、 なんでもCopilotそのものまで 答えてくれる # Page. 14 ![Page Image](https://bcdn.docswell.com/page/47ZLX5DNJ3.jpg) 標準語・大阪弁・京都弁・播州弁・ 神戸弁・河内弁の6種類の 口調をプルダウンで切り替え可能！ # Page. 15 ![Page Image](https://bcdn.docswell.com/page/YJ6W4919JV.jpg) 回答は文字が少しずつ表示される ストリーミング形式！ 待っている間は方言に応じた ステータスが表示！ 例）ちょっと待ってな… # Page. 16 ![Page Image](https://bcdn.docswell.com/page/GJ5MQN4DJ4.jpg) スマホ・PCどちらでも崩れない レスポンシブ対応！ 日付に応じて大阪回の案内が 「開催予定」「開催済み」と 自動切換え！ エージェントの回答を ハッシュタグつきでシェア！ # Page. 17 ![Page Image](https://bcdn.docswell.com/page/9E29P5LM7R.jpg) 実装のステップ ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ Azureの テクニカルな内容には あまり触れません # Page. 18 ![Page Image](https://bcdn.docswell.com/page/D7Y45KQPEM.jpg) 実装のステップ コンセプト Done is better than perfect. 意訳：多分動くと思うからリリースしようぜ # Page. 19 ![Page Image](https://bcdn.docswell.com/page/VENYNRKMJ8.jpg) 実装のステップ 使ったもの Microsoft Azure, GitHub Copilot Microsoft Copilot GitHub Copilotは無料の範囲内でできました # Page. 20 ![Page Image](https://bcdn.docswell.com/page/Y79PRMVWE3.jpg) 実装のステップ 環境構築 GitHubにコードをプッシュ Azure Static Web Appsで公開 Azure AI Foundryの準備 AIとフロントを接続 全体方針は チューニング Microsoft Copilotに 独自ドメイン取得 確認 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/G78DWLPR7D.jpg) 実装のステップ 環境構築 GitHubにコードをプッシュ Azure Static Web Appsで公開 Azure AI Foundryの準備 AIとフロントを接続 チューニング 独自ドメイン取得 ボクと一緒に つくっていこうね GitHub Copilot # Page. 22 ![Page Image](https://bcdn.docswell.com/page/L7LMNL12JR.jpg) 実装のステップ GitHub Copilot コードを書くのを手伝ってくれるAIアシスタント 今回はAgent Mode（2025年４月GA）を 活用してUIの実装やデバッグなどを共に実行 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/4EMYXMW9EW.jpg) 実装のステップ GitHub Copilot Agent Mode 指示するだけで自律的にコードを書いてくれる AIエージェント。編集すべき関連ファイルを 自律的に判断してタスクを遂行 # Page. 24 ![Page Image](https://bcdn.docswell.com/page/PER9NVY9J9.jpg) 実装のステップ GitHub Copilot Agent Mode 指示の例） 「方言切り替えつきチャットUIを作って」 →必要なファイルを自動生成、編集 # Page. 25 ![Page Image](https://bcdn.docswell.com/page/P7XQNZG3EX.jpg) 実装のステップ GitHub Copilotのプラン ※個人向け Free Pro 料金 ＄0 ＄10/月 ＄39/月 ＄100/月 対象 お試し 軽い個人開発 日常的な 個人開発 Pro＋ 本格的な 開発 Max ヘビーユーザー 新モデルや新機 能をいち早く 試したい人 # Page. 26 ![Page Image](https://bcdn.docswell.com/page/37K9N84N7D.jpg) 実装のステップ GitHub Copilotのプラン ※個人向け Free 料金 ＄0 対象 お試し 軽い個人開発 Pro Pro＋ Max Freeプランでも Agent Modeは ＄10/月 ＄39/月 ＄100/月 使えるよ！ ヘビーユーザー 日常的な 本格的な 個人開発 開発 新モデルや新機 能をいち早く 試したい人 # Page. 27 ![Page Image](https://bcdn.docswell.com/page/LJ3WV2LZJ5.jpg) # Page. 28 ![Page Image](https://bcdn.docswell.com/page/8JDK8ZN4EG.jpg) 実装のステップ かかった料金 試用版を利用し自己負担は０円 数百円程度 Azure Static Web Apps→Freeプラン GitHub Copilot→Freeプラン Azure AI Foundry→無料 Microsoft Copilot→無料 # Page. 29 ![Page Image](https://bcdn.docswell.com/page/VEPK8D5V78.jpg) 実装のステップ かかった料金 安価な最新モデル （GPT-5.4-mini）を 使ったのも◎ 無料枠を駆使して 賢くやることが 大切だね！ # Page. 30 ![Page Image](https://bcdn.docswell.com/page/27VVN1PR7Q.jpg) まとめ ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ # Page. 31 ![Page Image](https://bcdn.docswell.com/page/5JGLK2P67L.jpg) まとめ これからも関西人ならではの マインドを大切にしつつ アウトプットをガンバリマス！ # Page. 32 ![Page Image](https://bcdn.docswell.com/page/47QYNP22EP.jpg) まとめ これからも関西人ならではの マインドを大切にしつつ アウトプットをガンバリマス！ ・・・・・ # Page. 33 ![Page Image](https://bcdn.docswell.com/page/KE4WGYLPJ1.jpg) # Page. 34 ![Page Image](https://bcdn.docswell.com/page/L71YD6LXJG.jpg) まとめ 関西弁は薄れつつありますが（苦笑） 魂は売っていないつもりです ぜひ当イベントを楽しんでください！ 懇親会でもお話ししましょう！！ # Page. 35 ![Page Image](https://bcdn.docswell.com/page/G7WGYWVKE2.jpg) 参考資料 GitHub Copilot / Agent Mode GitHub Copilot 料金・プラン https://github.com/features/copilot/plans GitHub Copilot Agent Mode 解説（GitHub Blog） https://github.blog/ai-and-ml/github-copilot/agent-mode-101-allabout-github-copilots-powerful-mode/ Requests in GitHub Copilot（GitHub Docs） https://docs.github.com/en/copilot/concepts/billing/copilotrequests # Page. 36 ![Page Image](https://bcdn.docswell.com/page/4JZLX54NE3.jpg) 参考資料 Azure Static Web Apps Azure Static Web Apps 概要（Microsoft Learn） https://learn.microsoft.com/ja-jp/azure/static-webapps/overview Azure Static Web Apps 料金 https://azure.microsoft.com/ja-jp/pricing/details/appservice/static/ カスタムドメインの設定（Microsoft Learn） https://learn.microsoft.com/ja-jp/azure/static-webapps/custom-domain # Page. 37 ![Page Image](https://bcdn.docswell.com/page/YE6W4939EV.jpg) 参考資料 Azure OpenAI / AI Foundry Azure OpenAI Service 公式 https://azure.microsoft.com/ja-jp/products/ai-services/openaiservice Azure OpenAI Service 料金 https://azure.microsoft.com/ja-jp/pricing/details/cognitiveservices/openai-service/ # Page. 38 ![Page Image](https://bcdn.docswell.com/page/GE5MQNLDE4.jpg) 参考資料 Azure OpenAI / AI Foundry Azure AI Foundry（公式ポータル） https://ai.azure.com Azure OpenAI ストリーミング/チャット API リファレンス（Microsoft Learn） https://learn.microsoft.com/ja-jp/azure/aiservices/openai/reference # Page. 39 ![Page Image](https://bcdn.docswell.com/page/9729P53MJR.jpg) 参考資料 フロントエンド（Next.js / Tailwind） Next.js 公式ドキュメント https://nextjs.org/docs Tailwind CSS 公式ドキュメント https://tailwindcss.com/docs # Page. 40 ![Page Image](https://bcdn.docswell.com/page/DJY45K1P7M.jpg) 参考資料 開発の基礎ツール Azure CLI インストール（Microsoft Learn） https://learn.microsoft.com/ja-jp/cli/azure/install-azure-cli az staticwebapp コマンドリファレンス https://learn.microsoft.com/ja-jp/cli/azure/staticwebapp # Page. 41 ![Page Image](https://bcdn.docswell.com/page/V7NYNR2ME8.jpg) ただの営業マンが 大阪観光エージェントを Copilotと作ってみた なんでもCopilot 特別回 Thank You!!!