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

【オンライン開催】大阪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 1
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 1｜入門：アイデアをMVPまで形にする 1. 「だれの・どんな課題を・どう解決するか」をユーザー視点で整理（AI との壁打ち含む） 2. 簡易仕様（ミニPRD）を作成（必要な画面・動き、エラー時の振る舞 いまで） 3. 基本フローのデモ実装（フォーム → サーバ経由で処理 → 画面表 示） 4. io.intelligence APIの組み込み方（まずはモック→差し替え可能な 構成） 5. 各自の実装タイム：最小構成のプロトタイプ（MVP）を完成
10. フォローアップ勉強会 : Day 1 の内容 • 細かいTipsよりも、開発の大枠の話をします。 ◦ AI駆動開発の一連の流れ : 発想→プロンプト →実装→評価 • AI が得意なこと、出来ることをやりましょう。 ◦ e.g. AIで生成しやすいコード、AIが知っているシステム • AI駆動開発に初めて取り組む人は、ゼロベースで実装しないこ と。事前準備が非常に大切！！ ◦ ユーザーに価値を提供できる最小限のプロトタイプ（MVP）を 定義すること。 ◦ 3〜5文程度で、MVPの内容を言語化する。
11. フォローアップ勉強会 : Day 1 の内容 • 3〜5文でMVPの定義 ◦ 【目的】何に使うか？何に役立つか？ ◦ 【機能①】 何ができる？何の機能があるか？ ◦ 【機能②】何ができる？何の機能があるか？ ◦ 【実装方法】 どう実装するか？Webアプリ？スマホ？言語？ （HTML&Javascriptが基本） ◦ 【AI要素】 今回は、IO Intelligence APIの利用が必須 ◦ （opt. 1） 対象ユーザー前提、データの入出力 ◦ （opt. 2） “何が必須か？・何はやらないか（スコープ外）”
12. フォローアップ勉強会 : Day 1 の内容 • 穴埋め例 ◦ 【目的】 初学者の「AI×開発」の初体験コストを最小化し、短時間で“で きた”を作って自信と継続を生む。 ◦ 【機能①】 学習者用：課題テンプレ／プロンプト補助（例・良い/悪い例） ／コード実行／自動採点＆簡易解説。 ◦ 【機能②】 講師用：受講者の進捗・エラー箇所サマリ／一斉メッセージ ／課題テンプレ配布。 ◦ 【実装方法】 Webアプリ（PC/スマホ対応）。フロント： Next.js or SvelteKit、バック： Cloudflare Workers or Vercel Functions、 コード実行はサンドボックス（Pyodide or 服务器側コンテナの限定 API）。ストレージ：Supabase/Firestore。最初はGitHub/OAuthログイ ン無しの匿名IDでOK。
13. AI駆動開発の例 クラウド版で試作 (Web) AIツール AI駆動開発用 プロンプト作成 ローカル開発・最適化 （ローカル版） を参考に、手書き推奨！ bolt.new
14. 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
15. 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を環境 にすることをお忘れなく！！）
16. Day 1 の ハンズオンタイム AI駆動開発用 プロンプト作成 を参考に、手書き推奨！ 要件整理 → プロンプト設計 （“何を作るか”を言語化する工程名に）。 まずは手書き→箇条書き→AIに投げるを繰り返す AI出力はそのまま使わないことがポイント
17. Day 1 の ハンズオンタイム クラウド版で試作 (Web) ・入力：先ほど作成したプロンプト草案 ・出力：動くドラフト制作 ・軽めに、UIや機能を修正・ダウンロード
18. Day 1 の ハンズオンタイム ローカル開発・最適化 （ローカル版） ・入力：クラウド試作、要件の差分を明示 ・出力：テスト、一段上のUXを目指す ・外部公開
19. 公開・リポジトリ GitHub データベース・ 認証情報保管 GitHub
20. 続きは、Day 2｜実践：機能追加・設計図作成・安全に公開 1. MVPに価値ある一手（例：履歴保存・認証・UI改善・外部API連携） を追加 2. システム構成図／データフロー図で、仕組みとデータの通り道を見 える化 3. 公開手順（ホスティング／CORSの考え方／簡易監視の入れ方） 4. APIキーの安全管理（環境変数・Secretsの使い方、漏えい時の対 応） 5. 各自の実装タイム：機能追加と公開URLの用意まで仕上げ
21. 補足
22. https://lmarena.ai/leaderboard/webdev いまどのモデルを使うか？ LMAreana: 匿名のクラウドソースによる一対比較を通じて大規模言語モデル（ LLM）を評価する公開型ウェ ブプラットフォーム 2025年9月29日現在
23. VS Code のインストール https://code.visualstudio.com/
24. VS Code + Codex – OpenAI’s coding agent https://x.com/ctgptlb/status/1967795201994 527051
25. ベストプラクティス • AIが得意なこと、出来ることをやることが最も効率がいい • 大前提、AIで生成しやすいコードやAIが知っているシステムを作る ◦ 同会の目的 : AIが得意なこと、できることを実践で理解する • 初心者はゼロから実装を組まない ◦ ドラフト（要件定義書、仕様書、リサーチ結果、資料など）を配置し、AIに熟読さ せる（/init ultrathink を実行する）。 要件定義書 (What): 何をどうシステム化するのか、ドキュメント形式で可視化したもの 仕様書 (How): 要件定義書を元にシステムの詳細な作り方を記述したもの • MCP (Model Context Protocol) は必ず覚えましょう ◦ MCP経由じゃ無いと、AIモデルが不完全燃焼する。