LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@flowcadence

ブロックチェーンゲームの作り方2 基本編Part2

Last updated at Posted at 2024-12-29

Previous << 1 - 基本編Part1
Next >> 3 - 基本編Part3

Flow blockchainのもう一つの特徴はリソース・プログラミングです。
これはリソースを手に入れておけば、そのリソースのメソッドを自由に呼び出せるというものです。例えば武器屋リソースがあれば武器を売ったり買ったりでき、盗賊リソースがあれば相手の城からお金や金品を頂いたり、戦士リソースであればHPを犠牲にして味方を守ったり、このようなリソースを自由に考えて、作り、ユーザーに配布し、使ってもらうことができます。これらはアイデア次第であり、且つ、誰でも自由に作れます。

但し、これらメソッドはトランザクションであり、本来お金やNFTを移動させるものであるため、ユーザー自身はたとえゲームとわかっていても無闇にしないものであることにご注意ください。これらトランザクションは実装次第でユーザーの負担を和らげる方法があり[脚注1]、それらについては5 ~ 9で解説します。

NFTは本来このリソースの一案として考案されたもの(Flow blockchainの開発者はERC-721 Non-Fungible Tokenの設計者)なので、あなたの思いついたリソースがNFTと同じくらい人気が高まれば、ユーザーはこぞってトランザクションを実行することでしょう。( NFTはイーサリアム上で動くCryptoKittiesゲームの帽子や鞄を所有できるようにしたもの[脚注2]なので、理論上これより価値のあるリソースを考えることは不可能ではありません。)

TL;DR ESportsゲームも参考になると思うけど他に参考になるアプリはないの?

参考になるFlowブロックチェーン・アプリといったらこの人のしかないでしょう、Jacob Tucker氏!

Flowブロックチェーンアプリの開発方法を世界中に教えてくれた人物です。

YouTube: ↓

このYouTubeチャンネルは非常に評判が良く、2022年ごろのアプリ開発者のバイブル的に人気を博しました。2021年のパート1から順に見てみることをおすすめします。

参考になるFlowアプリを触る！

彼が1年前に作成した、SvelteKit Webフレームワークを使用したHelloWorldアプリをここでご紹介します。

半年前にCadenceがバージョン1.0になった為、少し修正が必要なのですが…!?

Why Flow

FLOW（または$FLOW）トークンは、Flowネットワークのネイティブ通貨です。開発者およびユーザーは、FLOWを使用してネットワーク上で取引(transact)を行うことができます。開発者は、ピアツーピア決済(他人同士の決済)、サービス料金徴収、または消費者向け特典(rewards)のために、FLOWを直接アプリに統合することができます。


ということでやっていきます、P2P(ピアツーピア)決済アプリ開発!

今回は既にあるv1.0未満で開発されたプロジェクトをv1.0で動くようにします。

既存のHelloWorldプロジェクトをインポート

上記サイトのプロジェクトは初学者向けに非常に良いプロジェクトを提供しているのですが、これがv1.0未満のバージョンで作られているので、これをv1.0に対応させて、その動きを見てみます。

💡もし、エミュレータの起動方法やスマートコントラクトのデプロイについて操作に自信がない場合はこちらを参照してください。

以下コマンドをVSCodeのTerminalウィンドウで実行します。

> git clone https://github.com/emerald-dao/0-hello-world-svelte.git

0-hello-world-svelte フォルダをVSCodeで開きます。

npm install

下記コマンドを実行します。

npm install

スクリーンショット 2024-12-29 15.32.39.png

プロジェクトをローカルで動かす

.env.exampleを.envにリネームします。

スクリーンショット 2024-12-29 15.36.22.png

下記コマンドを実行します。

npm run dev

Output:

> 0-hello-world-svelte@0.0.1 dev
> vite dev


Forced re-optimization of dependencies

  VITE v4.5.5  ready in 508 ms

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

出力されたlocalhostのURLをブラウザに貼り付けて、表示します。
スクリーンショット 2024-12-29 15.40.03.png

エミュレータを起動する

VSCodeでターミナルウィンドウをもう一つ開き、以下コマンドを実行します。

flow emulator -v

コントラクトをデプロイする

VSCodeでターミナルウィンドウをもう一つ開き、以下コマンドを実行します。

flow project deploy

しかし、この時点ではv1.0以前のCadenceバージョンで書かれているために以下のような出力が表示され、デプロイが失敗します。

Output:

❌ Command Error: Parsing failed:
error: `pub` is no longer a valid access keyword
 --> :1:0
  |
1 | pub contract HelloWorld {
  | ^^^

error: `pub` is no longer a valid access keyword
 --> :3:4
  |
3 |     pub var greeting: String 
  |     ^^^

error: `pub` is no longer a valid access keyword
 --> :5:4
  |
5 |     pub fun changeGreeting(newGreeting: String) {
  |     ^^^

pubはv1.0以前のCadenceで有効だったアクセス修飾子ですが、v1.0ではaccess(all)と記載する必要があります。

コントラクトを修正する

/src/lib/flow/cadence/contracts/HelloWorld.cdcを開きます。

スクリーンショット 2024-12-29 15.51.05.png

VSCode のExtentionが、このように修正すべきところに赤の波線を表示しています。
pubを全てaccess(all)に置き換えます。

再度、以下コマンドを実行します。すると、正常にスマートコントラクトがエミュレータ上にデプロイされました。

flow project deploy

Output:

Deploying 1 contracts for accounts: emulator-account

HelloWorld -> 0xf8d6e0586b0a20c7 (bd0928d3d76a704e6a6e9d46fcced2f9db62ca34e2f91dd2a71afbd30847857a) 

🎉 All contracts deployed successfully

Dev Walletを起動する

エミュレータが起動している状態で、以下コマンドを実行します。

flow dev-wallet

この状態でブラウザをリフレッシュし、画面右上のConnectをクリックすると、以下のようなウォレットを選択する画面が表示されます。
スクリーンショット 2024-12-29 16.05.31.png

ウォレットの設定部分のエラーを修正する

src/lib/flow/config.ts をVSCodeで開くと以下のように、以下の修正すべきところに赤の波線が表示されています。

スクリーンショット 2024-12-29 16.10.18.png

これはTypescriptによるエラーであり、既にメンテナンスがされていない為と推測されます。
src/lib/types/@onflow/index.d.tsを削除するとエラーが表示されなくなります。

※src/lib/flow/config.tsを変更する必要はありません。

アカウントにサインイン

ブラウザをリフレッシュし、画面右上のConnectをクリックして、ポップアップ(ウォレットディスカバリー画面)でServiceAccountを選択します。

スクリーンショット 2024-12-29 16.17.14.png

画面右上のConnect部分がアカウント表示に変わります。

スクリーンショット 2024-12-29 16.21.19.png

Scriptコードの修正

この状態でブロックチェーンのエミュレータ・ネットワークとやり取りして、データを取得したり、変更したりするのですが、現時点ではエラーになります。画面下部に見えるGet greetingボタンをクリックします。
VSCodeのTerminalウィンドウでflow emulator -vを実行していた場所には以下のようにエラーが出力されます。

Output:

4:19PM WRN ❗  Script reverted                           computationUsed=0 memoryEstimate=5618 scriptID=74835c241cf982db9066fdb1b61714490a8062423963bfd12bbc0ac5c50318e9
4:19PM WRN ERR [74835c] [Error Code: 1101] error caused by: 1 error occurred:
        * [Error Code: 1101] cadence runtime error: Execution failed:
error: `pub` is no longer a valid access keyword
 --> 74835c241cf982db9066fdb1b61714490a8062423963bfd12bbc0ac5c50318e9:3:0
  |
3 | pub fun main(): String {
  | ^^^

そのため、上記エラー内容をヒントに、これをv1.0に対応した状態に修正します。
src/lib/flow/cadence/scripts/getGreeting.cdcを開くと以下のようにVSCode のExtentionが修正すべきところに赤の波線を表示しています。
スクリーンショット 2024-12-29 16.27.34.png

これを以下のように修正します。

import "HelloWorld"

access(all) fun main(): String {
  return HelloWorld.greeting
}

これでもう一度画面下部のGet greetingボタンを押します。

アプリの画面に以下が表示されます。

Current Greeting: Hello, World!

💡もし、エミュレータを再起動している場合は、flow project deployコマンドを再び実行して、エミュレータ上にスマートコントラクトを再度デプロイする必要があります。

Transactionコードの修正

  1. 画面上部の「1. Change your Greeting」のテキストボックスに"Googbye, World!"と入力します。
  2. Change greetingボタンをクリックします。

以下のポップアップが画面上に表示されます。

スクリーンショット 2024-12-30 7.03.14.png

これはトランザクションの詳細を示しています。トランザクションはブロックチェーンのStateを変更する処理です。そのため提案者、支払者、承認者の３つの承認関数が必要ですが、このようにウォレットが代わりに用意してくれます (詳しくはDay4で解説します) 。

あとは承認者であるあなたがAPPROVEボタンを押すと、ウォレットのアカウント鍵を使用してトランザクションが送信され、スマートコントラクトのState変数の値が書き換えられます。

ポップアップの中を下にスクロールすると、実際に行うトランザクションコードが表示されます。

スクリーンショット 2024-12-30 7.09.07.png

Approve(承認)することによってsigner: AuthAccountがトランザクションコードの引数に渡されます。このsignerはアカウントのストレージに保存されたリソースやスマートコントラクト、鍵にアクセスすることができます。

APPROVEボタンをクリックします。

Output

7:12AM DBG ✉️   Transaction submitted                   txID=13a708134d10b3143fefd9f161798136968351ab71c05302597fde499a2f13c9
7:12AM WRN ❗  Transaction reverted                      computationUsed=0 memoryEstimate=20001 txID=13a708134d10b3143fefd9f161798136968351ab71c05302597fde499a2f13c9
7:12AM WRN ERR [13a708] [Error Code: 1101] error caused by: 1 error occurred:
        * transaction preprocess failed: [Error Code: 1101] cadence runtime error: Execution failed:
error: cannot find type in this scope: `AuthAccount`
 --> 13a708134d10b3143fefd9f161798136968351ab71c05302597fde499a2f13c9:4:18
  |
4 |   prepare(signer: AuthAccount) {
  |                   ^^^^^^^^^^^ not found in this scope

エラーになりました。これはAuthAccountがもうv1.0では使用できないからです。

src/lib/flow/cadence/transactions/changeGreeting.cdcを開くと以下のようにVSCode のExtentionが修正すべき箇所を赤の波線で表示してくれます。

スクリーンショット 2024-12-30 7.15.51.png

これを以下のように修正します。

import "HelloWorld"

transaction(newGreeting: String) {
  prepare(signer: &Account) {

  }

  execute {
    HelloWorld.changeGreeting(newGreeting: newGreeting)
  }
}
  1. 再度、画面上部の「1. Change your Greeting」テキストボックスに"Googbye, World!"と入力します。
  2. Change greetingボタンをクリックします。
  3. APPROVEボタンをクリックします。

画面右のアイコンがSealedに変われば成功です。
スクリーンショット 2024-12-30 7.20.23.png

こちらのWebアプリは非常によくできているので、私はgit cloneして動作を見てみると大変勉強になると思い、今回記事にしました。こちらのWebアプリは以下のYouTubeで動きを確認することが出来ます。

Previous << 1 - 基本編Part1

Flow blockchain / Cadence version1.0ドキュメント

Next >> 3 - 基本編Part3

脚注

1: ユーザーの負担を和らげる方法に関しては手段が複数あり、Capabilityを他のアカウントに譲渡できるInboxを使い、ユーザーに代わってトランザクション実行することや、Cadenceコアエンジニアによって開発されたStorefrontコアコントラクトも参考になってきます。

2: NFTのWebサイト(下記)にあるようにNFTはCryptoKittiesを開発したDieter Shirleyによって考案・設計・実装されました。イーサリアムと違い、Dieter Shirley開発のFlow blockchainではそのリソースを通じて好きなメソッドを呼ぶことが可能です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?