Internet Computerチュートリアルが終わったらやること１「examplesを動かして遊ぶ」

これからInternet Computerの勉強を始める方に、少しでも役立てていただけると幸いです。

また、この記事ではMacでの作業となりますこと、あらかじめご了承ください。

PCにダウンロード

『git clone https://github.com/dfinity/examples.git』
のコマンドで、examplesを自分のPCにダウンロードできます。

ちなみに私はチュートリアルと同じく、作業フォルダーとして「ic-projects」というフォルダを作っています。

そのため、ターミナルシェルを開いて『cd ic-projects』コマンドを実行した後、ダウンロードを行いました。

Finderから確認すると、一式ダウンロードできていることが確認できました。

ちなみに今回は、『Random maze - cryptographic randomness（ランダム迷路-暗号のランダム性）』という、イケイケな名前のサンプルが気になったので、こちらで遊んでみようと思います。

ソースコードファイルを見てみよう

まずはソースコードを見てみます。 Finderで「./src/random_maze/main.mo」 から開きましょう。

ちなみに私は現段階で、Motoko言語はおろか、JavaScript言語さえ解読できません。

「こんなこと書いてるんだな〜」というのは、UnityのC#での経験からなんとなく分かる程度ですのでご安心を。

Unityの勉強をした時もそうでしたが、いきなりガッツリ言語の勉強から入るよりも、「ここを改造してみたいけど、どの箇所をいじれば良いのだろう？」から入った方が、無理なく言語の習得につながる気がします。

なので、まずは

• 何の変数が定義されているのか
• どんな関数（func）があるのか
• 関数内でざっくりどんな処理を行なっているのか

あたりを、読めないなりに解読しようとしてみます。

なんとなく分かった気になれたら、一度ブラウザから確認してみましょう。

『cd examples/motoko/random_maze』で移動しておきます。

ローカルネットワークを開始します

『dfx start --background』のコマンドを実行して、ローカルコンピューターでインターネットコンピューターネットワークを起動しましょう。

--backgroundオプションを使うことで、ローカルコンピューターで別のターミナルシェルを開かずに済みますよ。

フロントエンドの依存関係について

『npm install』コマンドで、フロントエンドの依存関係をインストールします。（その後必要であれば『npm audit fix』コマンドも。）

このあたりは私もInternet Computerチュートリアル備忘録その１０「Make inter-canister calls」の通り、正直まったく理解できていませんが、ひとまずREADME.mdに従って進めていきます。

アプリケーションを登録、ビルド、およびデプロイする

チュートリアルで行った通り、まずは『dfx deploy』コマンドでビルドし、canisterを作成して展開します。

ユーザーインターフェイスにアクセス

『echo "http://localhost:8000/?canisterId=$(dfx canister id random_maze_assets)"』コマンドで、ユーザーインターフェイスにアクセスできるURLが出力されます。

それを、ブラウザのURL検索欄にコピペして、Enterを押します。

このような画面が表示されるはずです。

試しに「9」と入力して「Generate!」をクリックすると、9×9マスの迷路が表示されました。

25でも同様ですね。

では今回は、このdefaultのソースコードをいじって

• 英語→日本語に変更
• DFINITYのロゴを好きな画像に変更
• 壁の色を赤→黄に変更

をやってみたいと思います。

英語→日本語に変更

これは簡単そうですね。

英語で表示されている

• Approximate size of maze?*
• Generate!
• *rounded down to odd number.

の部分をフロント部分のコードから探し出して、日本語に変えてあげれば良さそうです。

ということで、Finderから「./src/random_maze_assets/src/index.html」 を開きましょう。
これら3つの箇所を日本語にしました。
「command + S」で保存して終了しましょう。

あとは、『dfx build』のコマンドを実行して、変更を加えてプロジェクトを再構築し、『dfx canister install --all --mode upgrade』のコマンドを実行して、プロジェクトの変更をデプロイします。

このあたりは、初心者による初心者のためのInternet Computerチュートリアル備忘録その９「Add a stylesheet」の【スタイルシートを変更し、変更をテスト】でやりましたね。

最後に、canisterのURLを更新または再入力して、ブラウザで結果を表示して動作確認してみましょう。

DFINITYのロゴを好きな画像に変更

先ほどと同じくindex.htmlファイルを見ていると、「img src="logo.png"」と書かれた部分を見つけました。

DFINITYのロゴを好きな画像に変更するためには、この"logo.png"の部分を好きな画像名に変更すれば良さそうですね。
Finderから「./src/random_maze_assets/assets」 を開くと、"logo.png"を見つけました。

このフォルダ内に、好きな画像ファイルを入れて、コードの"logo.png"の名前を変えてあげます。
ということで、私が描いた「もちお」というキャラクターを「motio.png」の名前でフォルダに入れました。

あとはindex.htmlファイルを修正してビルドするだけです。

壁の色を赤→黄に変更

最後に、迷路の壁を赤色から黄色に変えてみます。

どのファイルのコードをいじれば良いのか、自分で探してみたい方はやってみてください！下の方で待ってます。















































ではやっていきます。

調べたところ、「./src/random_maze/main.mo」 に該当箇所がありました。

イラストではなく、まさかの絵文字だったとは。。

条件分岐して絵文字を表示させることもできるのですね、普通に知らなかったので驚きました。

ということで、「しかく」で予測変換して、"🟥"を"🟨"に変更します。

あとはビルドしてデプロイすれば、改造完了です！

ローカルネットワークを停止します

今回はexamplesの一部を使って、簡単な改造をして遊んでみました。

最後にローカルネットワークを止めておきましょう。

ターミナルが現在稼働中であれば「Control-C」を押して、「%」が表示される状態にします。

最後に『dfx stop』コマンドを入力すれば終了です。お疲れ様でした。

思っていた以上に多くの反響をいただき、大変ありがたい次第です。よければHiÐΞやTwitterのフォローお願い致します！

需要がありそうであれば、他の勉強記録も備忘録として残していきますので、何かしらアクションいただけると大変励みになりますし嬉しいです！