ただの営業マンが 大阪観光エージェントをCopilotと作ってみた
355 Views
June 06, 26
スライド概要
営業職だがITが好き。 【Award】AWS Community Builders 2025 【資格】AWS×6, MS×多数, TOEIC 950など
関連スライド
各ページのテキスト
ただの営業マンが 大阪観光エージェントを Copilotと作ってみた なんでもCopilot 特別回
おしながき 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ
私と大阪 ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ
私と大阪 11歳のニシ 南港で生まれ育つ 今はなき緑小学校に入学する その後、阿倍野に引っ越す
フミダセさん登壇資料より抜粋
私と大阪 ケチはつきましたが（苦笑） 大阪は私にとって大切な場所です
大切なご報告 ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ
大切なご報告 なれるとは1ミリも思っていませんでした 本当に温かいコミュニティの皆様は 感謝してもし切れません
大切なご報告 今後も、営業現場におけるリアルな活動や 知見をベースに、独自路線の アウトプットを続けます
作ったもの ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ
なんでもCopilot 大阪エージェント
一般的な知識に加えて たこ焼き屋から観光スポット、 なんでもCopilotそのものまで 答えてくれる
標準語・大阪弁・京都弁・播州弁・ 神戸弁・河内弁の6種類の 口調をプルダウンで切り替え可能！
回答は文字が少しずつ表示される ストリーミング形式！ 待っている間は方言に応じた ステータスが表示！ 例）ちょっと待ってな…
スマホ・PCどちらでも崩れない レスポンシブ対応！ 日付に応じて大阪回の案内が 「開催予定」「開催済み」と 自動切換え！ エージェントの回答を ハッシュタグつきでシェア！
実装のステップ ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ Azureの テクニカルな内容には あまり触れません
実装のステップ コンセプト Done is better than perfect. 意訳：多分動くと思うからリリースしようぜ
実装のステップ 使ったもの Microsoft Azure, GitHub Copilot Microsoft Copilot GitHub Copilotは無料の範囲内でできました
実装のステップ 環境構築 GitHubにコードをプッシュ Azure Static Web Appsで公開 Azure AI Foundryの準備 AIとフロントを接続 全体方針は チューニング Microsoft Copilotに 独自ドメイン取得 確認
実装のステップ 環境構築 GitHubにコードをプッシュ Azure Static Web Appsで公開 Azure AI Foundryの準備 AIとフロントを接続 チューニング 独自ドメイン取得 ボクと一緒に つくっていこうね GitHub Copilot
実装のステップ GitHub Copilot コードを書くのを手伝ってくれるAIアシスタント 今回はAgent Mode（2025年４月GA）を 活用してUIの実装やデバッグなどを共に実行
実装のステップ GitHub Copilot Agent Mode 指示するだけで自律的にコードを書いてくれる AIエージェント。編集すべき関連ファイルを 自律的に判断してタスクを遂行
実装のステップ GitHub Copilot Agent Mode 指示の例） 「方言切り替えつきチャットUIを作って」 →必要なファイルを自動生成、編集
実装のステップ GitHub Copilotのプラン ※個人向け Free Pro 料金 ＄0 ＄10/月 ＄39/月 ＄100/月 対象 お試し 軽い個人開発 日常的な 個人開発 Pro＋ 本格的な 開発 Max ヘビーユーザー 新モデルや新機 能をいち早く 試したい人
実装のステップ GitHub Copilotのプラン ※個人向け Free 料金 ＄0 対象 お試し 軽い個人開発 Pro Pro＋ Max Freeプランでも Agent Modeは ＄10/月 ＄39/月 ＄100/月 使えるよ！ ヘビーユーザー 日常的な 本格的な 個人開発 開発 新モデルや新機 能をいち早く 試したい人
実装のステップ かかった料金 試用版を利用し自己負担は０円 数百円程度 Azure Static Web Apps→Freeプラン GitHub Copilot→Freeプラン Azure AI Foundry→無料 Microsoft Copilot→無料
実装のステップ かかった料金 安価な最新モデル （GPT-5.4-mini）を 使ったのも◎ 無料枠を駆使して 賢くやることが 大切だね！
まとめ ▶ 私と大阪 大切なご報告 作ったもの 実装のステップ まとめ
まとめ これからも関西人ならではの マインドを大切にしつつ アウトプットをガンバリマス！
まとめ これからも関西人ならではの マインドを大切にしつつ アウトプットをガンバリマス！ ・・・・・
まとめ 関西弁は薄れつつありますが（苦笑） 魂は売っていないつもりです ぜひ当イベントを楽しんでください！ 懇親会でもお話ししましょう！！
参考資料 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
参考資料 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
参考資料 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/
参考資料 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
参考資料 フロントエンド（Next.js / Tailwind） Next.js 公式ドキュメント https://nextjs.org/docs Tailwind CSS 公式ドキュメント https://tailwindcss.com/docs
参考資料 開発の基礎ツール 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
ただの営業マンが 大阪観光エージェントを Copilotと作ってみた なんでもCopilot 特別回 Thank You!!!