1 of 84

SOLANA WORKSHOP #3

第三回

ミニハッカソンに向けて

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

事前準備

① Claude 環境セットアップ

② プログラム作成(途中で休憩)

③ 発表資料の作成

④ ミニハッカソンに向けて準備

2026年11月 Solana 勉強会

2 of 84

はじめに

本日のスケジュール

10分

挨拶

Erina さん、高橋さんよりご挨拶

15分

事前準備

VS Code の導入、勉強会資料のダウンロード

15分

① Claude 環境セットアップ

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

10分

② プログラム作成(前半)

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

20分

休憩(生成待ち)

ミニハッカソンに向けて審査員へ質問・アドバイス/生成はそのまま進行

10分

② プログラム作成(後半)

スプレッドシートのアドレス宛てに、実際に SOL を送り合う

10分

③ 発表資料の作成

スクリプト作成ツールで発表資料(pptx)を作り、手直しする

30分

④ ミニハッカソンに向けて準備

チーム単位でアプリを作成し、GitHub Pages で公開・共有(時間のある限り)

補足

事前準備が終わっていない人がいても大丈夫です。④ は時間のある限り進めます。

はじめに

2

3 of 84

はじめに

この資料でやること(全体の流れ)

第二回の続きからアプリを仕上げ、ミニハッカソンに向けて発表資料とチームのアプリを作るまでの流れです。

準

事前準備

目安 15分

VS Code を導入し、勉強会資料をダウンロードする

1

① Claude 環境セットアップ

目安 15分

Claude Code をインストールして API キーを設定し、VS Code に設定する

2

② プログラム作成

目安 40分

送受信アプリを作り、休憩のあとスプレッドシートの相手と SOL を送り合う

3

③ 発表資料の作成

目安 10分

スクリプト作成ツールでスクリプトを作り、発表資料(pptx)を作って手直しする

4

④ ミニハッカソンに向けて準備

目安 30分

チームでアプリを作り、GitHub Pages で公開して遊んでもらう

POINT

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

はじめに

3

4 of 84

はじめに

この資料の見方(画面の枠と番号のルール)

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

Create account

赤わく

クリックする場所

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

ここに入力

オレンジわく

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

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

1

2

3

①②③

操作する順番

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

補足

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

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

はじめに

4

5 of 84

はじめに

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

本日使うのは次の7つです。スプレッドシートと 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

発表資料スクリプト作成ツール

発表資料を作るためのスクリプトを作る

6 of 84

BEFORE THE WORKSHOP

事前準備(15分)

Visual Studio Code の導入と、勉強会資料のダウンロードを行います。

VS Code のインストールに時間がかかる場合は、当日はスキップして構いません。

事前に終わっている人は、① Claude 環境セットアップまで進めて待っていてください。

Visual Studio Code

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

事前準備

6

7 of 84

事前準備

事前準備チェックリスト

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

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

推奨

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

必須

注意

Visual Studio Code のインストールに時間がかかる場合は、当日はスキップして構いません。

Claude のインストールと API キーの設定は、① Claude 環境セットアップで一緒に行います。

事前準備

7

8 of 84

事前準備

VS Code 1/6

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

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

1

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

2

「Download for Windows」をクリック

1

2

事前準備

8

code.visualstudio.com

9 of 84

事前準備

VS Code 2/6

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

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

1

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

1

事前準備

9

10 of 84

事前準備

VS Code 3/6

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

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

1

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

2

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

POINT

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

1

選ぶ

2

クリック

事前準備

10

11 of 84

事前準備

VS Code 4/6

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

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

1

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

2

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

POINT

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

1

2

事前準備

11

12 of 84

事前準備

VS Code 5/6

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

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

1

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

POINT

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

1

クリック

事前準備

12

13 of 84

事前準備

VS Code 6/6

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

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

1

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

2

「完了」をクリック

1

2

事前準備

13

14 of 84

事前準備

補足

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

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

1

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

2

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

POINT

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

1

閉じる

2

任意

事前準備

14

15 of 84

事前準備

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

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

Luma(勉強会ページ)

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

https://luma.com/lmy1gn6j

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

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

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

POINT

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

事前準備

15

16 of 84

STEP 1

① Claude 環境セットアップ

Claude Code をインストールし、事前メールで配布した API キーを設定します。

VS Code を入れた場合は、拡張機能(Claude Code パネル)に設定して使います。

VS Code がない場合は PowerShell から進めます(ターミナルでの利用は任意)。

ターミナルを開く

Claude Code の導入

API キーの設定

拡張機能から使う

① Claude 環境セットアップ

16

17 of 84

① Claude 環境

1/7

VS Code でターミナルを開く

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

1

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

2

「New Terminal」をクリック

1

2

① Claude 環境

17

18 of 84

① Claude 環境

2/7

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

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

1

2

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

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

① Claude 環境

18

2

1

19 of 84

① Claude 環境

3/7

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

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

1

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

2

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

1

2

① Claude 環境

19

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

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

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

POINT

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

20 of 84

① Claude 環境

4/7

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

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

1

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

2

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

注意

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

1

2

① Claude 環境

20

21 of 84

① Claude 環境

補足

【補足】PowerShell から Claude をインストールする

VS Code をインストールしていない場合は、Windows PowerShell から同じコマンドで Claude をインストールできます。

1

スタートメニューで「PowerShell」を検索して起動する

2

下のコマンドを1行ずつ貼り付けて Enter

① Claude 環境

21

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

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

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

claude --version # 入ったことを確認する

POINT

「Claude Code successfully installed!」と表示されれば成功です。コマンドが見つからない場合は、PowerShell を閉じて開き直してから、もう一度試してください。

このあとの API キーの設定も、PowerShell で同じように行えます。

22 of 84

① Claude 環境

5/7

API キーを設定する

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

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

​

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

注意

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

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

1

2

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

① Claude 環境

22

23 of 84

① Claude 環境

6/7

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

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

1

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

2

「+ New session」をクリック

3

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

POINT

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

1

開く

2

新規

3

① Claude 環境

23

24 of 84

① Claude 環境

7/7

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

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

1

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

2

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

POINT

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

1

2

① Claude 環境

24

25 of 84

① 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 環境

25

26 of 84

① Claude 環境

任意 2/2

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

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

1

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

2

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

1

2

① Claude 環境

26

27 of 84

STEP 2

② プログラム作成

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

生成を待つあいだは休憩です。ミニハッカソンに向けて審査員に質問・相談できます。

休憩のあとは、スプレッドシートのアドレス宛てに実際に devnet SOL を送り合います。

プロンプトを投げる

休憩(審査員に質問)

アプリを起動

ウォレット接続

送り合う

② プログラム作成

27

28 of 84

② プログラム作成

これから作るもの(テンプレートのプロンプト)

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

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

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

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

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

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

送る

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

見える

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

残る

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

② プログラム作成

28

29 of 84

② プログラム作成

1/16

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

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

1

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

2

送信ボタン(↑)をクリック、または Enter

POINT

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

1

2

② プログラム作成

29

30 of 84

② プログラム作成

2/16

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

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

1

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

2

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

3

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

1

2

3

② プログラム作成

30

31 of 84

BREAK

休憩(生成待ち)& 審査員への質問

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

休憩のあいだに、ミニハッカソンに向けて審査員に質問したり、アドバイスをもらったりできます。

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

生成はそのまま進行

審査員に質問

アドバイスをもらう

遅れている人のフォロー

休憩

31

32 of 84

② プログラム作成

3/16

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

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

1

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

2

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

3

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

注意

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

1

2

3

② プログラム作成

32

33 of 84

② プログラム作成

4/16

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

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

1

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

2

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

注意

ターミナルの開き方はP17, 18を参照。

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

1

② プログラム作成

33

cd solana-devnet-transfer-html

python -m http.server 8000

npx serve . # Node.js の場合

34 of 84

② プログラム作成

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

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

ちがってよい

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

読み替える

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

困ったら

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

注意

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

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

② プログラム作成

34

35 of 84

② プログラム作成

例 5/16

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

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

1

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

2

「Select Wallet」をクリック

1

2

② プログラム作成

35

36 of 84

② プログラム作成

6/16

Phantom の設定を開く

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

1

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

POINT

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

1

クリック

② プログラム作成

36

37 of 84

② プログラム作成

7/16

Phantom を devnet 表示に切り替える(1/2)

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

1

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

POINT

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

1

② プログラム作成

37

38 of 84

② プログラム作成

8/16

Phantom を devnet 表示に切り替える(2/2)

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

1

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

注意

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

1

② プログラム作成

38

39 of 84

② プログラム作成

9/16

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

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

1

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

POINT

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

1

確認

② プログラム作成

39

40 of 84

② プログラム作成

例 10/16

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

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

1

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

2

一覧の「Phantom」をクリック

1

2

② プログラム作成

40

41 of 84

② プログラム作成

11/16

Phantom で接続を承認する

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

1

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

2

「接続」をクリック

1

2

② プログラム作成

41

42 of 84

② プログラム作成

例 12/16

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

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

1

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

2

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

1

2

② プログラム作成

42

43 of 84

② プログラム作成

例 13/16

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

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

1

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

2

数量(SOL)を入力する

3

「送金する」をクリック

1

2

3

② プログラム作成

43

44 of 84

② プログラム作成

例 14/16

Phantom で署名する

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

1

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

2

Phantom の「確認」をクリック

1

2

② プログラム作成

44

45 of 84

② プログラム作成

例 15/16

Finalized(確定)まで確認する

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

1

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

2

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

3

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

1

2

3

② プログラム作成

45

46 of 84

② プログラム作成

16/16

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

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

1

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

2

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

3

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

1

2

3

② プログラム作成

46

47 of 84

② プログラム作成

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

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

1

相手を選ぶ

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

2

送金する

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

3

受信を確認する

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

POINT

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

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

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

② プログラム作成

47

48 of 84

STEP 3

③ 発表資料の作成

スクリプト作成ツールにチーム情報を入力して、スクリプトを作ります。

そのスクリプトを Claude Code に渡して、発表資料(pptx)を作ります。

できたら中身を確認し、手直しや細かい修正を指示して仕上げます。

スクリプト作成ツール

pptx で生成

手直し・修正の指示

③ 発表資料の作成

48

49 of 84

③ 発表資料

発表資料を作る流れ

スクリプト作成ツールで作ったスクリプトを Claude Code に渡すと、発表資料(pptx)と発表原稿ができます。

1

ツールに入力する

スクリプト作成ツールにチーム情報を入力し、スクリプトを作る(埋められない項目は空欄のままでよい)

2

pptx で生成する

Claude Code パネルの入力欄に貼り付けて送信する。足りない項目を質問されたら答える

3

手直しする

できた pptx を開いて確認し、直したいところを Claude Code に指示して修正する

POINT

作業は ② と同じ Claude Code パネルで行います。資料用に新しいフォルダを作ると、アプリのファイルと混ざらず管理しやすくなります(P58 参照)。

スクリプト作成ツール:https://yntest3.github.io/create_script_tool/(使い方は P51〜53)

③ 発表資料の作成

49

50 of 84

③ 発表資料

審査の5項目(発表資料で意識すること)

成果発表会では、次の5項目を各1〜5点で採点し、合計点で順位を決めます。コードの中身や難しさは評価対象外です。

1

AI活用

1〜5点

作る過程やプロダクトでAIをどう使ったか。工夫や試行錯誤

2

アイデア・課題設定

1〜5点

誰のどんな困りごとを解くか。面白さ・新しさ

3

動くもの

1〜5点

発表で実際に動く様子を見せられたか

4

Solana・ブロックチェーンの活かし方

1〜5点

なぜブロックチェーンを使うのかに答えられるか

5

伝え方

1〜5点

3分で要点が伝わるか。質疑応答に答えられるか

POINT

発表はプレゼン3分+質疑応答2分です。スクリプト作成ツールが作るスクリプトでは、この5項目に沿ったスライド構成を指定しています。

③ 発表資料の作成

50

51 of 84

③ 発表資料

スクリプト作成ツールを開く

ブラウザで次の URL を開きます。チーム情報を入力するだけで、発表資料を作るためのスクリプトができます。

発表資料スクリプト作成ツール

チーム情報を入力して、Claude Code に渡すスクリプトを作ります。

ツールが開けないとき

付録のスクリプト全文を順につなげ、【   】を書き換えて使います。

付録 P81〜84

POINT

入力した内容はページの中だけで使われ、どこにも送信・保存されません。ページを閉じると消えるので、作ったスクリプトはコピーか「テキストで保存」で控えておいてください。

③ 発表資料の作成

51

52 of 84

③ 発表資料

ツールに入力する項目

ツールの入力欄は次の6つのまとまりに分かれています。審査の5項目(P50)につながる内容です。

まとまり

入力する項目

ポイント

チームと作品

チーム名、プロジェクト名、メンバー(氏名/所属/担当)

メンバーは1人1行で入力

課題

誰の困りごとか、その人が今どうやって対処しているか・かかる時間や手間

具体的な一人を思い浮かべて書く(審査②)

作ったもの・デモ

作ったもの、まだ実装できていないこと、デモURL、コードのリンク、デモで見せる操作

実装済みの機能だけを書く(審査③)

AI活用

使ったAIツールと用途、うまくいかなかったこと/どう直したか、AIが書いた部分と直した部分

うまくいかなかった例は2例以上(審査①)

Solana・ブロックチェーン

Solanaで何をしているか、devnet / mainnet、Program ID・トランザクション署名

なぜブロックチェーンかを書く(審査④)

今後

今後やりたいこと

未実装の機能はここに書く

POINT

埋められない項目は空欄のままで構いません。空欄は【   】のままスクリプトに入り、Claude Code が資料を作る前に、特に重要な不足を質問してくれます。

③ 発表資料の作成

52

53 of 84

③ 発表資料

スクリプトを作成して Claude Code に貼り付ける

入力が終わったら、ツールの「スクリプトを作成」を押します。できたスクリプトをコピーして Claude Code に渡します。

1

「スクリプトを作成」を押す

入力した内容から、Claude Code に渡すスクリプトが画面の下にできる

2

未入力の項目を確認する

未入力の欄は黄色になり、件数が表示される。入力できるものは埋めて、もう一度作成する

3

コピーして貼り付ける

「コピー」を押し、Claude Code パネルの入力欄に貼り付けて送信する

POINT

資料用に新しいフォルダを作り、そこで Claude Code を開いてから貼り付けると、アプリのファイルと混ざりません(P58 参照)。

足りない項目を質問されたら、チャットで答えてください。答え終わると資料づくりが始まります。

③ 発表資料の作成

53

54 of 84

③ 発表資料

生成された資料を手直しする

できた pptx を開いて確認し、直したいところを Claude Code に具体的に伝えます。指示の例です。

3枚目の箇条書きを4行以内に減らしてください。

5枚目の構成図を、ユーザー→アプリ→AI→Solana の順に左から右へ並べてください。

文字が枠からはみ出しているスライドを直してください。

何枚目かを書く

「3枚目の」のように、直したいスライドを番号で伝えます。

どう直すかを書く

「4行以内に」「左から右へ」のように、直したあとの形を具体的に書きます。

実装していないことは書かない

動かない機能が書かれていたら、「今後」に移すよう指示します。

注意

生成された内容は必ず自分たちで読み直し、実際に作ったものや数字と違うところは直してから発表に使ってください。

③ 発表資料の作成

54

55 of 84

STEP 4

④ ミニハッカソンに向けて準備

チーム単位で、ミニハッカソンに向けたアプリ作成等準備を開始してください。

以降のスライドについては、ミニハッカソンに向けたアプリ作成や公開等の補足資料です。

スクリプト例

Claude Code で作成

GitHub で公開

みんなで遊ぶ

④ ミニハッカソンに向けて準備

55

56 of 84

④ ハッカソン準備

スクリプト例 1/2

スクリプト例(② を改良する)

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

もっと簡単な送金アプリ

改良版

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

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

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

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

READMEに起動方法、GithubPagesの公開手順を記載してください。

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

改良版

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

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

④ ミニハッカソンに向けて準備

56

57 of 84

④ ハッカソン準備

スクリプト例 2/2

スクリプト例(新しく作る)

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

2D コイン収集ゲーム

新規版

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

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

ReactとTypeScriptを使用し、起動方法及びGithubPagesの公開手順をREADMEに記載してください。

POINT

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

④ ミニハッカソンに向けて準備

57

AIダンジョン冒険ゲーム

新規版

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

起動方法及びGithubPagesの公開手順をREADMEに記載してください。

58 of 84

④ ハッカソン準備

1/14

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

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

1

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

2

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

3

「Select folder」をクリック

POINT

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

1

2

3

④ ミニハッカソンに向けて準備

58

59 of 84

④ ハッカソン準備

2/14

Claude Code に指示を出す

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

1

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

2

送信ボタン(↑)をクリック、または Enter

POINT

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

1

2

④ ミニハッカソンに向けて準備

59

60 of 84

④ ハッカソン準備

3/14

新しいリポジトリを作る(入口)

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

1

右上の「+」をクリック

2

「New repository」をクリック

1

2

④ ミニハッカソンに向けて準備

60

61 of 84

④ ハッカソン準備

4/14

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

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

1

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

2

説明(任意)を入力

3

「Public」を選択

5

「Create repository」をクリック

1

2

3

5

④ ミニハッカソンに向けて準備

61

4

4

「Add README」をOnにする

62 of 84

④ ハッカソン準備

5/14

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

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

1

「Add file」をクリック

2

「Upload files」をクリック

1

2

④ ミニハッカソンに向けて準備

62

63 of 84

④ ハッカソン準備

6/14

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

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

1

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

2

左の枠にドラッグ&ドロップ(「choose your files」から選んでもよい)

POINT

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

1

2

④ ミニハッカソンに向けて準備

63

64 of 84

④ ハッカソン準備

7/14

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

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

1

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

2

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

3

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

注意

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

1

2

④ ミニハッカソンに向けて準備

64

65 of 84

④ ハッカソン準備

8/14

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

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

1

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

2

緑の「Commit changes」をクリック

POINT

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

1

2

④ ミニハッカソンに向けて準備

65

66 of 84

④ ハッカソン準備

9/14

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

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

1

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

2

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

1

2

④ ミニハッカソンに向けて準備

66

67 of 84

④ ハッカソン準備

10/14

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

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

1

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

POINT

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

1

クリック

④ ミニハッカソンに向けて準備

67

68 of 84

④ ハッカソン準備

11/14

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

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

1

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

2

Branch の「None」をクリック

1

2

④ ミニハッカソンに向けて準備

68

69 of 84

④ ハッカソン準備

12/14

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

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

1

Branch を「main」にする

2

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

3

「Save」をクリック

1

2

3

④ ミニハッカソンに向けて準備

69

70 of 84

④ ハッカソン準備

13/14

公開されるまで数分待つ

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

1

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

2

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

1

2

④ ミニハッカソンに向けて準備

70

71 of 84

④ ハッカソン準備

14/14

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

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

1

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

2

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

1

2

④ ミニハッカソンに向けて準備

71

72 of 84

④ ハッカソン準備

公開したアプリで遊んでもらう

公開 URL をスプレッドシートで共有し、他の学生や講師に遊んでもらいましょう。

1

URL を記入する

公開 URL(https://<ユーザー名>.github.io/<リポジトリ名>/)をスプレッドシートに記入する

2

他の人のアプリを開く

スプレッドシートから他の人の URL を開き、Phantom を接続して遊んでみる

3

感想を伝える

気づいたことを伝え合い、ミニハッカソンに向けた改良に生かす

POINT

公開したアプリは devnet で動きます。遊ぶ側も Phantom を testnet モード(devnet 表示)にしておいてください(P36〜39 参照)。

公開に失敗する場合は、トラブルシューティング(P77)を確認してください。

④ ミニハッカソンに向けて準備

72

73 of 84

④ ハッカソン準備

補足 1/4

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

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

1

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

2

git branch -M main を実行

1

2

④ ミニハッカソンに向けて準備

73

git remote add origin \

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

git push -u origin main

74 of 84

④ ハッカソン準備

補足 2/4

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

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

1

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

注意

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

1

④ ミニハッカソンに向けて準備

74

75 of 84

④ ハッカソン準備

補足 3/4

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

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

1

要求される権限(Repositories など)を確認

2

「Authorize git-ecosystem」をクリック

1

2

④ ミニハッカソンに向けて準備

75

76 of 84

④ ハッカソン準備

補足 4/4

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

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

1

「Authentication Succeeded」の表示を確認

1

④ ミニハッカソンに向けて準備

76

77 of 84

トラブルシューティング

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 アカウントを使っていると、別のアカウントの情報が保存されていて失敗することがあります。うまくいかないときはサポートに声をかけてください。

トラブルシューティング

77

78 of 84

トラブルシューティング

2/2

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

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

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

​

<表示されたエラーメッセージ>

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

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

直前の操作を書く

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

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

ブラウザの再読み込み(Ctrl+Shift+R)を試してから相談します。

注意

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

トラブルシューティング

78

79 of 84

トラブルシューティング

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

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

やりたいこと

コマンド/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

発表資料スクリプト作成ツール

トラブルシューティング

79

devnet SOL を受け取る

https://faucet.solana.com

80 of 84

GOAL CHECK

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

✓

Claude Code の環境

VS Code(または PowerShell)から起動でき、API キーの設定も完了している

✓

SOL 送受信アプリ

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

✓

送り合い

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

✓

発表資料のたたき台

スクリプト作成ツールから発表資料(pptx)を作り、手直しを始めている

✓

チームのアプリ

ミニハッカソンに向けて、チームでアプリを作り始めている

✓

公開と共有

④ まで進んだ人は GitHub Pages の URL をスプレッドシートで共有できている

お疲れさまでした。作ったアプリと発表資料は、Claude Code に指示しながら成果発表会まで改良を続けられます。

おわりに

80

81 of 84

付録

スクリプト全文 1/4

【付録】スクリプト全文(前提と発表の条件)

ツールが作る文章の全文です。開けないときは 1/4〜4/4 をつなげ、【   】を書き換えて使います。

あなたは学生ハッカソンの発表資料づくりを支援するプレゼン設計の専門家です。

​

以下の条件とチーム情報をもとに、発表資料の全スライド本文と発表原稿を作成してください。

​

## 発表の条件

- イベント:Solana Student Bootcamp 最終回 成果発表会(2026年11月26日)

- 持ち時間:プレゼン3分+質疑応答2分

- スライド枚数:7枚(本編)+想定Q&A(付録、投影しない)

- 審査:次の5項目を各1〜5点で採点し合計点で順位決定

1. AI活用:作る過程やプロダクトでAIをどう使ったか。工夫や試行錯誤

2. アイデア・課題設定:誰のどんな困りごとを解くか。面白さ・新しさ

3. 動くもの:発表で実際に動く様子を見せられたか

4. Solana・ブロックチェーンの活かし方:なぜブロックチェーンを使うのかに答えられるか

5. 伝え方:3分で要点が伝わるか。質疑応答に答えられるか

- コードの中身や難しさは評価対象外

付録

81

82 of 84

付録

スクリプト全文 2/4

【付録】スクリプト全文(チーム情報)

【   】の部分をチームの内容に書き換えます。埋められない項目は空欄のままで構いません。

## チーム情報

- チーム名:【   】

- メンバー(氏名/所属/担当):【   】

- プロジェクト名:【   】

- 誰の困りごとか(できるだけ具体的な一人として):【   】

- その人が今どうやって困りごとに対処しているか、かかる時間や手間:【   】

- 作ったもの(何ができるか、実装済みの機能だけ):【   】

- まだ実装できていないこと:【   】

- デモURL:【   】

- デモで見せる操作(開始から結果まで):【   】

- 使ったAIツールと用途:【   】

- AIでうまくいかなかったこと/どう直したか(2例以上):【   】

- AIが書いた部分と自分たちで直した部分:【   】

- Solanaで何をしているか(オンチェーンに何を記録・移転しているか):【   】

- devnet / mainnet のどちら:【   】

- Program ID・代表的なトランザクション署名(あれば):【   】

- コードのリンク:【   】

- 今後やりたいこと:【   】

付録

82

83 of 84

付録

スクリプト全文 3/4

【付録】スクリプト全文(スライド構成)

スライドの順番と枚数は、この構成で固定します。

## スライド構成(この順番・この枚数で固定)

1. 表紙:プロジェクト名、「誰の・何を・どうする」を表した一文キャッチコピー、チーム名、メンバーと担当、デモURL

2. 課題:誰のどんな困りごとか。現状のやり方とその負担を数字で1つ示す

3. 解決策:何を作ったか。主要画面の説明。現状のやり方との before / after 比較

4. デモ:実演の流れ。見せる操作を順番に書き、デモが動かなかった場合に代わりに見せる静止画の指示も入れる

5. なぜSolana/ブロックチェーンなのか:普通のデータベースではなくブロックチェーンを使う理由。構成図(ユーザー→アプリ→AI→Solana)の説明。オンチェーンの証跡

6. AI活用メモ:使ったツールと用途の表、うまくいかなかったことと直し方を2例、開発にかかった時間などの数字

7. 今後の展望とリンク一覧(デモURL、コード、Solana Explorer)

POINT

4. デモでは、デモが動かなかったときに見せる静止画も用意しておくと、発表本番で慌てずに済みます。

付録

83

84 of 84

付録

スクリプト全文 4/4

【付録】スクリプト全文(守ってほしいこと・出力)

最後の部分です。1/4〜4/4 をつなげて送信すると、足りない項目の質問のあとに資料づくりが始まります。

## 守ってほしいこと

- 1スライド1メッセージ。スライド本文は体言止め・簡潔な箇条書きで、1枚あたり箇条書き4行以内、1行40字以内

- 文章は会話調にせず、スライドにそのまま貼れる文言にする

- **実装していない機能を、動くかのように書かないこと**。未実装のものは「今後」として明確に分ける

- 専門用語は、ブロックチェーンに詳しくない審査員にも通じる言い方に置き換える

- 「革新的」「圧倒的」などの空疎な形容は使わず、事実と数字で書く

​

## 出力してほしいもの

1. スライド7枚分の本文(各スライドにタイトルと箇条書き、話す秒数の目安)

2. 3分で読み切れる発表原稿(合計180秒。デモに最も時間を割く配分。文字数の目安も示す)

3. 想定される質問と回答を5問(うち1問は「なぜブロックチェーンが必要なのか」、1問は「AIにどこまで任せたのか」)

4. この資料で審査5項目のうち弱い項目と、その補強案

​

空欄のまま埋められていない項目があれば、資料を作る前に、特に重要な不足だけ3つまで質問してください。

​

出力はPowerPointファイル(.pptx、16:9)としても保存してください。フォントは全スライド共通で、本文24pt以上にしてください。

付録

84