NetworkSHAREツイートシェアはてブGoogle+PocketLINEクリプトゾンビが完全リニューアルしていますね。イスカ@コイナーSolidityを学ぶゲームとしては世界で一番有名なCryptoZombies。前提レベルとして既にプログラミングができることが必要となります。そこで、この記事では、プログラミングをしたことないけど、Solidityを学びたいという人に向けて解説しながらCryptoZombiesを攻略していきます。CryptoZombiesで自分だけのゾンビを作ろうCryptoZombiesとは?CryptoZombiesとは、イーサリアムのプログラム言語であるSolidityをゲームを作りながら学べるオンラインゲームです。Solidityを学ぶゲームとしては世界で一番有名なものになります。実際にプログラムを作成することで、ゾンビを作ったり、戦わせたりすることができます。マッドサイエンティストな気分に浸れますよ。内容としては下の画像のように、画面左で学習をして、右上のスペースに実際のコードを書いていくという流れになっています。Networkより詳しくは下記記事をご参考ください。ゲームを遊びながらdappsプログラミングの勉強ができる?CryptoZombies~始め方~実際にCryptoZombiesをやってみるそれでは早速ですが、実際にやってみましょう。Networkページの右にある色々なスライダーを実際に動かしてみること。数字を変えることでゾンビの外観が変わることがわかるだろう。よし、準備運動はこれくらいで十分だろう。次に進む準備ができたら「次のチャプター」をクリックすれば、次のチャプターから実際にSolidityを教えていくから、覚悟しておけよ!チャプター1では全くプログラミング知識はいりません。いうのも、これからプログラムで作ることになる、ゾンビが作成される仕組みを学ぶチャプターだからです。赤枠内の横バーをいじると、ゾンビのDNAが変化します。DNAが変化することでゾンビの外観が変わっていますよね。レッスン1では自動でランダムなDNAを作成することでゾンビ軍団を生み出すゾンビファクトリーを作成していきます。Networkゾンビ軍団を生み出すための、ZombieFactoryというコントラクトを作成してみよ。0.4.19バージョンを指定して、コントラクトを使う準備をせよZombieFactoryという空のコントラクトを作成せよ作成が終わったら、下の”答え合わせ”をクリックせよ。迷うことがあれば、”ヒント”を押せばヒントをやろう。チャプター2からプログラムの作成が始まります。ここで拒否反応がでる人もいるんじゃないでしょうか?プログラムを使ったことがない人向けに分かりやすく説明していきますね。イスカ@コイナーまず、最初に下記のコードが書いていきます。^0.4.19;どのバージョンに基づいてプログラミングしているかを記載しています。イーサリアムはSolidityという言語を使っているのですが、バージョンによってルールが変わったりするのでどのバージョンを使うかを記載するわけです。地域ごとに異なるルールをもつトランプの大富豪とかで、どのルールで遊ぶかを予め決めるのと同じようなものか。はい、ですのでSolidityを書く時は一番最初はしっかりとルールとなるバージョンを記載しましょう。続いて、下記のようなコントラクトを作成していきます。{}コントラクトというのは簡単に言うと操作の塊のことです。ペンを持つというのは一言で簡単に表わせますが、実際には複数の動作が必要ですよね。簡単に分解しただけでも以下のような動作に分けられます。ペンを持つ方法1ペンを見つける2ペンに向かって手をのばす。3手がペンに近づいたら、手を開く。4手を閉じてペンに触れる。5ペンを握って手を挙げる。5つの動作のまとまりをペンを持つと私達は言うわけです。コントラクトというのはこのような動作の集まりを指します。上記の例ではHelloWorldという動作はこれらだよということを定義しているのです。いうわけでcryptoZombieとはをコントラクトを使って書いていきましょう。Network我々ゾンビのDNAは16桁の数字で決まる。宣言し、それを16に設定せよ。チャプター3も初心者つまずきポイント満載です。チャプター3からチャプター2で書いたのコントラクトの中身を記載していきます。先ほどのペンを持つという例は非常に簡単に分解しましたが、実際のプログラムでは、そもそもペンとは何なのか、手とは何なのかまでも記載しなければいけません。プログラミングで初心者がとっつきにくく感じるのがこの定義です。プログラミングでは1が文字(一)なのか、整数(1)なのか、小数(1.0)なのかを決めておかないといけません。スペルミスを除く、初心者の多くがつまずくほとんどの要因が整数と少数、整数と文字を計算しようとしたためエラーが起こっていることにあります。チャプター3では、dnaDigitsをマイナスでない整数と定義します。マイナス符号のない(unsigned)整数(integer)を略してuintと記載します。100;定義の仕方は非常に簡単。数字なのか、文字なのかを決めます。その後に半角スペースを開けて定義したい名前(上記の場合であればmyUnsignedInteger)を続ければ定義されます。NetworkゾンビのDNAが16桁の数字だと確認するために、別のuintを作成して10^16と設定せよ。%を使用して整数を16桁に縮小できる。uintを作成し、10のdnaDigits乗に設定せよ。チャプター4では計算を行っていきます。solidityでは以下の表にある計算を行うことができます。25チャプター3で書いたdnaDigitsを早速利用していきます。dnaModulusという名前のuintを定義し、10のdnaDigits乗に設定をしていくわけですが、まず忘れずにuintで新しい定義を忘れずにしていきましょう。dnaDigitsは数字だと思ってそのまま記載してください。チャプター3でしっかりとマイナスでない整数として定義したので、機械では数字となっています。して16乗と直接書かずにチャプター3でdnaDigitsをわざわざ定義してからdnaDigits乗と手間なことをするのかと思ったそこのあなたは鋭いですね。dnaDigits乗とわざわざ定義した理由は、今後いろんな計算をして行く中で、パラメーターを変更したいと思った時にわざわざ全て変更していくのは手間ですよね。そこで予めチャプター3のように定義をしておくことで、今後変更をする時には5行目の数字だけを変更するだけで済むようにするのです。Network私のアプリでいくつかのゾンビを作りたい!ゾンビは複数のプロパティを持せたいので、構造体を使用するちょうど良いテストだ。Zombieという名前のstructを作成せよ。チャプター5は、構造体の定義していきます。構造体とは、平たく言うと複数の定義の固まりをさします。ボールペン(種類)」と定義したいとき、チャプター3のやり方では、長さか色か種類しか定めることができないですよね。そこで今回は、structを使うことで複数の定義をまとめていきます。{}の中に決めたい要素、今回はゾンビの名前とDNAを記載していきます。要素を書き終えたら忘れずに{}を閉じましょう。Network私は自分のアプリにゾンビの軍隊を格納したいのだ。格納したゾンビを他のアプリに見せてやるために、公開したい。パブリックなZombie構造体の配列を作り、名前をzombiesとせよ。チャプター6は配列についてです。配列なんて難しい言葉がでてきましたが、簡単にいえばグループのことです。定義したものをまとめてグループにしたものが配列です。今回で言えば、「ゾンビをまとめてゾンビ軍団を作ってね」という指示です。イスカ@コイナー[]の中にあるのは番号です。ゾンビ0、1、2とできた順に点呼していくようなものです。配列を作るときは[]の中に何も書かない場合、出来上がったゾンビ全てを指すことになります。配列を作成したらその配列を名付けていきます。ゾンビ軍団のように、配列の後に名付けたい名前を記載すれば完成です。グループ名の前にpublicを入れることで、公開することになります。Networkアプリでゾンビを何体も作る必要がある。関数を使ってこれを実現したい。createZombieという名前の関数を作成せよ。(uint)の、2つのパラメーターを設定せよ。後で中身を書いていくからな。チャプター7は関数についてです。関数ときくと、xとかyとか中学の数学で聞いた可能性がかすかにあるという人が多いのはないでしょうか。名前からして、拒絶反応を起こしてギブアップしたいという人もいるかもしれませんが、数学とは一切無縁ですので安心してください。プログラミングにおける関数というのは、一つ一つの動作のことです。英語でファンクションといい、機能という方が適切でしょう。チャプター1でコントラクトは動作の集まりといいましたよね。チャプター7では、動作の名前を決めつつ、その動作で必要となる構造体を指定します。ペンに向かって手をのばすという動作では、ペンと手が必要ですよね。それと同じように必要となるものを全て指定していきます。今回では、下記のようにfunctionと最初に関数であることを宣言します。半角スペースを開けて、動作をcreateZombieと名付けましょう。{}()内に_nameと、_dnaと使われる構造体をカンマで区切って書いていきます。ここが、チャプター7でのつまづきポイントです。今回の_nameや_dnaいう構造体はチャプター5で定義した構造体とは別になります。それぞれアンダーバーがついているのが分かりますよね。通例アンダーバーをつけることで、createZombieにおける構造体はcreateZombie関数内でしか使わないということを表しています。そのため、チャプター7では構造体を書いていくときには、チャプター5のようにもう一度構造体の種類を宣言した後に名付けていきます。{}の中身が動作の中身なのですが、具体的には次のチャプターで書いていきます。閉じ忘れにご注意ください。dnaは関数の引数を使用せよ。書いたコードを1行で書き直してスッキリさせよ。チャプター8ではチャプター7で、作成した関数の中に具体的な内容を書いていきます。具体的な内容とは、ゾンビ集団にゾンビを追加していく、まさにクリエイトゾンビの機能になります。配列の中に、ゾンビを一体ずつ入れていきましょう。ゾンビを追加する、つまり配列に構造体を追加していく際には下記のように、配列.(ドット)push(入れたい構造体);と書くことで構造体を配列に追加していくことができます。people.push(satoshi);チャプター8でのつまずきやすいポイントは入れたい構造体の書き方でしょう。チャプター5で記載した構造体の名前を宣言したのちに、チャプター7で宣言した_nameと_dnaをカンマで区切って入れれば、バッチリです。Network我々のcreateZombie関数はデフォルトでpublicになっている。だれでもコントラクトから関数を呼び出してゾンビを作れるということだ!これはあってはならないことだから、privateに変えなければならない。private関数になるように、createZombieを編集せよ。名付けの通例を忘れるなよ!チャプター9ではチャプター7とチャプター8で作った関数をプライベートにしていきます。何のためにやっているのかというとハッキング対策です。Solidityで作った関数は、基本的に誰でもアクセスできるパブリックの状態です。例えるならば、ロックがかかっていないスマートフォンのような状態になります。関数をプライベートにして勝手に使えないようにしましょうというのが今回の趣旨です。numbers.push(_number);}プライベートにする方法自体は非常に簡単。上記のように関数の後にprivateとつけるだけで関数はプライベートになります。あと通例で、関数名(上記例だとaddToArray)の前に_(アンダーバー)をつけ忘れないようにしましょう。Network文字列からランダムなDNA番号を生成するヘルパー関数を作りたい。_generateRandomDnaという名前のprivate関数を作成せよ。_str(string)という名前で、戻り値をuintに設定せよ。この関数はコントラクトの変数を読み込むことはあるが、編集することはない。そこで修飾子をviewと設定せよ。関数の中身は空にせよ。中身は後で書き込むぞ。チャプター10については修飾子と戻り値について学びます。修飾子は修飾語のようなものです。「赤い」リンゴのような形容詞のような情報を追加していく働きをします。チャプター9で関数をプライベートにしたと思いますが、同様に関数の設定を追加します。英語とか外国語を勉強しているみたいと思うかもしれないけど、まさにその通り。機械語を勉強しているわけだ。単語をそんなに覚えなくてもいい分、プログラミングって外国語の勉強よりも簡単だよ。privateの後にviewをつけることで、データの読み取りだけに制限することができます。EXCELの読み取りモードになるというようなものです。作った関数の中身を他で編集することがないという時にはviewをつけることでセキュリティがアップします。今回は使いませんがpureとつけると読み取ることも編集することもできなくなります。続いて戻り値を記載します。戻り値なんて大層な名前がついていますが、関数を行った結果のことです例えば、入れた数字の掛け算を行ってくれるカケザンという関数を作ったとします。この時2と3を入れたら6になるのは分かりますよね。カケザンという関数に戻り値がない場合、2×3の結果が行われただけで、何も出力されません。戻り値を設定することで初めて関数を実行した結果となる6が出力されるのです。そのため、関数では戻り値を最後に設定するほことがほとんどです。今回の問題ですが、チャプター7とチャプター9の内容も踏まえて回答していく必要があります。最初に関数を作成します。private/publicの後に修飾子、戻り値の順番で記述していきます。randというuintに格納せよ。DNAは16桁になるようにしたい(dnaModulusを覚えているか?)。returnするようにせよ。チャプター11は乱数生成について学びます。今回では、入力した文字によってゾンビのDNAが決まる機能を実装していきます。乱数乱数とは簡単にいうとランダムな値のこと。サイコロをなげて出た値のように予想できない数字のことを指す。日常生活でも、ほとんどのゲームでは何らかの乱数が実装されているので意外と身近ですよね。RPGで戦いになった時に命中するか命中しないか乱数による判定とか。チャプター11は、段階が2つあり2行に渡って記載していく必要があります。作成したDNAを16桁にして、_generateRandomDna関数の結果とする。問題1では、keccak256という関数を利用して文字を16進数に変換していきます。keccak256("aaaac");→b1f078126895a1424524de5321b339ab00408010b7cf0e6ed451514981e58aa9上記のように、関数後の()内に文字列を入れると、ランダムな16進数に変換されます。今回は()にチャプター10で定義した_strを入れます。他の数字と計算ができないので、チャプター3で学んだように状態をマイナスのつかない整数に定義し直します。前につけるだけですが、関数を変換する場合は定義する関数を()でくくりましょう。後は定義した関数をrandに=で入れれば問題1は完了です。作成した関数を16桁の結果とします。今回はチャプター5で定義した要素dnaModulusで定義した要素で割った余りを求めることで、下16桁以外を削除します。randをdnaModulusで割ります。つけることで今回の問題は完了です。(string)というパラメーターを設定せよ。関数を実行し、_nameとrandDnaを引数として渡せ。ソリューションは4行以内とする(関数を閉じる}を含む)。チャプター12ではチャプター7からチャプター11にかけて作った関数を一つの関数にまとめていきます。名前を元にDNAを作って、そのDNAからゾンビをつくる機能ができあがります。チャプター12の問題は大きく分けて3つ。多いように感じられますが、新しいことは特になく今まで学んだことの復習編です。_generateRandomDna関数を利用する。関数で作ったDNAを元にゾンビを作り、それを結果として出力していきます。問題1ですが、これはチャプター7で学んだことを活用してcreateRandomZombie関数を作成していくだけです。チャプター8で学んだpublic関数にすることも忘れずに追加しましょう。関数をチャプター11の問題2と同様に活用していけば答えになります。Network新しいゾンビを作る毎にそれをフロントエンドに伝えて、アプリ上に表示させたい。NewZombieという名前のeventを宣言せよ。(uint)の値を渡すのだ。NewZombieイベントが発生させよ。ゾンビのidが必要だ。追加したゾンビのインデックスだ。1結果をidという名前のuintに格納し、次の行で作成するNewZombieイベントで使用できるようにせよ。今回のチャプターがレッスン1での最後のプログラム作成になります。チャプター13ではイベントについて学んでいきます。イベントは簡単に言うとユーザーにも見えるようにする機能です。今までのチャプターでゾンビファクトリーの機能を作成してきましたが、実際にどう動いているのか分かりませんよね。イベントを活用することで、実際に動いているのがユーザーにもわかるようになります。イベントを使うのに足りないパラメーターを作る問題1ではイベントを定義していきましょう。宣言という言葉がつかわれていますが、チャプター1で学んだように、イベントであることを定義するだけです。result);上記のように、eventとまずなんであるのかを書いた後に、NewZombieとイベントの名前を記載します。その後、()に利用するパラメータを記載します。パラメーターを記載する際には状態を忘れずにつけておきましょう。問題2では、問題1で作成したイベントを実際に機能させます。19行目にイベントの名前(つまりNewZombie)を記載しましょう。その後、実際に利用するパラメーターを()内に記載していきます。_createZombie関数の中にあるので、使える関数は関数を作る際に指定していたパラメーターだけです。_nameと_dnaです。それぞれ、問題1で指定した2番目と3番目に記載していきます。ワタル編集長あれ、zombieIdは?問題3で作っていきます。イスカ@コイナーということで、問題3ではチャプター8で作成したゾンビ軍団の配列を編集してidを作成します。zombies.pushをidに入れるだけ。どのプログラミングでもそうなのですが、配列は0番から始まります。1をつける必要があるのです。これで、パラメーターが揃いイベントが完成です。Network右のボックスに自分の名前を入力し、どんなゾンビになるのかその目で確かめるのだ!自分の名前のゾンビで楽しんだら、”次のチャプター”をクリックしてゾンビを保存せよ。これでレッスン1は終了だ!というわけで、ついにチャプター14で名前を入力したら、ゾンビがつくれます。今までのチャプターで作っていた機能が使われていますね。自分の名前をいれてもよし、憎い相手をゾンビとしていれてもよし。オリジナルのゾンビが出来上がりです。イラストとかUIの部分はつくっていませんが、既存のプログラムを利用しています。左にあるWeb3.jsのコードがそうなのですが、現時点ではなんと書いてあるのか分からない人がほとんどだと思います。気にしなくても大丈夫です。後々のレッスンで学ぶことになります。Networkレッスン1を終えるとランダムゾンビ生成装置ができあがります。プログラミングしていて完成したものが動いているのをみると感動しますよね。オリジナルのゾンビをもらえます。今回、私が作成したゾンビはコチラです。イスカ@コイナーちなみにですが、Crycptゾンビでプログラムをしなくても上記のURLから名前を入れることで、ランダムゾンビ生成装置を試すことができます。コメントをキャンセルメールアドレスが公開されることはありません。CryptoZombiesで自分だけのゾンビを作ろう「Dapps」の人気記事まだデータがありません。(必須)サイトコメントを読み込み中...コメント。