大阪AIハッカソン フォローアップ勉強会 : Vibe Coding勉強会 Day 2

【オンライン開催】大阪AIハッカソン フォローアップ勉強会（全2回）— アプリ開発 入門→実践

初めてハッカソンで開発に取り組む方向けに、大阪AIハッカソンのファシリテーターが入門から公開までを並走サポートします。 アイデアの言語化 → 試作品（MVP）実装 → 機能追加 → 公開の流れを、実装デモと各自の作業時間で着実に進めます。 また、ハッカソンのテーマである io.intelligence API を、あなたのアプリに安全に組み込む方法も解説します。

※受講時は ChatGPT／Claude／Cursor／GitHub Copilot などの有料プラン利用を推奨します（効率が上がります）。 ※ハッカソン応募者以外にも一般参加枠があります。どなたでも歓迎です。

Day 1｜入門：アイデアをMVPまで形にする
「だれの・どんな課題を・どう解決するか」をユーザー視点で整理（AIとの壁打ち含む）
簡易仕様（ミニPRD）を作成（必要な画面・動き、エラー時の振る舞いまで）
基本フローのデモ実装（フォーム → サーバ経由で処理 → 画面表示）
io.intelligence APIの組み込み方（まずはモック→差し替え可能な構成）
各自の実装タイム：最小構成のプロトタイプ（MVP）を完成へ

Day 2｜実践：機能追加・設計図作成・安全に公開
MVPに価値ある一手（例：履歴保存・認証・UI改善・外部API連携）を追加
システム構成図／データフロー図で、仕組みとデータの通り道を見える化
公開手順（ホスティング／CORSの考え方／簡易監視の入れ方）
APIキーの安全管理（環境変数・Secretsの使い方、漏えい時の対応）
各自の実装タイム：機能追加と公開URLの用意まで仕上げ

Transcript

1. VibeCoding勉強会 Day 2
2. 大阪AIハッカソンとは？ • 大阪・京橋 QUINTBRIDGE（NTT西日本 本社内）で開催 する、社会・地域課題の解決 × 分散型GPUクラウド「 IO Intelligence」をテーマにしたハッカソン 。 • 本イベントを通じて、AI駆動開発の推進・普及、 AI人材の 育成、地域ネットワークの創出 を目指す。
3. 分散型GPUクラウド io.net、IO Intelligenceとは？ • io.netとは？ ◦ 分散型GPUクラウドを提供する Web3 プロジェクト（NY拠点、DePINカテゴリ）。 ◦ DePINとは、ブロックチェーン技術を活用し、現実世界の物理インフラ（ e.g. ストレージネットワー ク、ワイヤレスネットワーク）を分散的に管理・運用するアプローチ。 • IO Intelligenceとは？ ◦ オープンソース系 LLM を扱える推論基盤 （OpenAI GPT-OSS-120BやDeepSeek, Qwen3の利用にも対応）。 ◦ チャット100万トークン／API 50万トークンを無料開放中。 ◦ VS Code 拡張「Roo Code」と IO Intelligence API の連携で、 無料のAIエージェント構築が可能。
4. ハッカソンの 事前準備&ルール説明 大阪AIハッカソンの connpassから参加登録 できます。
5. ルール説明 • 個人またはチーム で参加（Day 1 にチームビルディング可）。 • 社会課題は、各自の提案または提示リスト(後述)から選定。 • 最終ピッチで、成果物（Webアプリ, モバイルアプリ , チャットボット , IoT, ハードウェア連携 など, 何でもOK）を発表。 • 【スケジュール】 ◦ エントリー(6〜10チーム): 10/18 [Day 1 (10/18)] ◦ 開発期間: 10/18〜11/1 (2週間) ◦ 最終ピッチイベント: 11/1 [Day 2 (11/1)]
6. 社会課題リスト（参考） ドキュメント https://docs.google.com/document/ d/1ImIrVfUNmgTiRe3adflNeMUKgx RrmH6t1VCJSeK9Sl4/edit?usp=sh aring NOTEBOOKLM https://notebooklm.google.com/not ebook/21f015ed-d6d5-480e-a3be-8 78f679ff4e4
7. AIエージェントを使おう！ • AIモデル・AIエージェントを活用することで開発効率は飛躍的に高められます。 • アイディア１つで、誰しもが開発者・AIエンジニアになるチャンスがあります。 【AIコーディングツールの例】
8. Vibe Coding 勉強会
9. 続きは、Day 2｜実践：機能追加・設計図作成・安全に公開 1. MVPに価値ある一手（例：履歴保存・認証・UI改善・外部API連携） を追加 2. システム構成図／データフロー図で、仕組みとデータの通り道を見 える化 3. 公開手順（ホスティング／CORSの考え方／簡易監視の入れ方） 4. APIキーの安全管理（環境変数・Secretsの使い方、漏えい時の対 応） 5. 各自の実装タイム：機能追加と公開URLの用意まで仕上げ
10. Day 2 の ハンズオンタイム IO Intelligence 連携 MVPに価値ある一手（例：履歴保存・認証・ UI改善・外 部API連携）を追加 ・IO Intelligence 連携が必須 ・課題を解決する特徴的な機能を追加しよう 特徴的な機能追加 基本機能追加
11. IO Intelligence APIの組み込みに関して • どのLLMモデルを使用するか？ ◦ モデルごとの動作感を試す ◦ https://nurumayudatalab.com/webtool-multiLLM/index.html • IO Intelligence API keyの取得 ◦ https://io.net/intelligence • APIのエンドポイント ◦ Model Json: https://api.intelligence.io.solutions/api/v1/models ◦ LLM: https://api.intelligence.io.solutions/api/v1/chat/completions
12. curl https://api.intelligence.io.solutions/api/v1/chat/completions \ -H 'Content-Type: application/json' \ -H "Authorization: Bearer $IOINTELLIGENCE_API_KEY" \ -d '{ "model": "openai/gpt-oss-120b", "messages": [{"role":"user","content":"Say this is a test"}], "temperature": 0.7 }' curl https://api.intelligence.io.solutions/api/v1/models モデル情報（JSON）の取得 openai/gpt-oss-120bの実行例（IOINTELLIGENCE_API_KEYを環境 にすることをお忘れなく！！） curlコマンドをそのまま読ませて、あとは AI任せ
13. Day 2 の ハンズオンタイム システム構成図／データフロー図 を作成しておくと、オー ディエンス側の理解が深まる https://exia.co.jp/bizroute/wp-conte nt/uploads/system01.pdf https://edraw.wondershare.jp/flowchart/dataflow- diagram-template.html
14. システム構成図の事例 https://nurumayudatalab.com/ Workers Storage Database LLM LLM Image Gen Frontend / UI クラウドフレア Workers をUIと外部APIの橋渡しとし て配置し、低遅延、Secret、安全な中継、CORS 一元 化を行う “エッジAPIゲートウェイ” として運用。
15. Day 2 の ハンズオンタイム 公開手順（ホスティング／ CORSの考え方／簡易監視の入れ方） APIキーの安全管理（環境変数・ Secretsの使い方、漏えい時の対応） 【良くハマるポイント】 CORS (コーズ / コアーズ / Cross-Origin Resource Sharing)： ブラウザの他オリジン制約 。別オリジンへのアクセス結果を“読んでよいか”を、 サーバがAccess-Control-Allow-Origin等で宣言し、ブラウザがそれに従って許可/ 拒否する。 APIキーの保管 : API keyを環境変数として与える。
16. 基準 評価のポイント Problem Perspective 課題設定の深さ、社会的意義、独自性 Solution Quality プロダクトの完成度、UI/UX、デモの実用性 AI Tech Depth モデル活用の工夫、技術的な挑戦 IO特性活用度 分散型GPUや低コスト性をどう活かしたか ハッカソンでの審査基準 https://www.notion.so/AI-2025-257b49fddb6180028debd9d43538aa66 【重要】Readmeやコードを AIに読み込ませて、この 評価のポイント に合 致するように、説明スライドや原稿を作成してください。 プロダクトの完成度を示すために、事前に画面録画で、動画を作成してください。
17. ハッカソンの審査に向けて AIに推薦文、強みを書いてもらおう あなたは「コードベース読解＋ピッチ編集」の専門家です。現在ワークスペースにあるリポジトリ（コードベース全体）を読み込み、実 装から事実を抽出して、審査4軸に最適化した日本語Markdownのピッチ骨子（ちょうど10枚）を作成してください。 # 4審査軸（必ず反映） - Problem Perspective（課題の深さ・社会的意義・独自性） - Solution Quality（完成度・UI/UX・デモ実用性） - AI Tech Depth（モデル活用の工夫・技術的挑戦） - IO特性活用度（分散GPU/低コスト/レイテンシの活かし方） # 出力仕様（厳守） - 10枚ちょうど、各スライド= 「タイトル」「要旨<=40字」「箇条書き3点(各<=16字)」 - スライド構成: 1 タイトル/タグライン 2 誰の何の痛みを解決するか？（定量） 3 社会的意義と独自性 4 解決アーキ概要（Mermaid構成図を1つ含める） 5 UI/UX見どころ 6 デモの流れ（Mermaidデータフロー図を1つ含める） 7 AI Tech Depth（プロンプト/評価/ストリーミング/フォールバック） 8 IO特性活用（分散GPU/コスト/レイテンシ、互換API） 9 Before → AfterのKPI（表）※推定可・式は脚注 10 次の一手・リスク対策・今後の開発目標 - 事実はコードから引用要約、推定は「※推定」で区別 - 余計な前置きや解説は不要。完成物のみ出力
18. 実装タイム： 機能追加と公開 URLの用意 まで仕上げ
19. 補足
20. 公開・リポジトリ GitHub データベース・ 認証情報保管 GitHub
21. https://lmarena.ai/leaderboard/webdev いまどのモデルを使うか？ LMAreana: 匿名のクラウドソースによる一対比較を通じて大規模言語モデル（ LLM）を評価する公開型ウェ ブプラットフォーム 2025年9月29日現在
22. VS Code のインストール https://code.visualstudio.com/
23. VS Code + Codex – OpenAI’s coding agent https://x.com/ctgptlb/status/1967795201994 527051