Skip to content

A-t-s-u-s-h-i/solana-developer-hub-workshop-20240326

BranchesTags
 
 

Repository files navigation

Solana Developer Hub Workshop #4

https://lu.ma/dwti8pwv

  • 開催場所: 東京
  • 時間: 3月26日火曜日 19:00 - 20:30 (18:30 入場開始)

ワークショップコンテンツ

必要なもの

1. ワークショップをはじめる準備をしよう

本ワークショップではGitHub Codespaceを利用して開発を行い、GitHub Pagesでコンテンツの公開、GitHub Actionsでデプロイを行います。 これらの設定を行っていきましょう。

1.1. GitHubリポジトリをforkしよう

下記のリポジトリを開きます。

右上の「Fork」ボタンをクリックします。

Create a new forkの画面で何も設定は変更せずに「Create fork」ボタンをクリックします。

少し待つと下記のようにリポジトリが表示されます。

1.2. GitHub Pagesを有効にする

GitHub Pagesを使ってコンテンツを公開するため、Pagesの設定を行います。 まず、タブのSettingsを押してSettingsページを開きましょう。

次の左側のメニューのPagesを押して、Pagesの設定を開きます。

Pagesの設定のBuild and deploymentにあるSourceを「Deploy from a branch」から「GitHub Actions」に変更します。

下記のように画面が表示されれば設定完了です。

1.3. GitHub Actionsを有効にする

GitHub Pagesでコンテンツを公開するために、GitHub Actionsを有効にします。 まず、タブのActionsを押してActionsページを開きましょう。

Actionsページを開くと有効にしていいのか聞かれるため「I understand my workflows, go ahead and enable them」ボタンを押して、Actionsを有効にします。

下記のように画面が表示されれば設定完了です。

1.4. Codespacesを開く

右上の「Code」ボタンをクリックします。

次に開いたメニューの「Codespaces」タブをクリックします。

タブ内の「Create codespaces on main」ボタンをクリックします。

以下のように表示されたら成功です。

1.5. プロジェクトをセットアップする

1.5.1. .envファイルを作成する

プロジェクトのセットアップを行います。 下記のターミナルタブにコマンドを入力していきましょう。

npm run initとコマンドを入力して実行すると下記のように表示され、.envファイルが作成されます。

npm run init

> solana-developer-hub-workshop-20240326@0.0.0 init
> cp .env.template .env

.envファイルを開くと下記のような設定が書かれます。

VITE_RPC_ENDPOINT=https://api.devnet.solana.com
VITE_NFT_META_URI=https://raw.githubusercontent.com/[your name]/solana-developer-hub-workshop-20240326/main/src/assets/metada.json

[your name]の部分をあなたのGitHubアカウントの名前に変更してください。

1.5.2. プロジェクトの依存解決をする

npm installとコマンドを入力すると下記のように表示され、node_modulesディレクトリが作成されます。

npm install

...

added 2415 packages, and audited 2417 packages in 1m

...

※ Warnなどいろいろ出ますがaddedの行が出力されれば問題ありません

1.5.3. 開発用サーバーを立ち上げる

npm run devとコマンドを入力すると下記のように表示され、開発用サーバーが立ち上がります。

npm run dev

  VITE v5.1.5  ready in 791 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

右下に出てくるポップアップの「ブラウザーで開く」ボタン、またはポートタブから開発用サーバーを開いてください。

下記のような画面を表示できたら開発する準備が完了です。

2. ウォレットに接続できるようにする

「CONNECT WALLET」ボタンを押しても今は何も起きません。 src/pages/WalletConnectPane.jsxを開いて、showWalletModal関数の中を実装しましょう。

src/pages/WalletConnectPane.jsx

  const showWalletModal = () => {
+    setVisible(true);
  }

この状態で再度「CONNECT WALLET」ボタンをクリックするとウォレットに接続することができます。

このsetVisibleという関数は@solana/wallet-adapterのReact向けの機能になる@solana/wallet-adapter-react-uiの機能で、ウォレット接続モーダルを表示してくれます。 今回は省略しましたが、利用するには下記のようにCSSを読み込むこと、ConnectionProvider、WalletProvider、WalletModalProviderを設定することが必要になります。

src/App.jsx

// モーダルのCSS設定を読み込み
import "@solana/wallet-adapter-react-ui/styles.css";

...

export const App = () => {
  return (
    ...
    
      <ConnectionProvider endpoint={RPC_ENDPOINT}>
        <WalletProvider wallets={[]} autoConnect>
          <WalletModalProvider>
            ...
          </WalletModalProvider>
        </WalletProvider>
    
    ...
  );
};

ウォレットを接続して下記の表示ができたら成功です。

3. NFTを発行する

3.1. 発行するNFTの設定を行う

まず、今はk-kinzalのアイコンが設定されているため、src/assets/nft.pngを好きな画像に変えましょう。 おすすめは正方形のの画像です。

次にsrc/assets/metada.jsonを好みの形に変更しましょう。

{
  "name": "Solana Developer Hub Workshop #4",
  "description": "https://github.com/k-kinzal/solana-developer-hub-workshop-20240326",
  "image": "https://github.com/k-kinzal/solana-developer-hub-workshop-20240326/blob/main/src/assets/nft.png?raw=true",
  "external_url": "https://github.com/k-kinzal/solana-developer-hub-workshop-20240326",
  "attributes": [],
  "properties": {
    "files": [
      {
        "uri": "https://github.com/k-kinzal/solana-developer-hub-workshop-20240326/blob/main/src/assets/nft.png?raw=true",
        "type": "image/png"
      }
    ],
    "category": "image",
    "creators": [
      {
        "address": "GezdpBqe9R8ZYpfUAf64NaoqYXNvoSL9gE5ZMqDFcZYa"
      }
    ]
  }
}

最小限の変更としては https://github.com/k-kinzal の部分をご自身のユーザー名に変更し、.properties.creators[0].addressをご自身のウォレットアドレスに変更してください。

これらの変更後に下記のコマンドを実行するとNFTの情報を変更できます。

git add src/assets/
git commit -m "update NFT"

[main fd47b3f] update NFT
 1 file changed, 0 insertions(+), 0 deletions(-)
git push origin HEAD

Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 2 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 55.42 KiB | 18.47 MiB/s, done.
Total 5 (delta 2), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/k-3278/solana-developer-hub-workshop-20240326
   6278106..fd47b3f  HEAD -> main

開発用サーバーで下記のように画像などが変わったら成功です。

3.2. NFTをMintできるようにする

「MINT」ボタンを押しても今は何もおきません。 src/pages/MintPane.jsxを開いてmintNft関数の中を実装しましょう。

  const mintNft = async () => {
+     const builder = createNft(umi, {
+       generateSigner(umi),
+       name: metadata.name,
+       uri: NFT_META_URI,
+       sellerFeeBasisPoints: percentAmount(0),
+     });
+     const { signature } = await builder.sendAndConfirm(umi);
  };

createNftでNFTを作成する準備をします。その後にsendAndConfirmでSolanaネットワークに送信することでNFTを作成することができます。

次にMintが完了したさいにsignatureという状態をMintを実行したトランザクションのシグネチャに変えます。

  const [signature, setSignature] = useState(null);
  
  ...
  
  const mintNft = async () => {
     const builder = createNft(umi, {
       generateSigner(umi),
       name: metadata.name,
       uri: NFT_META_URI,
       sellerFeeBasisPoints: percentAmount(0),
     });
     const { signature } = await builder.sendAndConfirm(umi);
+     setSignature(signature);
  };

signatureという状態では設定の有無で「MINT」ボタンを出すか、Transactionへのリンクを出すかを決定しています。

{/* 署名がない場合はMintボタンを表示 */}
{signature === null && (
  <Button
          variant="contained"
          color="secondary"
          size="small"
          onClick={mintNft}
          disabled={loading}
  >
    Mint
  </Button>
)}
{/* 署名がある場合はトランザクションへのリンクを表示 */}
{signature !== null && (
  <Button
          size="small"
          href={`https://explorer.solana.com/tx/${signature}`}
          target="_blank"
  >
    View Transaction
  </Button>
)}

ここまで変更できたら、変更の内容を反映しましょう。

これらの変更後に下記のコマンドを実行するとNFTの情報を変更できます。

git add .
git commit -m "ワークショップに合わせてNFTを作成できるように変更"

[main fd47b3f] ワークショップに合わせてNFTを作成できるように変更
 1 file changed, 0 insertions(+), 0 deletions(-)
git push origin HEAD

Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 2 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 55.42 KiB | 18.47 MiB/s, done.
Total 5 (delta 2), reused 0 (delta 0), pack-reused 0 (from 0)
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
To https://github.com/k-3278/solana-developer-hub-workshop-20240326
   6278106..fd47b3f  HEAD -> main

4. GitHub Pagesを確認する

GitHub PagesのURLを確認しましょう。 タブのSettingを押します。

Settingタブを開いたら左側のメニューからPagesを選択します。

Pagesの「Visit Site」ボタンを押してPagesを開きます。

下記のようにページを開けたら成功です。実際にMintして遊んでみましょう。

ここまでできたらXに #SolDevHub というハッシュタグをつけてURLをシェアしましょう。

注意点としてPagesに公開したページはSolanaネットワークのMainnet-Betaと接続しています。 実際にMintするにはSOLが必要になるため、実際に動かしたい場合には取引所などからSOLを手に入れてください。

5. (Optional) 自分だけのNFT発行をしてみよう

5.1. Themeを変えてみよう

src/theme/pallete.jsを変更すると各種色を変更することができます。 好きな色に変更して、独自のNFTのMint画面を作ってみましょう。

Theme設定に関して詳しくはは下記のMUIのドキュメントを参照してください。

5.2. 画像やメタデータを別のところに保存してみよう

発行しているNFTの画像やメタデータはGitHubで管理しています。 しかし、GitHubのリポジトリを削除したり、GitHubが停止するとアクセスできなくなってしまいます。

そこで、MetaplexのUploaderという機能を使い、別の場所に画像やメタデータを保存できるようにしてみましょう。

5.3. Candy Machineを使ってガチャをできるようにしてみよう

MetaplexのCandy Machineを使うとMintさいに事前に設定した複数のNFTから1つだけをMintする仕組みを作ることができます。 常に同じのではなくMintする度に変わるNFTを作ってみましょう。

Candy Machineに関して詳しくは下記のMetaplexのドキュメントを参照してください。

関連リンク

今回利用している技術のリンクです。 より、知識を深めたい方は目を通すことをおすすめします。

About

SolanaでNFTを作るワークショップのコンテンツ

k-kinzal.github.io/solana-developer-hub-workshop-20240326/

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 91.4%
  • TypeScript 6.0%
  • HTML 2.3%
  • CSS 0.3%