Previous << 1 - 基本編Part1
Next >> 3 - 基本編Part3
Flow blockchainのもう一つの特徴はリソース・プログラミングです。
これはリソースを手に入れておけば、そのリソースのメソッドを自由に呼び出せるというものです。例えば武器屋リソースがあれば武器を売ったり買ったりでき、盗賊リソースがあれば相手の城からお金や金品を頂いたり、戦士リソースであればHPを犠牲にして味方を守ったり、このようなリソースを自由に考えて、作り、ユーザーに配布し、使ってもらうことができます。これらはアイデア次第であり、且つ、誰でも自由に作れます。
但し、これらメソッドはトランザクションであり、本来お金やNFTを移動させるものであるため、ユーザー自身はたとえゲームとわかっていても無闇にしないものであることにご注意ください。これらトランザクションは実装次第でユーザーの負担を和らげる方法があり、それらについては5 ~ 9で解説します。
NFTは本来このリソースの一案として考案されたもの(Flow blockchainの開発者はERC-721 Non-Fungible Tokenの設計者)なので、あなたの思いついたリソースがNFTと同じくらい人気が高まれば、ユーザーはこぞってトランザクションを実行することでしょう。( NFTはイーサリアム上で動くCryptoKittiesゲームの帽子や鞄を所有できるようにしたもの[1]なので、理論上これより価値のあるリソースを考えることは不可能ではありません。下部の脚注参照 )
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
プロジェクトをローカルで動かす
.env.example
を.env
にリネームします。
下記コマンドを実行します。
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をブラウザに貼り付けて、表示します。
エミュレータを起動する
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
を開きます。
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
をクリックすると、以下のようなウォレットを選択する画面が表示されます。
ウォレットの設定部分のエラーを修正する
src/lib/flow/config.ts
をVSCodeで開くと以下のように、以下の修正すべきところに赤の波線が表示されています。
これはTypescriptによるエラーであり、既にメンテナンスがされていない為と推測されます。
src/lib/types/@onflow/index.d.ts
を削除するとエラーが表示されなくなります。
※src/lib/flow/config.ts
を変更する必要はありません。
アカウントにサインイン
ブラウザをリフレッシュし、画面右上のConnect
をクリックして、ポップアップ(ウォレットディスカバリー画面)でServiceAccountを選択します。
画面右上のConnect
部分がアカウント表示に変わります。
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が修正すべきところに赤の波線を表示しています。
これを以下のように修正します。
import "HelloWorld"
access(all) fun main(): String {
return HelloWorld.greeting
}
これでもう一度画面下部のGet greeting
ボタンを押します。
アプリの画面に以下が表示されます。
Current Greeting: Hello, World!
💡もし、エミュレータを再起動している場合は、flow project deploy
コマンドを再び実行して、エミュレータ上にスマートコントラクトを再度デプロイする必要があります。
Transactionコードの修正
- 画面上部の「1. Change your Greeting」のテキストボックスに"Googbye, World!"と入力します。
-
Change greeting
ボタンをクリックします。
以下のポップアップが画面上に表示されます。
これはトランザクションの詳細を示しています。トランザクションはブロックチェーンのStateを変更する処理です。そのため提案者、支払者、承認者の3つの承認関数が必要ですが、このようにウォレットが代わりに用意してくれます (詳しくはDay4で解説します) 。
あとは承認者であるあなたがAPPROVEボタンを押すと、ウォレットのアカウント鍵を使用してトランザクションが送信され、スマートコントラクトのState変数の値が書き換えられます。
ポップアップの中を下にスクロールすると、実際に行うトランザクションコードが表示されます。
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が修正すべき箇所を赤の波線で表示してくれます。
これを以下のように修正します。
import "HelloWorld"
transaction(newGreeting: String) {
prepare(signer: &Account) {
}
execute {
HelloWorld.changeGreeting(newGreeting: newGreeting)
}
}
- 再度、画面上部の「1. Change your Greeting」テキストボックスに"
Googbye, World!
"と入力します。 -
Change greeting
ボタンをクリックします。 -
APPROVE
ボタンをクリックします。
こちらのWebアプリは非常によくできているので、私はgit clone
して動作を見てみると大変勉強になると思い、今回記事にしました。こちらのWebアプリは以下のYouTubeで動きを確認することが出来ます。
Flow blockchain / Cadence version1.0ドキュメント
脚注
1: NFTのWebサイト(下記)にあるようにNFTはCryptoKittiesを開発したDieter Shirleyによって考案・設計されました。イーサリアムと違い、Dieter Shirley開発のFlow blockchainではそのリソースを通じて好きなメソッドを呼ぶことが可能です。