ALIS BOOT CAMPを受けてみた②[NFTを使ったゲーム作り]

さて、実際のメンタリングです。今回は以前記事にしたオリジナルゲーム「liberate lite」を作るやり方をメンタリングしていただきます。

実際のメンタリングの内容をそのまま載せるので、bootcampの雰囲気を理解できるだけでなく、ゲームを作るために必要な情報として普通に役に立つはずです。

ではメンタリングスタート。

///////////////////////////////////////////////////////////////////////////

ホーさん今日 20:42

お疲れ様です！今から大丈夫ですか？

ＺＡＰ今日 20:42

大丈夫です。

ホーさん今日 20:42

はい、では始めます〜

ＺＡＰ今日 20:43

よろしくお願いします。

ホーさん今日 20:43

Librate liteをベースにお話しさせていただきます。 https://alis.to/zap/articles/3QjMydJdmb47

他のゲームのNFTを使用して遊ぶゲーム -liberate lite...

ＺＡＰ今日 20:43

了解です。

ホーさん今日 20:43

以前お話しした通り、「どこまでできそうか」「達成するための課題は何か」 について私が考えてきたことを下に記載します。

こちらのゲームはWebアプリ（ブラウザから遊ぶ）を想定していると思いますので、 作ろうとするとざっくり以下の機能が必要になります。

・ログイン（認証） ・バックグラウンド（サーバーサイド）処理（NFTからユニットの能力値を計算する関数など） ・データベース（BOSSのパラメータなど、後から追加で設定したいデータをまとめる） ・ゲーム画面の作成 ・フロントエンド処理（ゲーム画面をブラウザ上で動的に変化させる処理。例えば、ユニットの攻撃力を表示するなど） (編集済)

ログイン認証は、ユーザーが持ってるNFTを取得するのに必要になります。

METAMASKと連携させるのが良いと思いますが、これはゲームがある程度完成するまで取り組む必要はないと思います。

ゲームがある程度完成するまでJavaScriptを使っていれば、METAMASKと連携させること自体はさほど難しくないと考えます

次に、バックグラウンド処理ですが、ここではゲームに必要な情報を計算したり、ブラウザに渡したりするところです。

ざっと思いつくところだと、 ・BOSSの攻撃力やアイコンのURLを取得 ・自分の所有NFTを取得（サービス名、NFT名など） ・ユニットの能力値を計算 あたりはバックグラウンド処理に該当します。(編集済)

また、データベースにBOSSの情報を記載しておいて、データベースに接続して読み込む、といった処理もこちらで行います。

なお、NFTについてですが、Liberate liteから所有するNFTを参照するには、マイクリに関してはCrypto WorldからEthereum Networkに転送する必要があるんじゃないかと思います（調べきれてないですが）

ご参考： https://medium.com/mycryptoheroes/transfer-ja-776634cc8da5

Medium

[tips]ヒーロー、オリジナル エクステンションの転送

My Crypto Heroesでは「ヒーロー」「オリジナル エクステンション」の２種類のアセットを、ERC721規格のNon-Fungible Tokenとして扱っています。

他のサービス（Crypto Kittiesとか）については調べていないですが、Etherreumネットを使ってれば直接参照できると思います。 OpenSeaで取り扱いができるNFTは参照できると思っています。

https://opensea.io/

OpenSea

OpenSea: Buy Crypto Collectibles, CryptoKitties, Decentraland, and...

A peer-to-peer marketplace for rare digital items and crypto collectibles. Buy, sell, auction, and discover CryptoKitties, Decentraland, Gods Unchained cards, blockchain game items, and more. Over 100,000 collectibles on sale now!

OpenSeaというのは、ご存知かもしれませんが、NFTの売買が可能なプラットフォームです

バックグラウンド処理についてのイメージはつきますでしょうか？

ＺＡＰ今日 20:50

イメージはなんとなく。エクセルマクロみたいな感じですよね。

ホーさん今日 20:51

そうですね、WEBブラウザの表示に関わらない、単純な値の計算や値の取得に関してはバックグラウンド処理になります

で、Librate lite作りでは、まずはここから始めるのが良いと思います。 というのは、このゲームで一番肝となるのが、「NFTからユニットを作る」ところだからです。 ここはどんな構成でも（ライトでもフルでも）絶対に必要なので、真っ先に取り組むべきだと思います。

ＺＡＰ今日 20:52

openseaのAPIが公開されているそうなので、それを使って文字列を取得→能力値に変換という流れですよね。

ホーさん今日 20:53

そうですね！

なので手順としては、 1. JavaScriptの環境構築 2. NFTからゲーム名を取得したり、画像のURLを取得することをJavaScriptで(openseaのAPIで)できるようにする 3. NFTからユニットの能力値を計算する関数を作る
（同じNFTからは同じ能力値になるように実装する） 4. APIとしてZeit Nowなどに立ち上げる
（イメージとしては、https://api.liberatelite,com/api/create_unit?hash=000000a2f452 にアクセスすると能力値が返ってくる） かなと思います

ＺＡＰ今日 20:55

VBAとかは書いたことがあるので、数値が取得できれば、関数を読ませて、能力値を作る部分はかけると思うんですが。でも言語とか何使うかとかはよくわからないですね。

ホーさん今日 20:56

了解です！今回のWEBアプリ開発では、JavaScriptの学習は必須になるかな、、と思います

ＺＡＰ今日 20:56

なるほど。

ホーさん今日 20:57

あとは、バックグラウンド処理をLiberate liteのAPIとして立ち上げるためのサービスの使い方も覚える必要があります

https://zeit.co/

World-Class Static Hosting - ZEIT

ZEIT is the easiest way to deploy websites. Host your web projects with zero configuration, automatic SSL, and global CDN.

これです

もしくはこちら https://firebase.google.com/?hl=ja

Firebase

Firebase

Firebase は、高品質のアプリを迅速に開発できる Google のモバイル プラットフォームで、ビジネスの成長に役立ちます。

ＺＡＰ今日 20:58

この辺って無料なんですか？

ホーさん今日 20:58

基本的には無料ですが、あまり重い処理をしたりたくさんアクセスがあると、無料だと処理を捌けきれなくなるので課金必要です

ＺＡＰ今日 20:59

なるほど。テスト中は無料で行けるってことですね。

ホーさん今日 20:59

そうですね、テスト中と、数十人くらいのユーザーなら無料で行けると思います

ＺＡＰ今日 20:59

了解です。

ホーさん今日 21:00

では次に、ゲーム画面の作成や動きについての説明を

ここはまた別の学習が必要になります

ＺＡＰ今日 21:00

はい。

ホーさん今日 21:00

1. HTMLとCSSという、ブラウザで表示するための言語 2. 画面に動きをつけるためのJavaScriptフレームワーク（React）
（バックグラウンドの処理から得たユニットの攻撃力などの情報を画面に表示したり、戦闘したり）

この二つが必須になります

ここは（バックグラウンドもですが）、いきなり全部作ろうとするのではなく、徐々に機能を入れていくのが良いと思います

具体的には

1. BOSSの情報の表示（データベース／バックグラウンドから情報取得） 2. 自分の所持NFTの表示（バックグランドから情報取得） 3. 選択したNFTの攻撃力の表示（バックグランドから情報取得）

あたりを最初に取り組むと良いと思います

表示も、最初は数字だけ表示してみて、ちゃんと一連の処理（バックグラウンド処理との連携）ができているかロジックの確認を先にした方が良いかと思います(編集済)

ＺＡＰ今日 21:03

なるほど。

ホーさん今日 21:04

その後、戦闘画面のターンが進んでいく処理（攻撃、回復の表示。HPバーの表示） だったり、ゲームオーバーやゲームクリアの処理を作っていくと良いと思います。 ただし、↑はやっていくうちに前後するとは思います。

この辺りまでできてきたら、METAMASK認証つけたりします

ＺＡＰ今日 21:04

はい。

ホーさん今日 21:06

一連の開発の流れとしてはざっとこんな感じかと思います バックグラウンド処理の開発 ↓ Zeit NowにAPIとして公開 ↓ ブラウザから数値を取得できるか確認 ↓ 画像をつけたり、戦闘の処理を実装したり ↓ METAMASKの認証 ↓ WEBアプリの公開

ここまで、なんとなくイメージはできますでしょうか？

ＺＡＰ今日 21:07

ZEITかFirebaseに登録すれば、無料でサービスとして公開までできるってことなんですか？

ホーさん今日 21:07

WEBアプリの公開は、別サービスを使う方が良いと思います

ホスティングサービスというものを使ってゲームを公開します。 Netlifyを使うと良いです。 https://www.netlify.com/

Netlify

Netlify: All-in-one platform for automating modern web projects

Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.

こちらも無料です

が、Safariをサポートする場合には、ドメインを取得する必要がありますので、年間数百円くらいかかります

ＺＡＰ今日 21:09

PC、もしくはスマホでもgoogle chomeからなら無料ってことですね。

ホーさん今日 21:10

はい、そうです！

ＺＡＰ今日 21:10

metamask認証が必要なのにsafariをサポートする必要はないって認識でいいですよね？(編集済)

ホーさん今日 21:11

そういえばそうですね

ＺＡＰ今日 21:11

metamask認証を作るとtrustとか他ウォレットの認証も同じで行けるんですか？(編集済)

ホーさん今日 21:13

METAMASK認証に紐づいているウォレットなら大丈夫という認識ですが、ちょっと自信ないです

ＺＡＰ今日 21:14

了解です。PCではmetamaskを使っているので、大丈夫です。というか、認証のやり方自体は自分で調べないといけないんですよね。

ホーさん今日 21:15

そうですね、でここから今後のサポートに関するご提案なんですが

ＺＡＰ今日 21:15

はい。

ホーさん今日 21:16

まずは先ほど提示した 1. JavaScriptの環境構築 2. NFTからゲーム名を取得したり、画像のURLを取得することをJavaScriptでできるようにする 3. NFTからユニットの能力値を計算する関数を作る 4. APIとしてZeit Nowなどに立ち上げる について、こちらで上の機能の基本的な部分のプログラミングコードを作成し、 それをAPIとして立ち上げるところまでチャットで支援する、というのはいかがでしょうか。もちろん、JavaScriptの基本的な知識が必要になるので、Progateなどで自習いただくことになります。

こちらでコードを準備するのに少しかかるので、その間に学習や環境構築を進めていただき、 こちらの準備が整ったところで一緒に立ち上げを行うといった形です。

ＺＡＰ今日 21:17

お、分業みたいな感じになるんですね。

ホーさん今日 21:17

一気にAPI立ち上げまでできれば、あとは必要な機能を追加していただくのはやりやすいかなと

ＺＡＰ今日 21:18

なるほど。1. JavaScriptの環境構築について、「ここをみれば何とかなるよ」というサイトなどはありますか？

ホーさん今日 21:20

その辺りは参考サイトをお送りします！ただ、WSLの設定などあり、ご自分でもお調べいただく必要はあると思います

ＺＡＰ今日 21:20

この辺ですか？

https://alis.to/mozk/articles/3bNWmpBN4zGn

WSL＋Ubuntu＋VSCodeで最強ウェブ開発環境構築 | ALIS

ホーさん今日 21:20

https://alis.to/mozk/articles/3bNWmpBN4zGn

WSL＋Ubuntu＋VSCodeで最強ウェブ開発環境構築 | ALIS

まさに

ここをみながらWSL+Ubuntu+VSCodeを立ち上げていただき

JavaScriptを動かすのに必要なnodeをそこにインストールする必要があります

https://www.kimoton.com/entry/20190215/1550166179

Hatena Blog

kimoppy126

WSLでnode.jsの環境構築 - ばいばいバイオ

github.com apt-getで入手できるnode.jsはバージョンがかなり古い。 複数のバージョン管理が可能かつ最新版のnode.jsもインストール可能なnodebrewを使用すると、いろいろ楽ができるという話。 WSLと書いてはいるけ...

こことかですかね

ＺＡＰ今日 21:22

なるほど。

ホーさん今日 21:23

そのあと、すでにご存知でしたが、OpenSeaのAPIを使いながら必要な処理を開発していく形になります https://docs.opensea.io/reference#request-an-api-key

OpenSea

ちょっとこの辺りは私も経験ないので、少し時間かかるかもです

もずく今日 21:24

ターミナルのコマンドの使い方などなら、ここに書いていただければ見かけた際に適宜サポートできます：）

ＺＡＰ今日 21:24

了解です。ありがとうございます。

ホーさん今日 21:25

これはご提案なので、もし自分でできそうであれば、ご自分で進めていただいても良いと思います(編集済)

ＺＡＰ今日 21:26

実装の時点で、できるかどうか不安なことろもあるので、とりあえず今提案していただいた内容で進めさせていただいて、

進捗状況を報告させていただくような形でやらせていただけるとありがたいです。

ホーさん今日 21:29

承知しました！途中、ある程度しっかり時間を使ってメンタリングした方が良い点が出ましたら、本日のようにチャットでお話ししましょう

ＺＡＰ今日 21:29

正直「1. JavaScriptの環境構築」がどれくらいかかるのか想像もつかないです。

ホーさん今日 21:29

どうしても難しければ、メンタリング1枠使えば確実に終わります

ＺＡＰ今日 21:30

知っていれば、そんなものなんですね。

ホーさん今日 21:30

そうですね！ただ、自分で調べてなんとかするというのも長期的には非常に重要なので、まずはご自分でトライしていただくのが良いかと思います

また、ゲームの画面や動きのところの、 1. BOSSの情報の表示（データベース／バックグラウンドから情報取得） 2. 自分の所持NFTの表示（バックグランドから情報取得） 3. 選択したNFTの攻撃力の表示（バックグランドから情報取得） といったところも、同様の進め方で、まずこちらで超簡単な枠組みだけ作り、それをもとに立ち上げまでまずやってしまい、 それを元に複雑化していく、、という流れをご提案できます

こちらはサーバーサイドの一連のメンタリングが終わった後のお話です

ＺＡＰ今日 21:32

それはやりやすそうですね。エクセルマクロを録画で取ってから、改造するような感じに似てますね。

ホーさん今日 21:32

そうですね！まずはベースを作って、そこに肉付けしていくのがやりやすいと思います

もし肉付けのところで難しいところが出れば、またご相談をお受けします

ＺＡＰ今日 21:34

多分、「よし書くぞ」ってところまで行くと書ける気がするんです。

最初の出だしがどこにどう踏み込んでいいかわからないので、メンタリングをお願いしたので。

ホーさん今日 21:34

まさにそこに対してお助けできると思います

ＺＡＰ今日 21:35

大体次回の目安ってどれくらいですかね。

ホーさん今日 21:37

私の方の作業が発生するので、ざっくり2週間ほどみていただければと。その間にNode.jsの環境立ち上げや、Expressというモジュールを使ったAPIの立ち上げ方なんかを学習いただければ良いと思います。

ＺＡＰ今日 21:37

今週末は時間が取れないので、それくらい後だとむしろありがたいです。

ホーさん今日 21:37

また次回日程についてはDMでご相談しましょう

ＺＡＰ今日 21:38

了解です。

ホーさん今日 21:38

日程が決まった段階でチケットご購入下さい

ＺＡＰ今日 21:38

わかりました。

しかしこれって結構汎用的な内容ですよね。

ホーさん今日 21:38

ですね！

ＺＡＰ今日 21:38

これは記事にするしかない。

ホーさん今日 21:38

ぜひぜひ＾＾

ＺＡＰ今日 21:39

このやり取りほぼ100％トレースするだけの手抜き記事でいいですか？

ホーさん今日 21:39

お任せします！オープンチャットの内容なので、ご自由にどうぞ笑

むしろトレースして残していただければあとで見返せるのでありがたいです〜

ＺＡＰ今日 21:40

了解です。使ってみた人の公開記事ってまだなさそうだったので、ブートキャンプってこんな感じになるよっていうのも紹介できると思うんですよ。

/////////////////////////////////////////////////////////////////////////////

はい。第一回目終了です。

ポイントとして、

・事前打ち合わせの内容に合わせて、メンターが用意をしてくれた状態でスタートできる。

・とりあえず大枠だけを教えてくれるので、実際の学習（環境の実装や言語の学習）は自分でやらないといけない（環境の実装とかは、１枠使って手取り足取り教えてもらいながら行うことも可能だそうです）

・メンタリングを継続すれば、断続的なサポートが受けられる（ゲームの骨組みの部分を作ってくれたり）

なので、「これがやりたい」っていう明確な目標があるとサポートがすんなりいくような気がします。あと、普通に開発の手助けもしてくれる（さらにその作る時間は１枠１時間のうちに入ってない）ので、スタッフとして依頼してもかなり安価だと思います。（今のALISの価格ならですけども。むしろ今どうやってALISを手に入れろというのかという問題もある）

次は２週間後です。それまでに環境を何とかしないと。