Avalanche + AI Development
Hands-on Demo
Gemini CLI を使って、Avalanche ブロックチェーン上で動く
シンプルな 2D グリッドゲームを作成します
入門編 + Claude Code 付録
Avalanche Game Build Tool Kit
Phase 0
GitHub Codespaces
💡 Codespaces とは？
GitHub が提供するクラウド開発環境。ブラウザ上で VS Code が動作し、ローカル環境構築が不要！
手順
1
上記 URL にアクセス → 「Code」ボタンをクリック
2
「Codespaces」タブを選択
3
「Create codespace on main」をクリック
4
ブラウザで VS Code が起動するまで待つ（1-2分）
Phase 0
Core Wallet インストール
💡 Core Wallet とは？
Avalanche 公式ウォレット。MetaMask より Avalanche に最適化。
C-Chain（EVM互換）と X-Chain/P-Chain の両方に対応！
インストール手順
1. Chrome ブラウザを開く
2. core.app/download にアクセス
3. 「Chrome」を選択
4. 拡張機能をインストール
5. ウォレットを作成/復元
MetaMask じゃダメ？
MetaMask でも OK！
でも Core Wallet は：
✓ Avalanche 専用設計
✓ ネットワーク設定不要
✓ Subnet 対応
今日作るもの
10x10 グリッドゲーム
← → ↑ ↓ で移動
Avalanche Blockchain
Block #123
x: 5, y: 3
Tx: 0x...
座標をブロックチェーンに保存！
デモの流れ（約30分）
0
準備
Codespaces
Wallet
Gemini CLI
5分
1
スキル導入
AIに専門知識
を追加
2分
2
コントラクト
AIが Solidity
コードを生成
5分
3
デプロイ
Fuji テストネット
に公開
5分
4
アプリ作成
React ゲーム
をAIが生成
10分
Gemini CLI とは？
Google の Gemini AI をターミナルから直接操作できるコマンドラインツール
ファイル編集、シェルコマンド実行、Web アクセスなどの機能を備えた AI コーディングアシスタント
📁
ファイル操作
read/write/edit
で自動編集
⚡
シェル実行
run_shell_command
でコマンド実行
🌐
Web アクセス
web_fetch で
ドキュメント取得
🎯
スキル機能
専門知識を
オンデマンド追加
NEW
Gemini 3 Pro/Flash 対応、MCP サーバー連携、サンドボックス実行
💡 Claude Code や Cursor と同じ「AIコーディングアシスタント」の仲間
Phase 0
環境の動作確認
💡 Codespaces 起動後、環境が正しくセットアップされているか確認
npm run dev
確認ポイント
✓
ターミナルに Local: http://localhost:3000 と表示されれば OK
✓
ポップアップで「Open in Browser」が表示されたらクリック
!
問題があれば npm ci を実行して依存関係を再インストール
⚡ 起動確認できたら Ctrl+C で停止し、次の手順へ進む
Phase 0
Gemini CLI 認証
認証方法は3つ（今回は Google OAuth を使用）
推奨
Google OAuth
無料枠あり、最も簡単
gemini → "Login with Google"
Gemini API Key
モデル選択可能、有料枠
export GEMINI_API_KEY="..."
Vertex AI
エンタープライズ向け
export GOOGLE_GENAI_USE_VERTEXAI=true
Google OAuth の手順（公式ドキュメントより）
$ gemini # ターミナルで実行
# 1. "Login with Google" を選択
# 2. ブラウザで Google アカウント認証
# 3. 認証完了 → CLI に自動で戻る
Gemini CLI 基本操作
起動
gemini
対話モードで起動（初回は認証が必要）
gemini --resume latest
前回のセッションを再開
基本操作
Ctrl + C
セッションを終了
ESC
中断
Enter
メッセージを送信
ツール実行の確認
Gemini がファイル編集やコマンド実行をする前に確認が表示されます:
y = 許可
n = 拒否
a = 今後すべて許可
💡 困ったら日本語で質問するだけ！ Gemini が適切なツールを選んで実行します
スラッシュコマンド一覧
💡 対話モード内で / から始まるコマンドで様々な操作が可能
基本
/help
ヘルプ表示
/tools
利用可能ツール一覧
/model
モデル選択
/settings
設定エディタ
/theme
テーマ変更
/clear
画面クリア
セッション管理
/resume
セッション再開
/chat save
保存
/chat resume
復元
/chat share
エクスポート
/compress
トークン節約
/rewind
巻き戻し
スキル・拡張
/skills list
スキル一覧
/skills reload
再読み込み
/memory show
コンテキスト表示
/mcp
MCP サーバー
/extensions
拡張機能
/restore
ファイル復元
GEMINI.md コンテキストファイル
💡 プロジェクト固有の指示を AI に伝える仕組み（Claude の CLAUDE.md と同様）
コーディングスタイル、API ガイドライン、依存関係ルールなどを設定可能
読み込み優先順位（階層構造）
1
~/.gemini/GEMINI.md
グローバル（全プロジェクト共通）
2
.gemini/GEMINI.md
プロジェクトルート
3
src/GEMINI.md
サブディレクトリ（モジュール固有）
記述例
# Project: My App
## General Instructions
- Follow existing coding style
- Add JSDoc comments
- Use TypeScript 5.0+
## Coding Style
- 2 spaces for indentation
- Interface names with `I` prefix
- Always use strict equality
Phase 1
スキル（Skills）とは？
💡 スキル = AI に「専門知識」をオンデマンドで追加する仕組み
ゲーム開発、API 設計など特定タスクに最適化された振る舞いを与えられます
スキルなし
🤖
「グリッドゲーム？
えーと、どう作るかな...」
+スキル
スキルあり
🎮🤖
「CSS Grid で10x10作って、
キーボードイベントで移動...」
今日使うスキル
• react-css-grid-game-rendering → グリッドゲーム開発の専門知識
💡 補足: エージェント vs スキル（Claude Code）
Claude Code では「エージェント」と「スキル」は異なる概念です
🎯 スキル (Skills)
• /plan, /tdd などスラッシュコマンド
• メインの Claude が実行
• ユーザーが明示的に呼び出す
→ 「手順書」のイメージ
🤖 エージェント (Agents)
• Task ツールで自動起動
• 独立したサブプロセス
• Claude が状況に応じて起動
→ 「専門家チーム」のイメージ
スキルの例
/plan /tdd /code-review
エージェントの例
planner code-reviewer build-error-resolver
📝 Gemini CLI では両方「スキル」として扱われます
NEW
スキルの入手先
💡 Skill-Creator (Gemini標準) / /skill-create (Anthropic) で相互変換可能
スキルファイルをダウンロードして変換ツールで利用可能
コミュニティリポジトリ
200+
AI コーディングアシスタント向け公式キュレーション
626+
最大のコミュニティコレクション
🔌 Gemini CLI Extensions
342+
MCP, Skills, Hooks, Context Tools など
DB, Cloud, AI/ML, 生産性ツールなど多数
※サードパーティ製。セキュリティ要確認
公式プラグイン
Anthropic 公式（Claude Code プラグイン内蔵）
agent-sdk-dev | code-review | commit-commands | feature-dev | frontend-design
hookify | plugin-dev | pr-review-toolkit | security-guidance | claude-opus-4-5-migration
※ コードレビュー、PRレビュー、セキュリティガイダンス、フロントエンド設計などをカバー
Phase 1
スキルのインストール
# ダウンロードしたファイルをプロジェクトルートに配置
mv ./docs/hands-on/react-css-grid-game-rendering.skill .
# スキルをインストール
gemini skills install ./react-css-grid-game-rendering.skill --scope workspace
Step 2: Gemini CLI 内でリロード
gemini # CLI を再起動
/skills reload # スキルを再読み込み
/skills list # インストール確認
スコープ（保存場所）
--scope workspace
→ .gemini/skills/ に保存
→ このプロジェクトのみ
--scope user (デフォルト)
→ ~/.gemini/skills/ に保存
→ 全プロジェクト共通
その他のスキル管理コマンド
gemini skills list # 一覧
gemini skills uninstall # 削除
gemini skills enable/disable # 有効/無効
Phase 2
スマートコントラクト作成
💡 スマートコントラクト = ブロックチェーン上で動く「自動実行プログラム」
データの保存・取得ルールを定義。一度デプロイすると改ざん不可能！
Gemini に依頼するプロンプト
プレイヤーの 10x10 座標を保存・取得
できるコントラクトを作成して。
要件:
- 位置を初期化する関数
- 1歩移動する関数（上下左右）
- 座標は 0-9 の範囲に制限
出力先:
- Solidity: contracts/PositionTracker.sol
- ABI: .env.local.example に追記
Gemini がやること
📄 Solidity コード生成
💾 ファイルに保存
📋 ABI を抽出
✅ 動作確認
Phase 3
コントラクトをデプロイ
💡 Fuji テストネット = Avalanche の「練習場」
本番（Mainnet）と同じ仕組み。無料のテスト AVAX を使って開発・テストできます
1
テスト AVAX 取得
2
Remix でデプロイ
3
環境変数設定
cp env.local.example .env.local
アドレスを設定
Phase 4
アプリ作成（メイン！）
💡 タスク管理を AI にさせる
Gemini にフェーズ分割でタスクを管理させ、段階的に検収しながら進められます
Gemini に依頼するプロンプト
10x10 の 2D グリッドゲームを作成して。
要件:
- react-css-grid-game-rendering スキルを使用
- 日本語で docs/task.md にタスクリストを生成（5フェーズ）
- タスク完了ごとに task.md にチェックを入れる
- フェーズごとにユーザー検収を促す
- キーボード（↑↓←→）でプレイヤーを移動
- 移動時にコントラクトに座標を書き込む
参照ファイル:
- PositionTracker.sol
- env.local.example（コントラクトアドレス・ABI）
Phase 5
動作確認
1
サーバー起動
npm run dev
ターミナルで実行
2
ブラウザ
localhost:3000
Wallet 接続
3
ゲーム
← → ↑ ↓
矢印キーで移動
4
確認
Approve
Tx を承認
🎉 座標がブロックチェーンに保存されることを確認！
リロードしても位置が保持されていれば成功です
🎉 デモ完了！
作ったもの
PositionTracker.sol
座標保存コントラクト
Grid Game UI
React + CSS Grid
Wallet Integration
Core Wallet + ethers.js
学んだこと
1
Gemini CLI で AI 駆動開発
2
スキルで専門知識を追加
3
Avalanche Fuji でデプロイ
4
フェーズ分割でタスク管理
💡 ポイント
AI（Gemini CLI）+ 専門知識（Skills）+ ブロックチェーン（Avalanche）
= 短時間で本格的な dApp が作れる！
📚 クイックリファレンス
Gemini CLI コマンド
# 起動オプション
gemini
gemini -m gemini-2.5-flash
gemini --resume [index/UUID]
gemini --sandbox
gemini --yolo
# スラッシュコマンド
/help /tools /model /settings
/skills list|reload
/memory show|refresh|add
/chat save|resume|share
/compress /rewind /restore
/mcp /extensions
# スキル管理
gemini skills install <url>
gemini skills uninstall <name>
gemini skills enable|disable
参考リンク
Core Wallet
Fuji Faucet
Remix IDE
Gemini CLI Docs
Skills Repo
Cursor Directory
APPENDIX
Claude Code
Anthropic の AI コーディングアシスタント
Gemini CLI との比較 & 実践ガイド
Claude Code とは？
Anthropic 公式の AI コーディングアシスタント CLI ツール
ファイル編集、コード生成、テスト実行、Git 操作などをターミナルから Claude と対話しながら実行
📝 CLAUDE.md
プロジェクトのルール・指示を定義
使い方:
プロジェクトルートに配置で自動読込
./CLAUDE.md
.claude/rules/*.md
⚡ Commands
/plan /tdd などカスタムコマンド
使い方:
.md を置くとコマンド化
.claude/commands/plan.md
→ /plan で実行可能に
🤖 Agents
専門特化サブエージェント
使い方:
.md を置くと Task で呼出可能
.claude/agents/planner.md
→ 並列実行・専門タスク委任
🎣 Hooks
ツール実行前後の自動処理
使い方:
settings.json に定義
.claude/settings.json
→ 自動フォーマット、型チェック等
🎯 Skills
再利用可能なワークフロー
使い方:
.skill を置くと自動有効化
.claude/skills/*.skill
→ Gemini と相互変換可能
🔌 MCP
外部サービス連携
使い方:
JSON に設定で接続
~/.claude.json (mcpServers)
→ Playwright, Context7 等
Gemini CLI vs Claude Code 比較
機能
Gemini CLI
Claude Code
備考
コンテキストファイル
GEMINI.md
CLAUDE.md
同じ仕組み
スキル
SKILL.md
SKILL.md
変換可能
フック
(なし)
PreToolUse / PostToolUse
Claude のみ
MCP サポート
✓
✓
同じ
スラッシュコマンド
/skills, /memory 等
/plan, /tdd 等
異なるコマンド
エージェント
(スキルで実現)
.claude/agents/
Claude は専用機能
ルール
(GEMINI.md)
.claude/rules/
Claude は専用機能
💡 Skill-Creator (Gemini標準) / /skill-create (Anthropic) で相互変換可能
Claude Code Hooks システム
💡 Hooks = ツール実行の前後に自動実行されるイベント駆動スクリプト
セキュリティチェック、フォーマット、ログ記録などを自動化
PreToolUse
ツール実行前
ファイル書き込み前に
セキュリティチェック
PostToolUse
ツール実行後
編集後に Prettier で
自動フォーマット
Stop
セッション終了時
console.log の
残留チェック
SessionStart
セッション開始時
プロジェクト
コンテキスト読み込み
PreToolUse フック例（JSON）
{
"PreToolUse": [{
"matcher": "Write|Edit",
"hooks": [{ "type": "prompt", "prompt": "Validate file write safety. Check: system paths, credentials. Return approve or deny." }]
}]
}
Claude Code スラッシュコマンド
💡 .claude/commands/ にカスタムコマンドを定義可能
開発ワークフロー
/plan
実装計画を作成
/tdd
テスト駆動開発
/code-review
コードレビュー
/build-fix
ビルドエラー修正
/e2e
E2E テスト生成
/verify
検証ループ
コード品質
/test-coverage
カバレッジ分析
/refactor-clean
不要コード削除
/security-review
セキュリティチェック
/update-docs
ドキュメント更新
/update-codemaps
コードマップ更新
/checkpoint
状態保存
システム
/help
ヘルプ表示
/mcp
MCP サーバー管理
/context
コンテキスト管理
/clear
コンテキストクリア
/skill-create
スキル作成
/orchestrate
マルチエージェント
Claude Code エージェント
💡 各エージェントは必要最小限のツールだけを持つ = 高速で正確
.claude/agents/ にカスタムエージェントを定義可能
planner
実装計画・要件分析
architect
システム設計・アーキテクチャ
tdd-guide
テスト駆動開発ガイダンス
code-reviewer
コード品質・セキュリティ
security-reviewer
脆弱性分析
build-error-resolver
ビルドエラー診断・修正
e2e-runner
Playwright E2E テスト
refactor-cleaner
デッドコード削除
doc-updater
ドキュメント更新
使用例
# エージェントを明示的に呼び出す
security-reviewer エージェントで packages/avalanche-wallet のセキュリティをチェックして
Claude Code 実践ワーク
💡 このリポジトリに実践ワークが含まれています → docs/work.md
1
/plan コマンド
実装計画を作成し、承認後に実装
2
/tdd コマンド
RED→GREEN→REFACTOR サイクル
3
/code-review
CRITICAL/HIGH/MEDIUM/LOW で評価
4
Playwright + TDD
E2E テスト駆動で UI 実装
5
Playwright MCP
ブラウザ自動操作でデバッグ
6
Context7 MCP
最新ドキュメントをリアルタイム取得
📚 参考リソース
🔌 Gemini CLI Extensions
342+ のコミュニティ製 Extension
MCP, Skills, Hooks, Context Tools など
※サードパーティ製。セキュリティ要確認
🏆 Claude Code 設定集（ハッカソン優勝）
Anthropic x Forum Ventures 優勝者の設定
↑ 日本語解説記事（Zenn）
🎮 Phaser 2D GameDev + Agent Skills
Oak Woods Platformer サンプル（Phaser.js）
🖼️ PixiJS + Avalanche 実装例
📁 avalanche-build-games-tool-kit
高速 2D WebGL レンダリングエンジン
📦 公式スキル・プラグイン
Anthropic 公式 Claude Code Plugins
Cursor Directory
💡 Skill-Creator (Gemini標準) / /skill-create (Anthropic) で相互変換可能
Thank You!
Avalanche + AI Development Hands-on
Avalanche Game Build Tool Kit
#AvalancheAI #GeminiCLI #ClaudeCode
🎨 Bonus: Gemini + frontend-design
frontend-design スキルでプロ品質の UI デザインを生成
スキル有効化
# Step 1: GitHub からダウンロード
github.com/CobaltSato/
react-grid-game-rendering-skill
# Step 2: スキルインストール
gemini skills install \
./avax-like-frontend-design.skill \
--scope workspace
/skills list # 確認
デザイン仕上げプロンプト例
avax-like-frontend-design スキルを使って、
グリッドゲームの UI をプロ品質に仕上げて。
要件:
• Avalanche ブランドカラー (#E84142)
• グリッドにホバーエフェクト
• プレイヤーにアニメーション
• ダークモード基調
期待される改善
Before
• カラー: デフォルト
• グリッド: 単純な border
• プレイヤー: 静的な表示
• ボタン: 基本的なスタイル
After ✨
• カラー: Avalanche ブランドカラー
• グリッド: グラデーション + ホバー効果
• プレイヤー: パルスアニメーション
• ボタン: グラスモーフィズム / ネオン効果