【ブロックチェーン技術を学び始めた人向け】CryptoZombies：ゾンビファクトリー作成攻略

©Loom Network

SHARE

クリプトゾンビが完全リニューアルしていますね。

イスカ＠コイナー

Solidityを学ぶゲームとしては世界で一番有名なCryptoZombies。ただ、前提レベルとして既にプログラミングができることが必要となります。そこで、この記事では、プログラミングをしたことないけど、Solidityを学びたいという人に向けて解説しながらCryptoZombiesを攻略していきます。

CryptoZombiesとは？

CryptoZombiesとは、イーサリアムのプログラム言語であるSolidityをゲームを作りながら学べるオンラインゲームです。Solidityを学ぶゲームとしては世界で一番有名なものになります。

実際にプログラムを作成することで、ゾンビを作ったり、戦わせたりすることができます。

マッドサイエンティストな気分に浸れますよ。

イスカ＠コイナー

内容としては下の画像のように、画面左で学習をして、右上のスペースに実際のコードを書いていくという流れになっています。

より詳しくは下記記事をご参考ください。

ゲームを遊びながらdappsプログラミングの勉強ができる？CryptoZombies～始め方～

実際にCryptoZombiesをやってみる

それでは早速ですが、実際にやってみましょう。

イスカ＠コイナー

CryptoZombies攻略チャプター1：レッスンの概要

  1. ページの右にある色々なスライダーを実際に動かしてみること。数字を変えることでゾンビの外観が変わることがわかるだろう。

よし、準備運動はこれくらいで十分だろう。次に進む準備ができたら「次のチャプター」をクリックすれば、次のチャプターから実際にSolidityを教えていくから、覚悟しておけよ！

チャプター１では全くプログラミング知識はいりません。

というのも、これからプログラムで作ることになる、ゾンビが作成される仕組みを学ぶチャプターだからです。赤枠内の横バーをいじると、ゾンビのDNAが変化します。DNAが変化することでゾンビの外観が変わっていますよね。

レッスン１では自動でランダムなDNAを作成することでゾンビ軍団を生み出すゾンビファクトリーを作成していきます。

 

CryptoZombies攻略チャプター2：コントラクト

ゾンビ軍団を生み出すための、ZombieFactoryというコントラクトを作成してみよ。

  1. 右のボックス内に、solidity 0.4.19バージョンを指定して、コントラクトを使う準備をせよ
  2. ZombieFactoryという空のコントラクトを作成せよ

作成が終わったら、下の”答え合わせ”をクリックせよ。もし迷うことがあれば、”ヒント”を押せばヒントをやろう。

チャプター２からプログラムの作成が始まります。

ここで拒否反応がでる人もいるんじゃないでしょうか？
プログラムを使ったことがない人向けに分かりやすく説明していきますね。

イスカ＠コイナー

まず、最初に下記のコードが書いていきます。

pragma solidity ^0.4.19;

 

どのバージョンに基づいてプログラミングしているかを記載しています。

イーサリアムはSolidityという言語を使っているのですが、バージョンによってルールが変わったりするのでどのバージョンを使うかを記載するわけです。

ワタル編集長

地域ごとに異なるルールをもつトランプの大富豪とかで、どのルールで遊ぶかを予め決めるのと同じようなものか。
はい、ですのでSolidityを書く時は一番最初はしっかりとルールとなるバージョンを記載しましょう。

イスカ＠コイナー

続いて、下記のようなコントラクトを作成していきます。。

contract HelloWorld {

}

コントラクトというのは簡単に言うと操作の塊のことです。

例えば、ペンを持つというのは一言で簡単に表わせますが、実際には複数の動作が必要ですよね。
簡単に分解しただけでも以下のような動作に分けられます。

ペンを持つ方法
①ペンを見つける
②ペンに向かって手をのばす。
③手がペンに近づいたら、手を開く。
④手を閉じてペンに触れる。
⑤ペンを握って手を挙げる。

5つの動作のまとまりをペンを持つと私達は言うわけです。

コントラクトというのはこのような動作の集まりを指します。
ですので、上記の例ではHelloWorldという動作はこれらだよということを定義しているのです。

というわけでcryptoZombieとはをコントラクトを使って書いていきましょう。

CryptoZombies攻略チャプター3：状態変数と整数

我々ゾンビのDNAは16桁の数字で決まる。

dnaDigitsというuint を宣言し、それを16に設定せよ。

チャプター３も初心者つまずきポイント満載です。
チャプター３からチャプター2で書いたのコントラクトの中身を記載していきます。

さて先ほどのペンを持つという例は非常に簡単に分解しましたが、実際のプログラムでは、そもそもペンとは何なのか、手とは何なのかまでも記載しなければいけません。

プログラミングで初心者がとっつきにくく感じるのがこの定義です。

プログラミングでは１が文字（一）なのか、整数(1)なのか、小数(1.0)なのかを決めておかないといけません。
スペルミスを除く、初心者の多くがつまずくほとんどの要因が整数と少数、整数と文字を計算しようとしたためエラーが起こっていることにあります。

チャプター３では、dnaDigitsをマイナスでない整数と定義します。
マイナス符号のない（unsigned）整数（integer）を略してuintと記載します。

uint myUnsignedInteger = 100;

 

定義の仕方は非常に簡単。

まず、数字なのか、文字なのかを決めます。その後に半角スペースを開けて定義したい名前（上記の場合であればmyUnsignedInteger）を続ければ定義されます。

CryptoZombies攻略チャプター4：数式演算

ゾンビのDNAが16桁の数字だと確認するために、別のuintを作成して10^16と設定せよ。後のレクチャーでは剰余演算子である %を使用して整数を16桁に縮小できる。

  1. dnaModulusという名前の uintを作成し、10のdnaDigits乗に設定せよ。

チャプター４では計算を行っていきます。solidityでは以下の表にある計算を行うことができます。

操作 プログラムの記号 例
足し算 ＋ 5+2 = 7
引き算 ー 5-2 = 3
掛け算 ＊ 5 * 2 = 10
割り算 ／ 5 / 2 = 2.5
あまりを出す ％ 5 % 2 =1
乗算 ＊＊ 5 ** 2 = 25

チャプター３で書いたdnaDigitsを早速利用していきます。

dnaModulusという名前のuintを定義し、10のdnaDigits乗に設定をしていくわけですが、まず忘れずにuintで新しい定義を忘れずにしていきましょう。

dnaDigitsは数字だと思ってそのまま記載してください。

チャプター３でしっかりとマイナスでない整数として定義したので、機械では数字となっています。

どうして16乗と直接書かずにチャプター3でdnaDigitsをわざわざ定義してからdnaDigits乗と手間なことをするのかと思ったそこのあなたは鋭いですね。

dnaDigits乗とわざわざ定義した理由は、今後いろんな計算をして行く中で、パラメーターを変更したいと思った時にわざわざ全て変更していくのは手間ですよね。

そこで予めチャプター３のように定義をしておくことで、今後変更をする時には５行目の数字だけを変更するだけで済むようにするのです。

CryptoZombies攻略チャプター5：構造体

私のアプリでいくつかのゾンビを作りたい！ゾンビは複数のプロパティを持せたいので、構造体を使用するちょうど良いテストだ。

  1. Zombieという名前のstructを作成せよ。
  2. Zombie 構造体にプロパティを2種類設定せよ：name (string)、と、dna (uint)だ。

チャプター５は、構造体の定義していきます。

構造体とは、平たく言うと複数の定義の固まりをさします。

例えば、ペンを定義するときに「１５cmの（長さ）　紫色の（色）　ボールペン（種類）」と定義したいとき、チャプター３のやり方では、長さか色か種類しか定めることができないですよね。

そこで今回は、structを使うことで複数の定義をまとめていきます。｛｝の中に決めたい要素、今回はゾンビの名前とDNAを記載していきます。

要素を書き終えたら忘れずに｛｝を閉じましょう。

CryptoZombies攻略チャプター6：配列

私は自分のアプリにゾンビの軍隊を格納したいのだ。そして格納したゾンビを他のアプリに見せてやるために、公開したい。

  1. パブリックなZombie構造体の配列を作り、名前をzombiesとせよ。

チャプター6は配列についてです。

配列なんて難しい言葉がでてきましたが、簡単にいえばグループのことです。

構造体例：配列（指）
指＜＝親指、人差し指、中指、薬指、小指

 

つまり、定義したものをまとめてグループにしたものが配列です。

今回で言えば、「ゾンビをまとめてゾンビ軍団を作ってね」という指示です。

イスカ＠コイナー

[]の中にあるのは番号です。

ゾンビ0、1、2とできた順に点呼していくようなものです。

配列を作るときは[]の中に何も書かない場合、出来上がったゾンビ全てを指すことになります。

さて、配列を作成したらその配列を名付けていきます。

方法は今までと異なり、ゾンビ配列　ゾンビ軍団のように、配列の後に名付けたい名前を記載すれば完成です。

グループ名の前にpublicを入れることで、公開することになります。

CryptoZombies攻略チャプター7：関数の宣言

アプリでゾンビを何体も作る必要がある。関数を使ってこれを実現したい。

  1. createZombieという名前の関数を作成せよ。関数には、__name_ (string)と、__dna_ (uint)の、2つのパラメーターを設定せよ。

関数の中身は空で構わない – 後で中身を書いていくからな。

チャプター7は関数についてです。

関数ときくと、xとかyとか中学の数学で聞いた可能性がかすかにあるという人が多いのはないでしょうか。もう名前からして、拒絶反応を起こしてギブアップしたいという人もいるかもしれませんが、数学とは一切無縁ですので安心してください。

プログラミングにおける関数というのは、一つ一つの動作のことです。英語でファンクションといい、機能という方が適切でしょう。

チャプター１でコントラクトは動作の集まりといいましたよね。チャプター7では、動作の名前を決めつつ、その動作で必要となる構造体を指定します。

例えば、ペンに向かって手をのばすという動作では、ペンと手が必要ですよね。それと同じように必要となるものを全て指定していきます。

今回では、下記のようにfunctionと最初に関数であることを宣言します。半角スペースを開けて、動作をcreateZombieと名付けましょう。

function eatHamburgers(string _name, uint _amount) {

}

 

（）内に_nameと、_dnaと使われる構造体をカンマで区切って書いていきます。ここが、チャプター7でのつまづきポイントです。

今回の_nameや_dnaいう構造体はチャプター5で定義した構造体とは別になります。それぞれアンダーバーがついているのが分かりますよね。

通例アンダーバーをつけることで、createZombieにおける構造体はcreateZombie関数内でしか使わないということを表しています。

そのため、チャプター7では構造体を書いていくときには、チャプター5のようにもう一度構造体の種類を宣言した後に名付けていきます。

さて、｛｝の中身が動作の中身なのですが、具体的には次のチャプターで書いていきます。

ただ、閉じ忘れにご注意ください。

CryptoZombies攻略チャプター8：新しい構造体を作る

createZombie関数を実際に動かすぞ！

  1. 新しいZombieを作れるように関数の中身を埋めて、それを zombies 配列に格納せよ。但し、新しいZombieのname と dnaは関数の引数を使用せよ。
  2. 書いたコードを1行で書き直してスッキリさせよ。

チャプター８ではチャプター7で、作成した関数の中に具体的な内容を書いていきます。具体的な内容とは、ゾンビ集団にゾンビを追加していく、まさにクリエイトゾンビの機能になります。

チャプター6で作成したzombies 配列の中に、ゾンビを一体ずつ入れていきましょう。
ゾンビを追加する、つまり配列に構造体を追加していく際には下記のように、配列.（ドット）push(入れたい構造体);と書くことで構造体を配列に追加していくことができます。

people.push(satoshi);

チャプター８でのつまずきやすいポイントは入れたい構造体の書き方でしょう。
まずチャプター5で記載した構造体の名前を宣言したのちに、チャプター7で宣言した_nameと_dnaをカンマで区切って入れれば、バッチリです。

 

CryptoZombies攻略チャプター9：Private / Public 関数

我々のcreateZombie関数はデフォルトでpublicになっている。つまりだれでもコントラクトから関数を呼び出してゾンビを作れるということだ！これはあってはならないことだから、privateに変えなければならない。

  1. private関数になるように、createZombieを編集せよ。名付けの通例を忘れるなよ！

チャプター9ではチャプター7とチャプター8で作った関数をプライベートにしていきます。

何のためにやっているのかというとハッキング対策です。

Solidityで作った関数は、基本的に誰でもアクセスできるパブリックの状態です。例えるならば、ロックがかかっていないスマートフォンのような状態になります。

関数をプライベートにして勝手に使えないようにしましょうというのが今回の趣旨です。

function _addToArray(uint _number) private {
  numbers.push(_number);
}

 

プライベートにする方法自体は非常に簡単。

上記のように関数の後にprivateとつけるだけで関数はプライベートになります。

あと通例で、関数名（上記例だとaddToArray）の前に_（アンダーバー）をつけ忘れないようにしましょう。

CryptoZombies攻略チャプター10：さらに関数を続けるぞ

文字列からランダムなDNA番号を生成するヘルパー関数を作りたい。

  1. _generateRandomDnaという名前のprivate関数を作成せよ。パラメーターは _str(string)という名前で、戻り値をuintに設定せよ。
  2. この関数はコントラクトの変数を読み込むことはあるが、編集することはない。そこで修飾子をviewと設定せよ。
  3. 関数の中身は空にせよ。中身は後で書き込むぞ。

チャプター10については修飾子と戻り値について学びます。

修飾子は修飾語のようなものです。「赤い」リンゴのような形容詞のような情報を追加していく働きをします。チャプター9で関数をプライベートにしたと思いますが、同様に関数の設定を追加します。

英語とか外国語を勉強しているみたいと思うかもしれないけど、まさにその通り。機械語を勉強しているわけだ。ただ、単語をそんなに覚えなくてもいい分、プログラミングって外国語の勉強よりも簡単だよ。

イスカ＠コイナー

今回では、public / privateの後にviewをつけることで、データの読み取りだけに制限することができます。EXCELの読み取りモードになるというようなものです。

作った関数の中身を他で編集することがないという時にはviewをつけることでセキュリティがアップします。

なお、今回は使いませんがpureとつけると読み取ることも編集することもできなくなります。

続いて戻り値を記載します。

戻り値なんて大層な名前がついていますが、関数を行った結果のことです

例えば、入れた数字の掛け算を行ってくれるカケザンという関数を作ったとします。この時2と3を入れたら6になるのは分かりますよね。ただ、カケザンという関数に戻り値がない場合、2×3の結果が行われただけで、何も出力されません。

戻り値を設定することで初めて関数を実行した結果となる6が出力されるのです。そのため、関数では戻り値を最後に設定するほことがほとんどです。

さて、では今回の問題ですが、チャプター7とチャプター9の内容も踏まえて回答していく必要があります。

まず最初に関数を作成します。

function sayHello() public view returns (string) {

 

その後、上記のように private/publicの後に修飾子、戻り値の順番で記述していきます。

CryptoZombies攻略チャプター 11: Keccak256と型キャスト

_generateRandomDna関数の中身を書いてみよ！以下の点に従って書くように：

  1. コードの最初の行は _strのkeccak256ハッシュを取得し、擬似乱数の16進数を生成し、それをuintに型キャストして、 randというuintに格納せよ。
  2. DNAは16桁になるようにしたい（dnaModulusを覚えているか？）。そこで次の行では上で求めた値のdnaModulusによる剰余(%)を returnするようにせよ。

チャプター11は乱数生成について学びます。今回では、入力した文字によってゾンビのDNAが決まる機能を実装していきます。

乱数乱数とは簡単にいうとランダムな値のこと。サイコロをなげて出た値のように予想できない数字のことを指す。

ワタル編集長

日常生活でも、ほとんどのゲームでは何らかの乱数が実装されているので意外と身近ですよね。RPGで戦いになった時に命中するか命中しないか乱数による判定とか。

チャプター11は、段階が２つあり2行に渡って記載していく必要があります。

チャプター11
問題①　乱数生成機能を利用してDNAを作る
問題②　作成したDNAを16桁にして、_generateRandomDna関数の結果とする。

問題①では、keccak256という関数を利用して文字を16進数に変換していきます。

keccak256("aaaac");→b1f078126895a1424524de5321b339ab00408010b7cf0e6ed451514981e58aa9

 

上記のように、関数後の（）内に文字列を入れると、ランダムな16進数に変換されます。

今回は（）にチャプター10で定義した_strを入れます。

ただ、他の数字と計算ができないので、チャプター3で学んだように状態をマイナスのつかない整数に定義し直します。

方法は同様にuint を前につけるだけですが、関数を変換する場合は定義する関数を（）でくくりましょう。

後は定義した関数をrandに＝で入れれば問題①は完了です。

問題②では、return を作成した関数を16桁の結果とします。

今回はチャプター5で定義した要素dnaModulusで定義した要素で割った余りを求めることで、下16桁以外を削除します。

方法としてはチャプター4で学んだ余りを出す計算式の％を使い、 randをdnaModulusで割ります。

そして、計算式の前にreturn をつけることで今回の問題は完了です。

CryptoZombies攻略チャプター 12: 統合

  1. createRandomZombieという名前の public 関数を作成せよ。そこに_name (string)というパラメーターを設定せよ。 (注: public 関数を宣言する方法は、 private関数を宣言したのと同じです)
  2. 関数の最初の行で_nameで_generateRandomDnaを実行させ、それをrandDnaという名前で uintに格納せよ。
  3. 次の行で、 _createZombie 関数を実行し、_nameとrandDnaを引数として渡せ。
  4. ソリューションは4行以内とする（関数を閉じる}を含む）。

チャプター12ではチャプター7からチャプター11にかけて作った関数を一つの関数にまとめていきます。名前を元にDNAを作って、そのDNAからゾンビをつくる機能ができあがります。

チャプター12の問題は大きく分けて3つ。少し多いように感じられますが、新しいことは特になく今まで学んだことの復習編です。

チャプター12
問題①　統合した関数を作成
問題②　_generateRandomDna関数を利用する。
問題③　関数で作ったDNAを元にゾンビを作り、それを結果として出力していきます。

さて、問題①ですが、これはチャプター7で学んだことを活用してcreateRandomZombie関数を作成していくだけです。チャプター8で学んだpublic関数にすることも忘れずに追加しましょう。

問題②は_generateRandomDna関数をチャプター11の問題①と同様に、問題③に関しても_createZombie 関数をチャプター11の問題②と同様に活用していけば答えになります。

 

CryptoZombies攻略チャプター 13: イベント

新しいゾンビを作る毎にそれをフロントエンドに伝えて、アプリ上に表示させたい。

  1. NewZombieという名前のeventを宣言せよ。zombieId (uint)、 name (string)、 dna (uint)の値を渡すのだ。
  2. _createZombie関数を編集し、zombies配列に新しいゾンビを追加したら NewZombieイベントが発生させよ。
  3. ゾンビのidが必要だ。array.push()は新しい長さのuint配列を返し、配列の最初のインデックスは0であるから、array.push() - 1 が追加したゾンビのインデックスだ。そこで、zombies.push() - 1結果をidという名前のuintに格納し、次の行で作成するNewZombieイベントで使用できるようにせよ。

さて、今回のチャプターがレッスン1での最後のプログラム作成になります。

チャプター13ではイベントについて学んでいきます。イベントは簡単に言うとユーザーにも見えるようにする機能です。

今までのチャプターでゾンビファクトリーの機能を作成してきましたが、実際にどう動いているのか分かりませんよね。

イベントを活用することで、実際に動いているのがユーザーにもわかるようになります。

チャプター13
問題①　イベントを定義
問題②　定義したイベントを使う
問題③　イベントを使うのに足りないパラメーターを作る

問題①ではイベントを定義していきましょう。宣言という言葉がつかわれていますが、チャプター1で学んだように、イベントであることを定義するだけです。

event IntegersAdded(uint x, uint y, uint result);

上記のように、eventとまずなんであるのかを書いた後に、NewZombieとイベントの名前を記載します。

その後、（）に利用するパラメータを記載します。

今回はzombieId 、name 、dna を利用します。パラメーターを記載する際には状態を忘れずにつけておきましょう。

問題②では、問題①で作成したイベントを実際に機能させます。

19行目にイベントの名前（つまりNewZombie）を記載しましょう。

その後、実際に利用するパラメーターを（）内に記載していきます。_createZombie関数の中にあるので、使える関数は関数を作る際に指定していたパラメーターだけです。

つまり、_nameと_dnaです。それぞれ、問題①で指定した2番目と3番目に記載していきます。

ワタル編集長

あれ、zombieIdは？
問題③で作っていきます。

イスカ＠コイナー

ということで、問題③ではチャプター8で作成したゾンビ軍団の配列を編集してidを作成します。

編集は簡単で、 zombies.pushをidに入れるだけ。

ただ、注意していただきたいのは、 - 1 をつけることです。

どのプログラミングでもそうなのですが、配列は０番から始まります。ゾンビ軍団は1人目でなく0人目から数えていくので - 1をつける必要があるのです。

これで、パラメーターが揃いイベントが完成です。

CryptoZombies攻略チャプター 14: Web3.js

右のボックスに自分の名前を入力し、どんなゾンビになるのかその目で確かめるのだ！

自分の名前のゾンビで楽しんだら、”次のチャプター”をクリックしてゾンビを保存せよ。これでレッスン1は終了だ！

というわけで、ついにチャプター14で名前を入力したら、ゾンビがつくれます。今までのチャプターで作っていた機能が使われていますね。

自分の名前をいれてもよし、憎い相手をゾンビとしていれてもよし。オリジナルのゾンビが出来上がりです。

イラストとかUIの部分はつくっていませんが、既存のプログラムを利用しています。

左にあるWeb3.jsのコードがそうなのですが、現時点ではなんと書いてあるのか分からない人がほとんどだと思います。ただ、気にしなくても大丈夫です。後々のレッスンで学ぶことになります。

CryptoZombiesで自分だけのゾンビを作ろう

レッスン１を終えるとランダムゾンビ生成装置ができあがります。プログラミングしていて完成したものが動いているのをみると感動しますよね。

しかも、オリジナルのゾンビをもらえます。

今回、私が作成したゾンビはコチラです。

イスカ＠コイナー

ちなみにですが、Crycptゾンビでプログラムをしなくても上記のURLから名前を入れることで、ランダムゾンビ生成装置を試すことができます。

皆さんもこの記事を参考にプログラミングの世界に一歩足を踏み入れてみてはどうでしょうか？

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

前の記事

ビットコインの好材料まとめ！2019年上半期は価格高騰の期待が…

次の記事

Huobiが日本向けに取引所を正式オープン！リップルの配布キャ…