【Internet Computer】開発環境構築してサンプルを動かす

ブロックチェーン上にアプリをのせることのできるInternet Computer。

ローカル環境構築する方法は、公開されているドキュメントは英語ですし、専門の用語がちらほら出てくるからか、ちょっと全体像を掴みづらかったりしないでしょうか。

初めてさわるときには、混乱してもおかしくないと思ってます。

そこで本記事では、Internet Computerのローカル環境構築からサンプルの動作確認までの手順を、
補足を追加しつつ紹介します。

なお、この記事ではブロックチェーン上にはアプリを公開しません。
あくまでローカル環境を取り扱います。

大まかな流れ

最初に大まかな流れを見ていきましょう。

SDKインストール
DAppsプロジェクト作成
実行環境起動
キャニスターの展開
キャニスターの動作確認

工程1のSDKをインストールさえしてしまえば、開発のための環境構築自体は完了しています。

あとは、実際に手元でサンプルプロジェクトを実行する作業です。

インストール

ここではインストールに必要な前提条件、サンプルプロジェクトを動かすための追加の作業、そして実際に sdk のインストールの手順について見ていきます。

前提条件

OS

OSはmacかlinuxであること。windowsを使っている場合はWLSとか利用します。

なお、今回のキャプチャ画像はwindowsのWSL-Ubuntu 20.04 LTS上に構築しています。

CPU

intelとAMDでは問題なく動きました。

macの最新のチップだとひと手間かかったとの噂があったり、
実体験としてarmのチップもインソールがうまくいかなかったりしましたが、
後述のSDKインストールコマンドのなかでCPUチェックがはいるので、
インストールできるかどうかわからなくても、とりあえずインストールを試してみましょう。

nodeのインストール

nodeも合わせて使うので、事前にインストールをしておきます。

OSに合わせてインストールしましょう。

DFINITY Canister SDKのインストール

SDKのインストールには次のコマンドを使います。

sh -ci "$(curl -fsSL https://sdk.dfinity.org/install.sh)"

インストール、念のための注意点

実はSDKをインストールするコマンドで指定されているURLは別のものもあります。

私の環境かはたまた操作ミスか、フロントエンドのサンプルコードが生成されなかったので、sdk.dfinity.orgの方を利用することをおすすめします。

インストール確認

次のコマンドでインストールされたバージョンを確認しましょう。

 dfx --version

無事バージョンが返ってくれば、インストールは終了です。

DAppsのプロジェクトを作成

インストールが完了したなら続いて、DAppsのサンプルプロジェクトを作成します。

プロジェクトで作るキャニスター
プロジェクトの作成手順

の順に紹介します。

プロジェクトで作るキャニスター

まずは今回つくるキャニスターの全体像を説明します。
サンプルプロジェクトでは３つのキャニスターが作られます。

なお、キャニスターとはInternet Computerで動く仮想マシンのようなもので、

そこにWebAssembly（WASM）などのコードをデプロイして動かします。

フロントエンドキャニスター(hello_assets)

一つ目のフロントエンドキャニスターはシンプルなWebページを表示するキャニスターです。

html,css,javascriptや画像ファイルに加えて、バックエンドと連携するためのwasmファイルが含まれます。

hello_assetsという名前で作成する予定です。

バックエンドキャニスター（hello）

二つ目はバックエンドキャニスター。

motoko（internet computerの標準言語）でプログラムが作成されます。

こちらもシンプルで、名前をとる引数があり入力すると”Hello, ●●●●!”と返してくれます。

バックエンドキャニスターはいわゆるAPIですね。

こちらはhelloという名前で作成されます。（helloプロジェクトの中の、helloキャニスター）

サイクルウォレットキャニスター

三個目はサイクルウォレットキャニスターです。

サイクルウォレットキャニスターはちょっと特殊で、コードなしで勝手に作成されます。

internet computerのキャニスターはcyclesというトークンをチャージすること動きます。

internet computerのネットワークに乗せているときは、ICPと交換してcyclesを手にいれるのですが（つまりお金がかかるということ）

ローカル環境で動かす分には、ローカル環境専用のサイクルウォレットキャニスターが作成され、
ローカル環境でしか使えないcyclesが事前にチャージされてますので、ご安心ください。

サンプルプロジェクトのメインはあくまでフロントエンドのhello_assetsとバックエンドのhelloです。

ローカル環境くらいサイクルウォレットキャニスター作らなくてもいいじゃないかとも思いますが、
本番環境であるところのInternet Computer上と同じ状況を構築してくれると考えるとメリットはありそうです。

プロジェクト作成手順

全体のイメージを確認したところで、実際にサンプルプロジェクトを作成していきましょう。

newコマンドを使用します。

dfx new hello

実行するとhelloディレクトリが作られ、そのなかにhelloプロジェクトが一式入ります。

作成に成功すれば次のような表示に。

ソースコードについて補足

サンプルのコードはhello/src以下に配布されています。

先ほど説明した通り、バックエンドのhelloキャニスター用のソースコードと、
フロントエンドのhello_assetsキャニスター用のソースコードは作られますが、
ウォレットキャニスターのコードは作成されません。

実行環境を起動

ローカルキャニスターを配置し動かすための実行環境を起動させます。
これは自分のプロジェクトだけで動くInternet Computerのようなものです。

起動するにはまず

cd hello

でdfx.jsonのある階層に移動し、

dfx start

で開始します。
なお、バックグラウンドでの実行は

dfx start --background

停止は

dfx stop

で可能です。

キャニスターの展開

では続いて実行環境の上にフロントエンドのhello_assets、バックエンドのhelloを配置しましょう。

dfx.jsonのある階層で

dfx deploy

成功すると、こんな出力が得られます。

Creating a wallet canister on the local network.
The wallet canister on the "local" network for user "default" is "cvccv-qqaaq-aaaaa-aaaaa-c"
Deploying all canisters.
Creating canisters...
Creating canister "hello"...
"hello" canister created with canister id: "ai7t5-aibaq-aaaaa-aaaaa-c"
Creating canister "hello_assets"...
"hello_assets" canister created with canister id: "hozae-racaq-aaaaa-aaaaa-c"
Building canisters...
Building frontend...
Installing canisters...
Creating UI canister on the local network.
The UI canister on the "local" network is "fterm-bydaq-aaaaa-aaaaa-c"
Installing code for canister hello, with canister_id ai7t5-aibaq-aaaaa-aaaaa-c
Installing code for canister hello_assets, with canister_id hozae-racaq-aaaaa-aaaaa-c
Authorizing our identity (default) to the asset canister...
Uploading assets to asset canister...
Starting batch.
Staging contents of new and changed assets:
 /favicon.ico 1/1 (15406 bytes)
 /index.html 1/1 (663 bytes)
 /index.html (gzip) 1/1 (382 bytes)
 /index.js 1/1 (602422 bytes)
 /index.js (gzip) 1/1 (144249 bytes)
 /index.js.map 1/1 (651715 bytes)
 /index.js.map (gzip) 1/1 (148503 bytes)
 /logo.png 1/1 (25397 bytes)
 /main.css 1/1 (537 bytes)
 /main.css (gzip) 1/1 (297 bytes)
 /sample-asset.txt 1/1 (24 bytes)
Committing batch.
Deployed canisters.

内容を簡単に見ていきます。

ウォレットキャニスターの作成

最初にウォレットキャニスターが構築されます。

The wallet canister on the "local" network for user "default" is "cvccv-qqaaq-aaaaa-aaaaa-c"

cvccv-qqaaq-xxxx…となっている部分が、このキャニスターのIDになります。

バックエンドキャニスター（hello）の作成

続いてhelloキャニスター。

"hello" canister created with canister id: "ai7t5-aibaq-aaaaa-aaaaa-c"

フロントエンドキャニスター(hello_assets)の作成

"hello_assets" canister created with canister id: "hozae-racaq-aaaaa-aaaaa-c"

hello_assetsのキャニスターも続いて作成されます。

UIキャニスターの作成

最後にUIキャニスターの作成。

Creating UI canister on the local network.
The UI canister on the "local" network is "fterm-bydaq-aaaaa-aaaaa-c"

「ひとつ多いじゃないか！」と思われますが、このキャニスターがなくてもサンプルは動くので省いてました。

このUIキャニスターは開発者ツールに相当します。使い方は後ほど説明します。

プログラムをキャニスター上に配置

残りのInstalling code for canister …以降はコードをキャニスターに配置しています。

キャニスターの動作確認

キャニスターがローカル環境で実行されたところで

メインのフロントエンドキャニスターとバックエンドキャニスターの動作確認をしていきましょう。

フロントエンドキャニスターの動作確認

フロントエンドキャニスター（hello_assets）は次のURLで開くことができます。

http://localhost:8000/?canisterId=キャニスターID

例　http://localhost:8000/?canisterId=hozae-racaq-aaaaa-aaaaa-c

デプロイされたhtmlが表示されればOK。

バックエンドキャニスターの動作確認

続いてバックエンドキャニスター（hello）の動作を確認しておきます。

バックエンドには、入力されたテキストに「hello」と加えるシンプルなメソッドがサンプルコードとして含まれています。

この動作を確認する方法は3つあるのでそれぞれ見ていきましょう。

フロントエンドから確認
コマンドで確認
Candid UIで確認

フロントエンドから確認

サンプルプロジェクトではフロントエンドのhello_assetsとバックエンドのhelloは連携済みでデプロイされています。

フロントエンドの入力フォームに文字を入力して、

「click me」を押せばバックエンドのキャニスターもあわせて動きます。

コマンドラインで確認

フロントエンドキャニスターを使わずとも、バックエンドキャニスターをコマンドで呼び出すことも可能です。

「dfx canister call キャニスター名メソッド文字列」で利用できます。

dfx canister call hello greet world

実行すれば、出力結果として

(“Hello, world!”)

が得られます。

callはcandidインターフェースを介して

GUI candidインターフェースから確認

バックエンドのキャニスターの動作確認はフロントエンド以外のUIからも確認できます。

キャニスターの展開でこっそりデプロイされていた、UIキャニスターを使います。

helloキャニスターにアクセスしたときと同じように、

http://localhost:8000/?canisterId=キャニスターID

でアクセスしましょう。

UIキャニスターのキャニスターIDがわからない場合は

dfx canister id __Candid_UI

を実行して取得するか、hello/.dfx/local/canister_ids.json

を開くことでキャニスターIDを確認できます。

UIキャニスターをブラウザで開くと以下のような画面が出ます。

「privide a canister ID」にバックエンドキャニスター（hello）のIDを入力し、

「GO」ボタンを押します。

すると、バックエンドキャニスターのメソッドを呼び出すAPIクライアントが表示されます。

このUIキャニスターはフロントエンドを用意せずともバックエンドキャニスターの動作確認がGUIできるようになっています。

まとめ

internet compouterのローカル環境構築とサンプルプロジェクトの実行は以上です。

ポイントをまとめます。

現時点でlinuxかmacでインストールできるが、windowsではできない
サンプルプロジェクトにはフロントエンドとバックエンドが作られる
ウォレットキャニスターというcyclesを管理するキャニスターも作られる
バックエンドキャニスターを動かすためのGUIツールも作られる

手順としては、他のプログラミング言語の開発環境構築と比べて、特段複雑というわけではないですね。

オラクルクラウドの無料で使えるarm-cpuは、現時点でサポートされていなかったのはちょっと残念でしたが、
そのうち動くようにしてくれるはず・・・