Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/Base/Base-Mini-Shooting-Game/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Base Mini Shooting Game

![](/metadata/Base-Mini-Shooting-Game/learn-banner.png)
67 changes: 67 additions & 0 deletions docs/Base/Base-Mini-Shooting-Game/section-1/lesson-0.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
---
title: "はじめに"
---

# Section 0: はじめに

## 🚀 このプロジェクトで学べること

このプロジェクトでは、Baseブロックチェーン上で動作する **Mini App「Mini Shooting Game」** を開発します。

**Farcaster** の投稿内で直接遊べるシューティングゲームを構築しながら、以下の技術を実践的に学びます。

- **Base**:
Coinbaseが開発した高速・低コストなEthereumレイヤー2ブロックチェーンの基礎知識
- **OP Stack**:
Baseの基盤技術であるOP Stackと、それが実現するSuperchain構想の理解
- **Farcaster**:
分散型SNSプロトコルと、その上で動作するMini Appの仕組み
- **MiniApp**:
MiniApp Kitを使ってオリジナルのミニアプリを公開する方法
- **スマートコントラクト**:
Remix IDEを使用したスマートコントラクトのデプロイとフロントエンドへの連携
- **Next.js**:
最新のWebフレームワークを使ったフロントエンド開発
- **Vercel**:
フロントエンドアプリケーションのデプロイとMini Appとしての公開

## 🎯 プロジェクトのゴール

このプロジェクトのゴールは、以下の画像のように、Farcasterのフィード上で直接起動し、プレイできるシューティングゲームを開発・公開することです。ゲームをプレイし、倒した敵の数に応じてNFTをミントする機能を実装します。

![](/images/Base-Mini-Shooting-Game/section-1/lesson-0/0.png)

![](/images/Base-Mini-Shooting-Game/section-1/lesson-0/1.png)

![](/images/Base-Mini-Shooting-Game/section-1/lesson-0/2.png)

## 📖 プロジェクトの構成

このプロジェクトは、以下のセクションで構成されています。

- **Section 1: 基礎知識と環境構築**
- Base、OP Stack、Farcasterなどの関連技術について学び、開発環境をセットアップします。

- **Section 2: スマートコントラクトの実装**
- ゲームのスコアを記録し、NFTをミントするためのスマートコントラクトをBase Sepoliaテストネットにデプロイします。

- **Section 3: フロントエンドアプリケーションの実装**
- Next.jsとOnchainKitを使い、ゲームのロジックとUIを構築します。

- **Section 4: デプロイとMini App化**
- 作成したアプリケーションをVercelにデプロイし、Farcaster上でMini Appとして公開します。

それでは、さっそく次のセクションから開発を始めていきましょう!

---

### 🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの`#base`で質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット
172 changes: 172 additions & 0 deletions docs/Base/Base-Mini-Shooting-Game/section-1/lesson-1.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
---
title: "Baseと周辺技術を学ぶ"
---

# Lesson 1: Baseと周辺技術を学ぶ

このレッスンでは、Mini App開発に不可欠なBaseブロックチェーンとその周辺技術について学びます。

## 🔵 Baseとは

[Base](https://www.base.org/)は、世界最大級のCEXであるCoinbaseによって構築された高速かつ低コストなEthereumのレイヤー2(L2)ブロックチェーンです。

Ethereumのメインネットワーク(レイヤー1)が混雑し、手数料が高騰する問題を解決するために生まれました。

簡単に言うと、Ethereumの「高速道路」のような存在で、メインのネットワークよりも速く、安く取引を処理できます。

**主な特徴**:

- **低コスト**:
Ethereumメインネットに比べて、ガス代(取引手数料)が大幅に安価です。
- **高速処理**:
トランザクションが迅速に承認されます。
- **EVM互換**:
Ethereumと同じ開発環境(Solidity, Remix, Hardhatなど)が利用でき、既存のdAppを容易に移行できます。
- **Coinbaseとの連携**:
Coinbaseが提供する豊富な開発者向けプラットフォーム(Coinbase Developer Platform)の恩恵を受けることができます。

より詳しい情報や最新の統計は、公式サイトやブロックエクスプローラーで確認できます。

- [Base公式サイト](https://www.base.org/)
- [Base Block Explorer (Basescan)](https://basescan.org/)

## LAYER-2 📜 レイヤー2とは

レイヤー2(L2)は、Ethereum本体(レイヤー1)のセキュリティを継承しつつ、スケーラビリティ(処理能力)を向上させるために構築されたセカンダリチェーンです。

L1の負荷を軽減するために、トランザクションの大部分をL2で処理し、その結果の要約だけをL1に記録します。これにより、高速かつ安価なトランザクションが実現します。

**代表的なL2技術**:

- **Optimistic Rollups**:
BaseやOptimismが採用するアプローチ。トランザクションは基本的に「正しい」と楽観的に(Optimistic)みなし、不正が疑われる場合にのみ検証(Fraud Proof)を行います。

- **ZK-Rollups (ZK-EVMs)**:
ゼロ知識証明(Zero-Knowledge Proof)を用いて、トランザクションの正しさを証明するアプローチ。StarkNetやzkSyncなどが採用しています。

各L2プロジェクトの状況は、[L2BEAT](https://l2beat.com/scaling/tvl)で詳しく確認できます。

## 🥞 OP Stackとは

[OP Stack](https://stack.optimism.io/)は、Baseが採用しているL2構築のためのオープンソースソフトウェアです。

元々はL2プロジェクトであるOptimismを動かすために開発されました。

OP Stackを利用することで、Optimism(OP Mainnet)やBaseのように、標準化され、相互運用性を持つL2チェーンを比較的容易に構築できます。

**主な特徴**:

- **EVM等価性**:
Ethereumとほぼ同じ開発体験を提供し、既存のツールやスマートコントラクトとの高い互換性を持ちます。

- **モジュール性**:
データ可用性、実行、シーケンシングといった各機能をモジュールとして組み合わせることで、柔軟なチェーン設計が可能です。

- **Superchain構想**:
OP Stackで構築されたチェーン同士が安全に通信しあう「Superchain」という未来のビジョンを支える基盤技術です。

## 🔗 Superchain構想とは

[Superchain](https://optimism.io/superchain)は、OP Stackを用いて構築された多数のL2チェーン(OP Chains)が、1つの巨大なチェーンのようにシームレスに連携するネットワーク構想です。

個々のチェーンは独立して動作しつつも、共通のブリッジとシーケンサーを共有することで、チェーン間での資産移動や通信が安全かつ効率的に行えるようになります。これにより、ユーザーは自分がどのチェーン上にいるかを意識することなく、エコシステム全体を利用できる世界の実現を目指しています。

## 🛠 Coinbase Developer Platform (CDP)

[Coinbase Developer Platform (CDP)](https://www.coinbase.com/cloud)は、BaseエコシステムでのdApp開発を加速させるための包括的なツール群です。

開発者がブロックチェーンアプリケーションを構築するために必要なツールが詰まった「工具箱」のような存在です。

**主な提供機能**:

- **Node Service (RPC)**:
高信頼性のRPCエンドポイントを無料で利用できます。

- **Smart Wallets**:
ユーザーが秘密鍵を管理することなく、パスキーなどでdAppを利用できるウォレットソリューションです。

- **Paymaster**:
dAppがユーザーのガス代を肩代わりする「ガスレス」な体験を実現します。

- **OnchainKit**:
ReactベースのUIコンポーネントやフックを提供し、フロントエンド開発を簡素化します。

- **Faucet**:
Base Sepoliaテストネットで利用するテスト用ETHを簡単に入手できます。

## 🦋 Farcasterとは

[Farcaster](https://www.farcaster.xyz/)は、分散型のソーシャルネットワークプロトコルです。

TwitterやInstagramのように投稿やフォローができますが、最大の違いは**ユーザーが自身のデータを完全に所有できる**点にあります。

**主な特徴**:

- **データの所有権**:
あなたの投稿、フォロー情報、プロフィールはあなた自身のものです。特定の企業に依存しません。

- **アプリケーションの自由**:
同じFarcasterアカウントを使って、様々なクライアントアプリ(例: Warpcast, Supercast)からアクセスできます。

- **検閲耐性**:
中央管理者がいないため、一方的にアカウントが削除されたり、投稿が消されたりするリスクが低いです。

## 📱 Farcaster WalletとConnected App

Farcasterを利用するには、まず**Wallet App**でアカウントを作成します。

これはあなたのアカウントを安全に管理する「金庫」のようなものです。

一度アカウントを作成すれば、様々な**Connected App**(接続アプリ)を追加して、異なるUIや機能でFarcasterを楽しむことができます。

- **Wallet App**:
アカウントの作成、復元、接続アプリの管理など、所有者としての全権限を持ちます。公式クライアントである[Warpcast](https://warpcast.com/)が代表的です。

- **Connected App**:
投稿や閲覧など、Wallet Appから許可された機能のみを実行します。

この仕組みにより、万が一悪意のあるConnected Appを許可してしまっても、アカウント自体が乗っ取られるリスクを最小限に抑えることができます。

## 🆔 Farcaster Accountの仕組み

Farcasterのアカウントは、いくつかの要素で構成されています。

- **Farcaster ID (fid)**:
各ユーザーに割り当てられる一意の番号。

- **ユーザー名**:
`@username`形式の表示名。後から変更可能です。

- **Custody Address**:
アカウントの所有権を持つEthereumアドレス。アカウントの譲渡や復元に使用します。

- **App Keys**:
各Connected Appが投稿などの操作を行うために使用する鍵。

- **Recovery Address**:
Custody Addressを紛失した際のバックアップ用アドレス。

また、Farcasterでは投稿などのデータを保存するために、年間約7ドルでストレージユニットを借りる必要があります。

## ✨ Mini Appとは

Mini Appは、Farcasterの投稿(Cast)内で直接起動・実行できるアプリケーションです。

ユーザーは外部サイトに遷移したり、アプリをダウンロードしたりすることなく、ソーシャルフィード上でシームレスにdAppを体験できます。

今回のプロジェクトで開発するシューティングゲームも、このMini Appとして実装します。

Next.jsで構築した既存のWebアプリケーションをMini App化するためのSDKとして、Coinbaseが提供する**OnchainKit**の一部である**MiniAppKit**を使用します。

---

### 🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの`#base`で質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット
77 changes: 77 additions & 0 deletions docs/Base/Base-Mini-Shooting-Game/section-1/lesson-2.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
---
title: "環境構築"
---

# Lesson 2: 環境構築

このレッスンでは、Mini App開発に必要なツールをセットアップし、プロジェクトの基盤を整えます。

## 🛠 必要なツール

開発を始める前に、以下のツールがインストールされていることを確認してください。

- [Node.js](https://nodejs.org/ja/)(バージョン23以上)
- [pnpm](https://pnpm.io/ja/installation)
- [Git](https://git-scm.com/)

## 📂 プロジェクトのセットアップ

まず、本プロジェクトのスターターコードをクローンし、依存関係をインストールします。

ターミナルを開き、以下のコマンドを実行してください。

```bash
git clone https://github.com/unchain-tech/Base-Mini-Shooting-Game.git
cd Base-Mini-Shooting-Game
pnpm install
```

これにより、開発に必要なライブラリがすべてインストールされます。

## 🦋 Farcasterアカウントの作成

Mini Appをテスト・公開するには、Farcasterのアカウントが必要です。

まだ持っていない場合は、以下の手順で作成してください。

1. スマートフォンに[Warpcast](https://warpcast.com/)アプリをダウンロードします。

![](/images/Base-Mini-Shooting-Game/section-1/lesson-2/0.png)

2. アプリの指示に従い、アカウントを作成します。
- アカウント作成には少額の費用(年間約7ドル)がかかります。
- アカウントの復元に必要な**リカバリーフレーズ**は、必ず安全な場所に保管してください。

## 🔑 Coinbase Developer Platform (CDP) APIキーの作成

次に、プロジェクトで利用するCDPのAPIキーを作成します。このキーは、フロントエンドからスマートコントラクトを操作するために必要です。

1. [Coinbase Developer Platform](https://www.coinbase.com/cloud)にアクセスし、Coinbaseアカウントでサインインします。

2. ダッシュボードの左側メニューから「**Build on Base**」を選択します。

3. 「**API Keys**」タブに移動し、「**Create API Key**」ボタンをクリックします。

4. キーの名前(例: `Mini-Shooting-Game-Key`)を入力し、「**Create API Key**」をクリックします。

5. 作成された**Public Key**が表示されます。このキーは後でプロジェクトの環境変数として設定するため、コピーして安全な場所に保存しておいてください。

> ⚠️ **注意**
> このキーはフロントエンドで使用される公開キーであり、秘密キーではありません。第三者に見られても直接的な資金の損失にはつながりませんが、取り扱いには注意してください。

これで開発に必要なすべての環境構築が完了しました。

次のセクションでは、いよいよスマートコントラクトのデプロイに取り掛かります。

---

### 🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの`#base`で質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット
Loading