SOLANA WORKSHOP #2

第二回

ブロックチェーンプログラムの作成

大学生向け 画面つき操作ガイド　／　画面の赤枠・オレンジ枠のとおりに進めれば完成します

事前準備

① ウォレットアカウント作成

② Claude 環境セットアップ

③ プログラム作成（途中で休憩）

④ 自由につくってみる

2026年10月　Solana 勉強会

はじめに

本日のスケジュール

17:00 ~ 17:10

挨拶

ご挨拶

17:10 ~ 17:20

事前準備

Phantom ウォレット・VS Code の導入、勉強会資料のダウンロード

17:20 ~ 17:35

① ウォレットアカウント作成

アドレスの共有、devnet の SOL 取得

17:35 ~ 17:50

② Claude 環境セットアップ

Claude Code のインストールと API キー設定

17:50 ~ 18:00

③ プログラム作成（前半）

Claude Code にプロンプトを投げてアプリを作り始める

18:00 ~ 18:30

休憩（生成待ち）

ミニハッカソンの説明・チームづくり／生成はそのまま進行

18:30 ~ 18:50

③ プログラム作成（後半）

できたアプリを起動して、実際に SOL を送り合う

18:50 ~ 19:00

④ 自由につくってみる

③ を改造、または新しいアプリを作成して公開

補足

事前準備が終わっていない人がいても大丈夫です。時間が足りない場合は ④ を省略し、③ の送り合いまでを全員で完走します。

はじめに

2

はじめに

この資料でやること（全体の流れ）

Solana の devnet 上で動く「SOL を送り合う Web アプリ」を自分で作り、公開するまでの流れです。

準

事前準備

目安 当日前

Phantom ウォレットと VS Code を導入し、勉強会資料をダウンロードする

1

① ウォレットアカウント作成

目安 15分

ウォレットを作り、アドレスをスプレッドシートで共有。devnet の SOL を受け取る

2

② Claude 環境セットアップ

目安 15分

Claude Code をインストールし、配布された API キーを設定する

3

③ プログラム作成

目安 30分

Claude Code に指示して送金アプリを作り、実際に SOL を送り合う

4

④ 自由につくってみる

目安 10分

③ を改造、または新しいアプリを作成し、GitHub Pages で公開する

POINT

③ まで終われば「自分のアプリで実際に SOL を送金できた」状態になります。④ は時間がある場合のみ進めます。

はじめに

3

はじめに

この資料の見方（画面の枠と番号のルール）

各手順のスクリーンショットには、操作する場所を直接書き込んでいます。次の3つのルールだけ覚えてください。

Create account

赤わく

クリックする場所

ボタン・タブ・リンクなど。赤い枠の中を押してください。

ここに入力

オレンジわく

入力する場所／確認する場所

文字を入力する欄、チェックを入れる欄、表示を確認する場所です。

1

2

3

①②③

操作する順番

1枚の画面に複数の操作があるときは、番号の小さい順に操作します。

補足

画面のデザインはサービス側の更新で変わることがあります。枠の位置が実際の画面と違う場合は、枠の中に書かれたボタン名・項目名を目印に探してください。

スライド左のテキストは操作の説明、番号はスクリーンショットの枠の番号と対応しています。

はじめに

4

はじめに

使うサービスとリンク一覧

本日使うのは次の6つです。スプレッドシートと Luma は当日ずっと使うので、ブラウザのタブに開いたままにしてください。

サービス

用途

URL

ウォレットアドレス共有シート

アドレスの共有・送り合いの相手を確認

https://docs.google.com/spreadsheets/d/1-MZBlA4Bka9nRtVZnHVn2KUz0k6xWqtjnw5wKtfxZwU/edit?usp=drive_link

Luma（勉強会ページ）

勉強会資料のダウンロード

https://luma.com/lmy1gn6j

Phantom

Solana のウォレット（ブラウザ拡張機能）

https://phantom.com

Solana Devnet Faucet

練習用の devnet SOL を受け取る

https://faucet.solana.com

Claude Code

プログラムの生成（API キーは事前メールで配布）

https://claude.ai

Visual Studio Code

コードの編集とターミナル

https://code.visualstudio.com

POINT

Claude の API キーはこの後メールで受信します。当日すぐメールが送信できるよう、準備をしておいてください。ブラウザは Chrome を推奨します（Microsoft Edge でも進められます）。

はじめに

5

BEFORE THE WORKSHOP

事前準備（当日はじめの10分で進めます）

Phantom ウォレットの導入と Visual Studio Code の導入を行います。

事前に終わっている人は、① ウォレットアカウント作成まで進めて待っていてください。

Phantom ウォレット

Visual Studio Code

勉強会資料のダウンロード

事前準備

6

事前準備

事前準備チェックリスト

次の4つがそろっていれば事前準備は完了です。終わっていない項目は、このあとのページで一緒に進めます。

Claude の API キーを受け取っている（事前メール）

必須

Phantom ウォレットをブラウザに追加し、ウォレットを作成している

必須

Visual Studio Code をインストールしている

必須

Luma のページから勉強会資料をダウンロードしている

推奨

注意

Phantom のリカバリーフレーズ（秘密の12単語）は、他人に見せない・送らない・写真に撮らせないでください。

本日扱うのは devnet（練習用ネットワーク）の SOL です。金銭的な価値はありません。

事前準備

7

事前準備

勉強会資料をダウンロードする

本日の資料と、送り合いで使うスプレッドシートは次の2つのリンクから開きます。

Luma（勉強会ページ）

本日の資料をダウンロードします。

https://luma.com/lmy1gn6j

ウォレットアドレス共有シート

自分のアドレスを記入し、送り先を確認します。

https://docs.google.com/spreadsheets/d/1-MZBlA4Bka9nRtVZnHVn2KUz0k6xWqtjnw5wKtfxZwU/edit?usp=drive_link

POINT

スプレッドシートは当日ずっと使います。ブラウザのタブに開いたままにしておいてください。リンクが開けない場合は、講師・サポートに声をかけてください。

事前準備

8

事前準備

Claude Code 用の API キーを受け取る

Claude Code を動かすには API キーが必要です。運営のアドレスにメールを送ると、1人につき1つのキーが返送されます。当日の受付までに送っておいてください。

1

宛先

solana.devrel.jp@gmail.com

このアドレスにメールを送るだけです

2

件名か本文

必ず「API」と書いてください

書き忘れると返送されません

3

受け取り

1人1キーです

返信メールでキーが届きます

注意

キーのルール：有効期限 2026年11月30日 11:00 ／ 利用上限 月10ドル ／ 上限で止まったら運営へ連絡 ／ 他の人と共有しない

メールが届かないときは、会場のスタッフに声をかけてください。

事前準備

9

事前準備

APIキー 1/4

Gmail を開く

ブラウザで Google にログインした状態で、右上の「Gmail」をクリックします。

1

右上の「Gmail」をクリック

1

事前準備

10

事前準備

APIキー 2/4

新しいメールを作る

受信トレイが開きます。左上の「Compose（作成）」を押して、新しいメールの作成画面を出します。

1

左上の「Compose」をクリック

POINT

受信トレイの中身はぼかしています。自分の画面では、ここに届いているメールが並びます。

1

事前準備

11

事前準備

APIキー 3/4

宛先と件名を入れて送る

宛先に運営のアドレス、件名に「API」と入れて送信します。本文は空でも構いません。

1

宛先に solana.devrel.jp@gmail.com を入力

2

件名に「API」と入力

3

左下の「Send」をクリック

1

2

3

事前準備

12

事前準備

APIキー 4/4

届いたメールで API キーを確認する

しばらくすると「【Solana Student Bootcamp】Claude Code用APIキーの配布」という返信が届きます。このメールは当日まで消さないでください。

1

件名が「Claude Code用APIキーの配布」であることを確認

2

本文の「APIキー：」の行がキー本体（長い文字列）

3

有効期限と利用上限を確認

注意

キーは他の人に教えないでください。画面共有のときはこのメールを閉じておきましょう。

1

2

3

事前準備

13

事前準備

Phantom 1/10

Phantom：Chrome ウェブストアから追加する

Chrome で下の URL を開き、赤枠の「Chrome に追加」を押します。

1

アドレス欄に以下のURLを入力

2

右側の「Chrome に追加」をクリック

1

2

事前準備

14

https://chromewebstore.google.com/detail/phantom/bfnaelmomeimhlpmgjnjophhpkkoljpa?hl=ja

事前準備

Phantom 2/10

Phantom：拡張機能の追加を許可する

確認のダイアログが出ます。「拡張機能を追加」を押すとインストールが始まります。

1

ダイアログの「拡張機能を追加」をクリック

注意

「キャンセル」を押すと追加されません。間違えた場合は、もう一度「Chrome に追加」からやり直してください。

1

事前準備

15

事前準備

補足

【補足】Microsoft Edge を使う場合

Edge で Chrome ウェブストアを開くと「拡張機能の入手」の確認バナーが出ます。許可してから「インストール」を押します。そのあとの手順は Chrome と同じです。

1

「他のストアからの拡張機能を許可する」で「許可」をクリック

2

Phantom のページで「インストール」をクリック

3

確認ダイアログの「拡張機能の追加」をクリック

1

事前準備

16

事前準備

Phantom 3/10

Phantom：追加できたことを確認する

「「Phantom」が Chrome に追加されました」と表示されれば成功です。拡張機能アイコンから Phantom を開けます。

1

「Phantom」が Chrome に追加されました と表示されていることを確認

2

ツールバーのパズル型アイコン（拡張機能）をクリック

1

2

事前準備

17

事前準備

Phantom 4/10

Phantom：新しいウォレットを作成する

Phantom の初期設定画面が開きます。新しくウォレットを作るので、上のボタンを押します。

1

「新規ウォレットを作成」をクリック

POINT

すでにウォレットを持っている人は「すでにウォレットを持っています」から復元できます。本日は新規作成で進めます。

1

クリック

事前準備

18

事前準備

Phantom 5/10

Phantom：リカバリーフレーズで作成する

作成方法を選びます。本日は 12 単語のリカバリーフレーズを自分で保管する方式で作成します。

1

「リカバリフレーズのウォレットを作成」をクリック

POINT

上の「メールアドレスで続行」は Google・Apple のアカウントと PIN で復元する方式です。本日は下のボタンを使います。

1

クリック

事前準備

19

事前準備

Phantom 6/10

Phantom：リカバリーフレーズを書き写す

12 単語のリカバリーフレーズが表示されます。目のアイコンで表示を切り替え、順番どおりに紙などへ書き写します。

1

中央の目のアイコンをクリックしてフレーズを表示

2

12 単語を番号の順に書き写す

注意

リカバリーフレーズはウォレットを復元できる唯一の情報です。他人には見せず、送らないでください。

1

表示

2

書き写す

事前準備

20

事前準備

Phantom 7/10

Phantom：フレーズを保存したことを確認する

書き写しが終わったら、チェックを入れて次に進みます。チェックを入れると「続行」が押せるようになります。

1

「リカバリフレーズを保存しました」にチェックを入れる

2

「続行」をクリック

POINT

フレーズを紛失するとウォレットは復元できません。本日の勉強会用でも、書き写した紙はなくさないようにしてください。

1

チェック

2

クリック

事前準備

21

事前準備

Phantom 8/10

Phantom：パスワードを作成する

ウォレットのロックを解除するためのパスワードを決めます。同じものを2回入力します。

1

パスワードを入力

2

同じパスワードをもう一度入力

3

「利用規約に同意します」にチェックを入れる

4

「続行」をクリック

1

入力

2

もう一度

3

チェック

4

クリック

事前準備

22

事前準備

Phantom 9/10

Phantom：ユーザー名を決める

アカウントの表示名（ユーザー名）を決めます。半角英数で入力します。

1

ユーザー名を入力し「ユーザー名は利用可能です」と出ることを確認

2

「続行」をクリック

1

入力

2

クリック

事前準備

23

事前準備

Phantom 10/10

Phantom：作成完了（準備が整いました）

「準備が整いました！」と表示されれば Phantom ウォレットの作成は完了です。

1

「準備が整いました！」と表示されていることを確認

2

「始める」をクリック

1

確認

2

クリック

事前準備

24

事前準備

VS Code 1/6

Visual Studio Code：インストーラーをダウンロードする

code.visualstudio.com を開き、「Download for Windows」を押してインストーラーを保存します。

1

アドレス欄に以下を入力し、実行する

2

「Download for Windows」をクリック

1

2

事前準備

25

code.visualstudio.com

事前準備

VS Code 2/6

Visual Studio Code：ダウンロードしたファイルを開く

ダウンロードが終わると、ブラウザの右上にファイル名が表示されます。これをクリックするとインストーラーが起動します。

1

「VSCodeUserSetup-x64-…」をクリックして実行

1

事前準備

26

事前準備

VS Code 3/6

Visual Studio Code：使用許諾に同意して進む

インストーラーが開きます。「使用許諾契約書の同意」で同意を選び、「次へ」で進みます。

1

「同意する(A)」を選ぶ

2

「次へ(N)」をクリック

POINT

このあと「インストール先の指定」「スタートメニュー」などの画面が続きます。変更の必要はないので、そのまま「次へ」で進めてください。

1

選ぶ

2

クリック

事前準備

27

事前準備

VS Code 4/6

Visual Studio Code：追加タスクを確認して進む

ダウンロードしたファイルを実行します。ライセンスに同意して進み、「追加タスクの選択」では PATH への追加にチェックが入っていることを確認します。

1

「PATH への追加（再起動後に使用可能）」にチェックが入っていることを確認

2

「次へ」をクリックし、続けて「インストール」をクリック

POINT

PATH への追加にチェックを入れておくと、② の Claude Code のインストールがうまく進みます。

1

2

事前準備

28

事前準備

VS Code 5/6

Visual Studio Code：インストールを実行する

「インストール準備完了」と出たら、内容を確認して「インストール」を押します。数分で終わります。

1

「インストール(I)」をクリック

POINT

インストールは数分で終わります。途中で「このアプリがデバイスに変更を加えることを許可しますか？」と出た場合は「はい」を選んでください。

1

クリック

事前準備

29

事前準備

VS Code 6/6

Visual Studio Code：インストール完了

「セットアップウィザードの完了」と表示されれば完了です。そのまま VS Code を起動します。

1

「Visual Studio Code を実行する」にチェックが入っていることを確認

2

「完了」をクリック

1

2

事前準備

30

事前準備

補足

【補足】初回起動で Copilot のサインインを求められたら

VS Code を初めて起動すると、GitHub Copilot のサインイン画面が出ることがあります。本日は使わないので、閉じて構いません。

1

右上の「×」で閉じる（本日はこれでOK）

2

使いたい人は「Continue with GitHub」からサインイン

POINT

Copilot は本日の手順では使いません。閉じても、このあとの Claude Code の導入に影響はありません。

1

閉じる

2

任意

事前準備

31

STEP 1

① ウォレットアカウント作成

作成した Phantom ウォレットのアドレスをスプレッドシートで共有します。

練習用ネットワーク（devnet）の SOL は、そのアドレス宛てにサポート側から配布します。

アドレスのコピー

スプレッドシートに共有

devnet SOL は配布（取得は任意）

① ウォレットアカウント作成

32

① ウォレット作成

1/2

ウォレットアドレス（Solana）をコピーする

ツールバーの Phantom を開きます。アカウント名の右のコピーアイコンを押すとアドレスの一覧が開くので、「Solana」の行のコピーアイコンを押します。

1

「アカウント 1」の右のコピーアイコンをクリック

2

一覧の「Solana」の行のコピーアイコンをクリック

注意

Ethereum・Bitcoin など他のネットワークのアドレスも並んでいます。必ず一番上の「Solana」のアドレスをコピーしてください。

1

2

① ウォレット作成

33

① ウォレット作成

2/2

スプレッドシートにアドレスを書き込む

以下の共有シートを開き、空いている行に自分の氏名（ニックネーム可）とコピーしたウォレットアドレスを貼り付けます。

1

3行目の「例」の行を参考にする

2

空いている行に氏名（ニックネーム可）を入力

3

同じ行にウォレットアドレスを貼り付ける

1

2

3

① ウォレット作成

34

https://docs.google.com/spreadsheets/d/1-MZBlA4Bka9nRtVZnHVn2KUz0k6xWqtjnw5wKtfxZwU/edit?usp=drive_link

① ウォレット作成

devnet SOL はサポートから配布します

練習用ネットワーク（devnet）の SOL は、スプレッドシートに記入されたアドレス宛てにサポート側から配布します。自分で取得する必要はありません。

1

アドレスを記入

スプレッドシートに自分の氏名（ニックネーム可）とウォレットアドレスを記入して待つ

2

配布を待つ

サポート側が順番に配布します。スプレッドシートの「sol配布確認」の列で状況を確認できる

POINT

自分で取得してみたい人向けに、次の3ページで Faucet（配布サイト）の使い方を載せています。こちらは任意です。

Faucet は時間あたりの回数制限があり、混雑時は失敗することがあります。うまくいかない場合はサポートの配布を待ってください。

① ウォレット作成

35

① ウォレット作成

任意 1/3

【任意】 devnet SOL を受け取る：Faucet を開く

自分で取得する場合は faucet.solana.com を開きます。右上が devnet になっていることを確認し、GitHub アカウントを連携して受け取れる上限を上げます。

1

右上の表示が「devnet」になっていることを確認

2

「Connect your GitHub」をクリック

POINT

GitHub アカウントは第一回で作成したものをそのまま使えます。

1

2

① ウォレット作成

36

① ウォレット作成

任意 2/3

【任意】 devnet SOL を受け取る：GitHub の連携を許可する

GitHub の認可画面が開きます。内容を確認して、緑のボタンで許可します。

1

「Authorize solana-foundation」をクリック

1

① ウォレット作成

37

① ウォレット作成

任意 3/3

【任意】 devnet SOL を受け取る：アドレスと数量を指定する

コピーしたウォレットアドレスと受け取る数量を入力し、「Confirm Airdrop」を押します。

1

Wallet Address に自分のウォレットアドレスを貼り付ける

2

Amount に受け取る数量（例：5）を入力

3

「Confirm Airdrop」をクリック

注意

Phantom は初期状態では devnet の残高を表示しません。残高は ③ の手順で testnet モードに切り替えると表示されます。

1

2

3

① ウォレット作成

38

https://ai-idea-maker.y-takahashi2020.workers.dev/

STEP 2

② Claude 環境セットアップ

Visual Studio Code のターミナルから Claude Code をインストールし、事前メールで配布した API キーを設定します。

そのあとは VS Code の拡張機能（Claude Code パネル）から使います。ターミナルから使う方法は任意です。

ターミナルを開く

Claude Code の導入

API キーの設定

拡張機能から使う

② Claude 環境セットアップ

39

② Claude 環境

1/7

VS Code でターミナルを開く

VS Code を起動し、上部メニューの「Terminal」から「New Terminal」を選びます。画面下にターミナルが開きます。

1

メニューの「Terminal」をクリック

2

「New Terminal」をクリック

1

2

② Claude 環境

40

② Claude 環境

2/7

ターミナルの場所を確認する

「New Terminal」を選ぶと、VS Code の下側に黒い画面が開きます。これがターミナルです。

1

2

「Terminal」タブが選ばれていることを確認

文字を打つ場所は「PS C:\…>」の右側

② Claude 環境

41

2

1

② Claude 環境

3/7

作業フォルダに移動して Claude Code を入れる

ターミナルに下のコマンドを1行ずつ貼り付けて Enter を押します。コピーは資料から、貼り付けはターミナルの中をクリックしてから Ctrl+V です。

1

cd で作業用フォルダに移動する

2

インストールコマンドを貼り付けて Enter

1

2

② Claude 環境

42

mkdir solana_test # 作業用フォルダを作る（初回のみ）

cd solana_test # 作業用フォルダに移動する

irm https://claude.ai/install.ps1 | iex # 導入コマンド

POINT

「PS C:\…> 」はもともと表示されているものです。その右側に貼り付けてください。うまく動かないときは、VS Code を開き直してからもう一度試してください。

② Claude 環境

4/7

インストールできたことを確認する

「Claude Code successfully installed!」と表示されれば成功です。バージョンも確認しておきます。

1

「Claude Code successfully installed!」と表示されていることを確認

2

claude --version でバージョンが表示されることを確認

注意

コマンドが見つからないと表示される場合は、VS Code をいったん閉じて開き直してから、もう一度試してください。

1

2

② Claude 環境

43

② Claude 環境

5/7

API キーを設定する

受け取った API キーを、ターミナルで環境変数として設定します。PowerShell では次の書き方を使います。

$env:ANTHROPIC_API_KEY="配布されたAPIキー"

​

claude # 設定したあとに Claude Code を起動する

注意

APIキーは引用符（"）で囲んで貼り付けてください。

キーは自分専用です。画面共有や SNS に貼らないよう注意してください。

1

2

▼ 実際は配布された APIキーを入れてください（下は実際のキーで成功した例。キーの中ほどは隠しています）

② Claude 環境

44

② Claude 環境

6/7

VS Code の拡張機能から Claude Code を開く

ここからは VS Code の拡張機能（Claude Code パネル）を使います。左のアクティビティバーのアイコンを押してパネルを開き、新しいセッションを作ります。

1

左のアクティビティバーの Claude Code アイコンをクリック

2

「+ New session」をクリック

3

初回は「No sessions yet」と表示される

POINT

アイコンが見つからないときは、VS Code を閉じて開き直してください。インストール直後は表示されるまで少し時間がかかることがあります。

1

開く

2

新規

3

② Claude 環境

45

② Claude 環境

7/7

拡張機能のチャットから指示を出す

パネル下部の入力欄に指示（プロンプト）を書いて送ると、Claude Code がファイルを作りながら進めます。③ ではこの入力欄を使います。

1

左のアクティビティバーの Claude Code アイコンをクリック

2

右側のパネルの入力欄に指示を書く

POINT

許可を求められたら内容を確認して進めてください。権限モードは「Auto」のままで問題ありません。

1

2

② Claude 環境

46

② Claude 環境

任意 1/2

【任意】ターミナルから Claude Code を起動する

ターミナルから使うこともできます。claude と入力して起動し、初回はフォルダを信頼するか聞かれるので「Yes, I trust this folder」を選んで Enter を押します。

1

claude と入力して Enter

2

「Yes, I trust this folder」を選んで Enter

1

2

② Claude 環境

47

② Claude 環境

任意 2/2

【任意】ターミナルで起動できたことを確認する

Claude Code のロゴとバージョン、作業中のフォルダ名が表示されれば起動完了です。下の「>」の行に指示を書きます。

1

バージョンと作業フォルダ名が表示されていることを確認

2

「>」の行が入力待ちになっていることを確認

1

2

② Claude 環境

48

STEP 3

③ プログラム作成

Claude Code に指示して、ウォレット間で SOL を送り合える Web アプリを作ります。

生成には時間がかかるので、待っているあいだに休憩とミニハッカソンの説明を行います。

休憩のあとは、できたアプリを起動して実際に devnet SOL を送ってみます。

プロンプトを投げる

休憩（生成待ち）

アプリを起動

ウォレット接続

実際に送金

③ プログラム作成

49

③ プログラム作成

これから作るもの（テンプレートのプロンプト）

次の文章をそのまま Claude Code に貼り付けます。ウォレットをつないで、指定したアドレスに指定した数量の SOL を送れる Web アプリができます。

SolanaのDevnet上で、ウォレット間のSOL送受信ができるWebアプリを単一のHTMLファイル（index.html）で作成してください。

UI上でウォレットを接続し、送金先アドレスと送金数量を指定して、実際にSOLを送金できるようにしてください。

送金処理の流れ（署名・送信・確定など）をUI上でリアルタイムに可視化してください。

送信履歴・受信履歴として、送受信日時、送信元・送信先アドレス、数量、取引状態を表示してください。

Devnet限定とし、実際のオンチェーンデータを使用して動作すること。READMEに起動方法を記載してください。

送る

自分のウォレットから、指定したアドレスへ指定した数量の SOL を送信

見える

署名・送信・確定（Finalized）までの流れを画面でリアルタイムに表示

残る

送信履歴・受信履歴として、日時・相手・数量・状態を一覧表示

③ プログラム作成

50

③ プログラム作成

1/16

プロンプトを貼り付けて実行する

Claude Code パネルの入力欄に前のページの文章を貼り付け、送信します。生成が終わるまで数分かかります。

1

入力欄にプロンプトを貼り付ける

2

送信ボタン（↑）をクリック、または Enter

POINT

ターミナルで使っている場合も同じです。「>」の行に貼り付けて Enter を押してください。

1

2

③ プログラム作成

51

③ プログラム作成

2/16

生成が始まったことを確認する

送信するとセッションが作られ、Claude Code が考え始めます。左の一覧に進行中のセッションが並び、使った費用と時間も表示されます。

1

進行中のセッションが一覧に追加される

2

「Imagining...」などの表示で進行中が分かる

3

費用と経過時間はここで確認できる

1

2

3

③ プログラム作成

52

BREAK

休憩（生成待ち）＆ ミニハッカソンの説明

アプリの生成には時間がかかります。生成はそのまま進めたまま、ここで休憩に入ります。

休憩しながら、KOUTA さんからミニハッカソンの説明とチームづくりを行います。

PC は閉じない・スリープさせないでください。生成が止まってしまいます。

生成はそのまま進行

ミニハッカソンの説明

チームづくり

遅れている人のフォロー

休憩

53

③ プログラム作成

3/16

できたファイルと起動方法を確認する

生成が終わると index.html と README.md ができます。README.md の「起動方法（ローカル）」に、アプリの開き方が書かれています。

1

index.html と README.md ができていることを確認

2

ダブルクリックでは接続できない点を確認

3

Python での起動コマンドを確認

注意

index.html をダブルクリックして file:// で開くと、ウォレット拡張機能がページに入らず接続できません。必ずローカルサーバー経由（次のページ）で開いてください。

1

2

3

③ プログラム作成

54

③ プログラム作成

4/16

【任意】 ローカルサーバーを立ち上げてブラウザで開く

ターミナルでアプリのフォルダに移動し、Python の簡易サーバーを起動します。起動したらブラウザで http://localhost:8000 を開きます。

1

cd でアプリのフォルダに移動して起動コマンドを実行

2

「Serving HTTP on ... port 8000」と出れば起動完了

注意

ターミナルの開き方はP40, 41を参照。

フォルダ名とポート番号は人によって変わります。自分の画面に表示されたものを使ってください。

1

③ プログラム作成

55

cd solana-devnet-transfer-html

python -m http.server 8000

npx serve . # Node.js の場合

③ プログラム作成

ここからの画面は「一例」です

このアプリは Claude Code（AI）が作ったものです。同じプロンプトを使っても、画面のレイアウト・ボタンの名前・ファイル構成は人によって変わります。このあとのページは、講師が作ったアプリでの操作例として見てください。

ちがってよい

見た目やボタンの位置が違っても失敗ではありません。「ウォレットを接続する」「宛先と数量を入れて送る」という流れが同じなら問題ありません。

読み替える

資料の赤枠・オレンジ枠は講師の画面での位置です。自分の画面では、枠の中に書かれたボタン名・項目名を目印に探してください。

困ったら

思った動きにならないときは、エラーメッセージをそのまま Claude Code に貼り付けて直してもらうのが早いです。解決しないときはサポートに声をかけてください。

注意

このあとのページでヘッダーに「例」と付いているものは、講師が作ったアプリの画面です。自分の画面と細部が違っていても、そのまま読み進めてください。

Phantom ウォレットと Solana Explorer の画面は、誰が見ても同じ表示になります。

③ プログラム作成

56

③ プログラム作成

例 5/16

アプリが開いたことを確認する

ブラウザで表示されたアプリの画面です。画面上部に DEVNET と表示され、つないでいるネットワークが devnet であることが分かります。

1

「DEVNET」と RPC の表示、「Devnet を確認済み」を確認

2

「Select Wallet」をクリック

1

2

③ プログラム作成

57

③ プログラム作成

6/16

Phantom の設定を開く

Phantom は初期状態では devnet（練習用ネットワーク）の残高を表示しません。まず Phantom の設定画面を開きます。

1

ウォレット画面の左上にあるアカウントのアイコンをクリック

POINT

アイコンを押すとメニューが開きます。その中の「設定」（歯車）を選ぶと次のページの画面になります。Phantom のバージョンによって表示が少し違う場合があります。

1

クリック

③ プログラム作成

58

③ プログラム作成

7/16

Phantom を devnet 表示に切り替える（1/2）

Phantom は初期状態では devnet の残高を表示しません。設定から「デベロッパー設定」を開きます。

1

設定の中の「デベロッパー設定」をクリック

POINT

設定画面は、Phantom のアカウントアイコンから開けます。

1

③ プログラム作成

59

③ プログラム作成

8/16

Phantom を devnet 表示に切り替える（2/2）

「testnet モード」をオンにすると、devnet の残高とアプリ接続が表示されるようになります。

1

「testnet モード」のスイッチをオンにする

注意

オンのあいだは練習用ネットワークの表示になります。本番の資産を扱うときは必ずオフに戻してください。

1

③ プログラム作成

60

③ プログラム作成

9/16

testnet モードになったことを確認する

ウォレット画面に戻ると、上に「現在testnetモードです」と表示されます。これで devnet の残高とアプリ接続が使えます。

1

「現在testnetモードです」と表示されていることを確認

POINT

サポートから配布された devnet SOL は、この表示に切り替えてから残高に出てきます。表示されないときは、少し待ってから Phantom を開き直してください。

1

確認

③ プログラム作成

61

③ プログラム作成

例 10/16

アプリにウォレットを接続する

アプリ側に「Connect a wallet on Solana to continue」が出ます。Phantom を選びます。

1

Phantom に「現在 testnet モードです」と出ていることを確認

2

一覧の「Phantom」をクリック

1

2

③ プログラム作成

62

③ プログラム作成

11/16

Phantom で接続を承認する

Phantom が開き、接続してよいか確認されます。表示されているサイトが自分のアプリ（localhost）であることを確認して接続します。

1

接続先が localhost になっていることを確認

2

「接続」をクリック

1

2

③ プログラム作成

63

③ プログラム作成

例 12/16

接続完了・残高を確認する

自分のアドレスと残高が表示されます。

1

接続中のウォレットのアドレスを確認

2

残高（SOL）が表示されていることを確認

1

2

③ プログラム作成

64

③ プログラム作成

例 13/16

送金先と数量を入力して送金する

スプレッドシートで相手のアドレスを確認し、「SOL を送金」に貼り付けます。数量を入れて「送金する」を押します。

1

送金先アドレスを貼り付ける

2

数量（SOL）を入力する

3

「送金する」をクリック

1

2

3

③ プログラム作成

65

③ プログラム作成

例 14/16

Phantom で署名する

Phantom が開き、送金内容の確認が出ます。送金先と数量を確認してから「確認」を押します。

1

「ウォレット署名」が承認待ちになっていることを確認

2

Phantom の「確認」をクリック

1

2

③ プログラム作成

66

③ プログラム作成

例 15/16

Finalized（確定）まで確認する

作成 → 署名 → 送信 → Processed → Confirmed → Finalized の6段階が順に緑になります。最後まで進むと送金が確定します。

1

「Finalized」まで緑になっていることを確認

2

「送金が確定しました」と表示されていることを確認

3

送受信履歴に「確定 (Finalized)」の行が増えたことを確認

1

2

3

③ プログラム作成

67

③ プログラム作成

16/16

Explorer でトランザクションを確認する

履歴の Tx（シグネチャ）を開くと、Solana Explorer で実際のトランザクションが確認できます。

1

右上が「Devnet」になっていることを確認

2

Status が「Success」であることを確認

3

Confirmation が「Finalized」であることを確認

1

2

3

③ プログラム作成

68

③ プログラム作成

スプレッドシートのアドレス宛てに送り合う

ここまでできたら、スプレッドシートに書かれた他の学生や講師のアドレス宛てに、実際に devnet SOL を送り合ってみてください。

1

相手を選ぶ

スプレッドシートから送りたい相手の行を選び、ウォレットアドレスをコピーする

2

送金する

アプリの「送金先アドレス」に貼り付け、数量（例：0.1）を入れて送金し、Phantom で署名する

3

受信を確認する

受け取った側は「受信履歴」のタブを開き、相手のアドレスと数量が増えていることを確認する

POINT

送る数量は 0.1 SOL 程度で十分です。手数料（0.000005 SOL 程度）も自分の残高から引かれます。

上記により、残高をすべて送ろうとすると失敗します。

残高が足りなくなったら、サポートに声をかけもう一度受け取ってください。

③ プログラム作成

69

STEP 4

④ 自由につくってみる

③ のアプリを改造する、第一回で作ろうとしていたもの、まったく別のもの——どれでも構いません。

作れたら GitHub Pages で公開し、スプレッドシートで共有して遊んでもらいましょう。

スクリプト例

Claude Code で作成

GitHub で公開

みんなで遊ぶ

④ 自由につくってみる

70

④ 自由制作

スクリプト例 1/2

スクリプト例（③ を改良する）

③ で作ったアプリをベースに改造する場合の文章の例です。そのまま貼り付けて使えます。

もっと簡単な送金アプリ

改良版

Solana Devnet上で、SOLを送金するだけのシンプルなWebアプリを単一のHTMLファイル（index.html）で作成してください。

Phantomウォレットを接続し、送金先ウォレットアドレスと送金数量（SOL）を指定できるUIを実装してください。

送金ボタンを押すと、ウォレットで署名・承認したうえで、実際にSOLを送金できるようにしてください。

Devnet限定とし、送金結果やエラーを画面上に表示してください。

READMEに起動方法を記載してください。

冒険者ギルドの送金クエスト

改良版

先のWebアプリを改良し、クエストごとに送金先とSOL数量を設定し、送金が確定するとクエスト達成と表示するゲームを単一のHTMLファイル（index.html）で作成してください。

クエストの進行状況を画面に表示してください。READMEに起動方法を記載してください。

④ 自由制作

71

④ 自由制作

スクリプト例 2/2

スクリプト例（新しく作る）

まったく別のものを作る場合の例です。思いついたアイデアに置き換えて使ってください。

2D コイン収集ゲーム

新規版

Solana Devnetを利用した、ブラウザで遊べる2Dコイン収集ゲームをWebアプリを単一のHTMLファイル（index.html）で作成してください。

プレイヤーがコインを集めてスコアを競い、Phantomウォレットを接続してゲーム結果をDevnetのトランザクションとして記録できるようにしてください。

ReactとTypeScriptを使用し、起動方法をREADMEに記載してください。

POINT

アイデアに迷ったら「③ のアプリに〇〇を追加して」と伝えるだけでも形になります。

④ 自由制作

72

AIダンジョン冒険ゲーム

新規版

Solana Devnet対応の「AIダンジョン冒険ゲーム」を単一のHTMLファイル（index.html）で作成してください。プレイヤーが行動を選ぶと、AIがイベントや敵、宝物、物語を生成し、選択によって冒険の展開が変化するWebゲームにしてください。クリア結果と獲得アイテムを表示し、Phantomウォレット接続後にクリア実績をDevnetのトランザクションとして記録できるようにしてください。AI APIが利用できない場合は、あらかじめ用意したイベントで動作するようにしてください。

起動方法をREADMEに記載してください。

④ 自由制作

1/14

新しいフォルダを作って Claude Code を開く

別のアプリを作るときは、新しいフォルダを用意して開き直します。VS Code の「フォルダーを開く」から作成できます。

1

「新しいフォルダー」で作業用フォルダを作る

2

作ったフォルダが選ばれていることを確認

3

「Select folder」をクリック

POINT

フォルダを開いたら、③ と同じように Claude Code パネルの入力欄に指示を出します。アプリができたら、次のページから GitHub にアップロードして公開します。

1

2

3

④ 自由制作

73

④ 自由制作

2/14

Claude Code に指示を出す

フォルダを開いたら、③ と同じように Claude Code パネルの入力欄へ指示を貼り付けて送信します。前のページのスクリプト例をそのまま使えます。

1

入力欄に作りたいものの指示を貼り付ける

2

送信ボタン（↑）をクリック、または Enter

POINT

「単一のHTMLファイル（index.html）で作成してください」と入れておくと、このあとの GitHub へのアップロードが簡単になります。

1

2

④ 自由制作

74

④ 自由制作

3/14

新しいリポジトリを作る（入口）

GitHub の画面だけで公開します。まず GitHub にログインし、右上の「＋」から新しいリポジトリを作ります。ターミナルや git のコマンドは使いません。

1

右上の「＋」をクリック

2

「New repository」をクリック

1

2

④ 自由制作

75

④ 自由制作

4/14

リポジトリの設定を入力して作成する

リポジトリ名を入れて作成します。公開するので「Public」を選びます。名前は公開 URL の一部になります。

1

リポジトリ名を入力（半角英数・記号はハイフン）

2

説明（任意）を入力

3

「Public」を選択

５

「Create repository」をクリック

1

2

3

５

④ 自由制作

76

４

４

「Add README」をOnにする

④ 自由制作

5/14

ファイルのアップロード画面を開く

作成したリポジトリのページで「Add file」→「Upload files」を選びます。

1

「Add file」をクリック

2

「Upload files」をクリック

1

2

④ 自由制作

77

④ 自由制作

6/14

ファイルをドラッグ＆ドロップで追加する

エクスプローラーでアプリのフォルダを開き、ファイルを選んで、ブラウザの枠の中へドラッグ＆ドロップします。

1

エクスプローラーで index.html と README.md を選ぶ

2

左の枠にドラッグ＆ドロップ（「choose your files」から選んでもよい）

POINT

フォルダごとではなく、中のファイルを選んでドロップしてください。index.html がリポジトリの一番上の階層に入るようにします。

1

2

④ 自由制作

78

④ 自由制作

7/14

追加したファイルを確認してコミットする

枠の下にファイル名が並べば追加できています。コミットメッセージはそのままで構いません。

1

index.html と README.md が並んでいることを確認

2

コミットメッセージはそのままでよい

3

画面の一番下にある緑の「Commit changes」をクリック

注意

「Commit changes」はページの下のほうにあります。見えないときは下へスクロールしてください。

1

2

④ 自由制作

79

④ 自由制作

8/14

緑の「Commit changes」でアップロードを確定する

ファイルが並んでいることを確認したら、ページの一番下にある緑の「Commit changes」を押します。これでアップロードが確定します。

1

アップロードするファイル名を確認

2

緑の「Commit changes」をクリック

POINT

ボタンが見えないときは、ページを下までスクロールしてください。押したあとはリポジトリのページに戻ります。

1

2

④ 自由制作

80

④ 自由制作

9/14

アップロードできたことを確認する

リポジトリのページに戻り、ファイルが並んでいれば完了です。このあと Settings → Pages で公開します。

1

index.html と README.md が並んでいることを確認

2

上のメニューの「Settings」をクリックして次のページへ

1

2

④ 自由制作

81

④ 自由制作

10/14

Settings の左メニューから「Pages」を開く

「Settings」を押すと設定画面になります。左のメニューを下へスクロールし、「Pages」を選びます。

1

左メニューの「Pages」をクリック

POINT

メニューは縦に長いので、見つからないときは左側を下へスクロールしてください。

1

クリック

④ 自由制作

82

④ 自由制作

11/14

公開するブランチの選択を開く

GitHub Pages の画面が開きます。Source が「Deploy from a branch」になっていることを確認し、Branch の「None」を押します。

1

Source が「Deploy from a branch」であることを確認

2

Branch の「None」をクリック

1

2

④ 自由制作

83

④ 自由制作

12/14

ブランチを main にして保存する

Branch を「main」、フォルダを「/ (root)」にして「Save」を押します。これで公開の設定は完了です。

1

Branch を「main」にする

2

フォルダが「/ (root)」であることを確認

3

「Save」をクリック

1

2

3

④ 自由制作

84

④ 自由制作

13/14

公開されるまで数分待つ

保存すると画面の上に「GitHub Pages source saved.」と出て、公開の準備（ビルド）が始まります。数分かかります。

1

「GitHub Pages source saved.」の表示を確認

2

「currently being built」＝準備中。数分待ってページを再読み込み

1

2

④ 自由制作

85

④ 自由制作

14/14

公開 URL を確認して共有する

数分すると「Your site is live at …」と公開 URL が表示されます。この URL をスプレッドシートに記入して共有します。

1

公開 URL（https://<ユーザー名>.github.io/<リポジトリ名>/）を確認

2

「Visit site」をクリックして動作を確認

1

2

④ 自由制作

86

④ 自由制作

補足 1/4

【補足】git コマンドで GitHub に上げる場合

git を使いたい人向けの補足です。本日の本線は前のページまでの GitHub 画面での操作です。下のコマンドを順に実行します（<ユーザー名> と <リポジトリ名> は自分のものに置き換え）。

1

git init → git add . → git commit を実行

2

git branch -M main を実行

1

2

④ 自由制作

87

git remote add origin \

https://github.com/<ユーザー名>/<リポジトリ名>.git

git push -u origin main

④ 自由制作

補足 2/4

【補足】git push で GitHub にサインインする

はじめての push では認証を求められます。「Sign in with your browser」からブラウザで承認します。

1

「Sign in with your browser」をクリック

注意

fatal: Authentication failed と出た場合は、最後のトラブルシューティングのページを参照してください。

1

④ 自由制作

88

④ 自由制作

補足 3/4

【補足】GitHub の認可画面で許可する

ブラウザが開き、Git Credential Manager への認可を求められます。内容を確認して緑のボタンを押します。

1

要求される権限（Repositories など）を確認

2

「Authorize git-ecosystem」をクリック

1

2

④ 自由制作

89

④ 自由制作

補足 4/4

【補足】認証が終わったら VS Code に戻る

「Authentication Succeeded」と表示されれば認証は完了です。タブを閉じて VS Code に戻り、もう一度 push します。

1

「Authentication Succeeded」の表示を確認

1

④ 自由制作

90

トラブルシューティング

1/2

git push で認証エラーになる場合

git push で fatal: Authentication failed と表示される場合は、保存されている GitHub アカウントを整理してから、もう一度サインインします。

# 保存されている GitHub アカウントを確認

git credential-manager github list

​

# 不要なアカウントがあればサインアウト

git credential-manager github logout <別のアカウント名>

​

# push するアカウントでサインイン（ブラウザが開くので GitHub で承認）

git credential-manager github login

​

# 複数アカウントを使い分ける場合は、URL にユーザー名を入れて使うアカウントを固定

git remote set-url origin https://<ユーザー名>@github.com/<ユーザー名>/<リポジトリ名>.git

​

# もう一度 push

git push -u origin main

POINT

複数の GitHub アカウントを使っていると、別のアカウントの情報が保存されていて失敗することがあります。うまくいかないときはサポートに声をかけてください。

トラブルシューティング

91

トラブルシューティング

2/2

アプリにエラーが表示された場合

作成したアプリでエラーが出たときは、直前にした操作とエラーメッセージをそのまま Claude Code に伝えれば直してもらえます。

<エラーが発生する直前にした動作>の実行時に以下のエラーが発生。解消せよ。

​

＜表示されたエラーメッセージ＞

エラーメッセージはすべて貼る

途中で省略せず、表示されている文字をそのままコピーして貼り付けます。

直前の操作を書く

「送金するボタンを押したとき」のように、どの操作で起きたかを書き添えます。

画面の見た目がおかしいときは

ブラウザの再読み込み（Ctrl＋Shift＋R）を試してから相談します。

注意

API キーを含む URL やキーそのものを、ソースコードや公開するページに書き込まないよう注意してください。

トラブルシューティング

92

トラブルシューティング

コマンドとリンクの早見表

当日よく使うコマンドとリンクをまとめました。

やりたいこと

コマンド／URL

Claude Code を入れる

irm https://claude.ai/install.ps1 | iex

API キーを設定する

$env:ANTHROPIC_API_KEY="<配布されたAPIキー>"

Claude Code を起動する

claude

アプリを開く（Python）

cd <アプリのフォルダ> → python -m http.server 8000

アプリを開く（Node.js）

cd <アプリのフォルダ> → npx serve .

GitHub に上げる

git init / git add . / git commit -m "..." / git branch -M main / git push -u origin main

アドレス共有シート

https://docs.google.com/spreadsheets/d/1-MZBlA4Bka9nRtVZnHVn2KUz0k6xWqtjnw5wKtfxZwU/edit?usp=drive_link

Luma（資料のダウンロード）

https://luma.com/lmy1gn6j

devnet SOL を受け取る

https://faucet.solana.com

トラブルシューティング

93

GOAL CHECK

ここまでで手元にそろっているもの

✓

Phantom ウォレット

ブラウザ拡張機能として追加し、リカバリーフレーズを控えて作成済み

✓

devnet の SOL

サポートからの配布（または Faucet）で受け取り、残高に反映されている

✓

Claude Code の環境

VS Code から起動でき、API キーの設定も完了している

✓

SOL 送受信アプリ

自分のアプリで実際に送金し、Finalized まで確認できている

✓

アドレスの共有

スプレッドシートに記入し、他の人と送り合えている

✓

公開したアプリ

④ まで進んだ人は GitHub Pages の URL を共有できている

お疲れさまでした。作ったアプリは devnet のままいつでも動かせます。気になったところは、そのまま Claude Code に聞いて改造してみてください。

おわりに

94