Internet Computer のためのオンライン開発環境「Motoko Playground」の紹介 （日本語訳）
Medium の DFINITY 公式の記事 Introducing the Motoko Playground, an Online Development Environment for the Internet Computer (2020/7/28) の日本語訳です。
Motoko Playground は、ウェブブラウザ内で直接キャニスター・スマートコントラクトをビルド・デプロイできるようにするものです。
シニアソフトウェアエンジニア Yan Chen氏｜DFINITY
DFINITY財団の言語チームは、開発者が Internet Computer にオンボードする際の体験を簡素化するため、 Internet Computer のブロックチェーン上で動作する統合開発環境（IDE）「Motoko Playground」をオープンソースでリリース することを発表します。
Motoko Playground は、Internet Computer のプログラミングモデルをシームレスにサポートするために設計されたプログラミング言語「Motoko」を使用し、DFINITY Canister SDK のダウンロードやウォレットの設定を必要とせず、Webブラウザ内で直接 Canister スマートコントラクトのビルドとデプロイができるようになっています。開発者は独自の開発環境を構築する必要がないため、この完全なインブラウザ体験により、誰でもどこからでも Internet Computer 上でプログラミングを試しながら Motoko を探求し、学ぶことができるのです。
Motoko Playground を始めるにあたって
dapp に入ると、どのようなプロジェクトを扱うかを選択し、インターネットコンピュータにデプロイすることができます。以下は、Motoko Playground を使用する際のワークフローの例です。
ステップ1: サンプルプロジェクトを選択します。
新しい開発者がすぐに始められるように、DFINITY の examples リポジトリ から、カウンター、電話帳、ランダム迷路、出版/購読サービスなど、いくつかの Motoko プロジェクトがあらかじめ選択されています。また、Github から任意の Motoko のコードをインポートすることもできます。
上記のリストの中から Counter の例を選んでみましょう。ナビゲーションの「Main.mo」のリンクの下に、コードを表示することができます。
ステップ2: プロジェクトを選択した後、右上の “Deploy “ボタンをクリックして、インターネット・コンピュータ上でキャニスターをビルドし、デプロイします。
“Deploy” をクリックした後、デプロイするキャニスターの名前を指定します。この場合、デプロイするキャニスタの名前は “Main” です。Internet Computer から無料のキャニスタ ID を取得し、コンパイルされた WebAssembly (Wasm) モジュールをインストールする必要があるため、ディプロイメントに数秒かかります。
ステップ3: キャニスタがデプロイされたら、右側にある Candid UI を使用してコードをテストすることができます。
Candid UI を使用すると、ブラウザを通じてキャニスターと通信することができ、初期値の問い合わせやカウンターのインクリメントなどを行うことができます。(必要であれば、dfx や ic-repl などのコマンドライン・インターフェイス・ツールを使用して、キャニスターと対話することもできます)。
ステップ4：もし、コードに変更を加えたい場合は、エディターで行います。例えば、以下ではメソッドを get2() に変更しました。
ステップ5: 再配置する場合は、再度「Deploy」ボタンを押してください。Main “という名前のキャニスタがあることをシステムは既に知っているので、既存のキャニスタをアップグレードするか、まったく新しいキャニスタをインストールするかを指定する必要があります。以下の例では、既存のキャニスタをアップグレードします。
ステップ6: カウンターは安定したメモリにあるので、アップグレード後、新しい get2 メソッドを呼び出すと、（0ではなく）前回のカウンターを初期値として返します。
ステップ7: Motoko Playground はインストール引数をサポートしています。以下の例では、カウンター用のアクタークラスを追加しています。
ステップ8: キャニスターを展開しようとすると、システムはインストール時の引数があることを認識し、カウンターの開始値を尋ねます。この例では、開始値が 42 になったので、キャニスターを再インストールすることができます。
ステップ9: さて、初期値を問い合わせると、デプロイ時に指定したように、カウンターは 42 という値を返します。
大規模なプロジェクトでは、通常、開発者はサードパーティの Motoko ライブラリを使用する必要があります。Motoko Playground は、コミュニティによって管理されている Motoko ライブラリのセットである vesselパッケージセット をサポートしています。左カラムのパッケージセクションにある「+」ボタンをクリックすることで、構文解析、SHA256、各種データ構造ライブラリなど、これらのライブラリをインポートすることができます。
Motoko Playground は、キャニスタ間の呼び出し、キャニスタのアップグレード、初期化引数付きアクタークラスのインストール、サードパーティライブラリなど、ローカルの開発環境と同じ機能をサポートしています。興味深い演習として、開発者は CanCan リポジトリをインポートし、パッケージセクションから「sequence」ライブラリを追加し、Motoko Playgroundでバックエンドキャニスタを構築することを、すべてWebブラウザ上で行うことが推奨されます。
Motoko Playground のスタンドアロン版の他に、Motoko 言語マニュアル で使用されている埋め込み版もあります。これは Motoko Playground の軽量版で、ユーザがインタラクティブにドキュメントのコードを変更し、Internet Computer にインストールすることなく、ブラウザ上で即座にコードを実行（解釈）することができるようになっています。
Motoko Playground の仕組み
Motoko Playground のソースコードは、現在すべて公開されています。開発者は、Motoko と Rust の両方で書かれた JavaScript フロントエンドと無料サイクルを管理するバックエンドキャニスターからなるフルスタックのウェブアプリケーションを見つけることができます。
多くのオンライン IDE とは対照的に、Motoko コンパイラは js-of-ocaml コンパイラによってフロントエンドにホストされています。これにより、コンパイラがリモートサーバではなくユーザのブラウザで実行されるため、セキュリティやスケーラビリティに関する懸念が自動的に解決されます。具体的には、フロントエンドは以下のコンポーネントで構成されています。
- js-of-ocaml によって生成された Motoko コンパイラ（Web Worker 内で動作）
- Motoko のシンタックスハイライトとバリデーションをサポートする Monaco (VSCode) エディタ。
- vessel パッケージセットからサードパーティライブラリをロードするVessel パッケージマネージャ。
- キャニスターのインストール/アップグレード、アクタークラス、Candid UI を統合したデプロイモジュールです。
- Github から任意の Motoko コードをインポートするためのモジュール。
無料サイクルとバックエンド
DFINITY は、開発者の採用を支援するため、Motoko Playground からデプロイされるキャニスターに無料のサイクルを供給しています。これにより、新規ユーザーはサイクルウォレットを設定しなくても、MotokoとInternet Computer を探索することができるようになります。
バックエンドのキャニスターは Motoko で書かれており、配備されたキャニスターが使用する無料サイクルを管理します。これらの無料サイクルを公平に利用するために、配置されたキャニスターにはいくつかの制限があります。各キャニスターの初期サイクル残高は 0.5T で、10 分間しか実行できません。また、キャニスター間でのサイクルの移動は許可されていません。
具体的には、フロントエンドが新しいキャニスターを要求すると、バックエンドはキャニスタープールで空いているキャニスターを見つけ、サイクルを補充し、このキャニスターの有効期限を設定します。有効期限を過ぎると、バックエンドはこのキャニスターを配備を要求している他のユーザに与えることができます。一人で多くのキャニスターを占有することを防ぐため、ユーザーが新しいキャニスターを要求する際には、作業証明書を要求します。
リソースの公平性を確保するために、ユーザが大量のサイクルを自分のキャニスタに転送しないようにしたい。例えば、管理用キャニスタのdeposit_cycles メソッドを呼び出すことで、遊び場に配置されたキャニスタで利用可能なすべてのサイクルを対象キャニスタに簡単に転送することが可能である。この攻撃を防ぐために、提出されたすべての Wasm モジュールを検査し、Wasm レベルでサイクル転送命令を削除します。Motokoには今のところ Wasm 解析ライブラリがないので、この目標を達成するためにRust キャニスタが使用されます。Motoko のバックエンドがインストール要求を受け取るたびに、検査のために Wasm モジュールを Rust キャニスタに転送します。これは実際、Motoko の FFI サポートを模倣した面白いパターンです。
将来的には、ユーザが独自のウォレットを提供してデプロイする場合、これらの制限は緩和され、より高度なユースケースが可能になる予定です。
Motoko Playground を Internet Computer のためのフル機能の Web IDE にするために、さらに多くの機能を追加していく予定です。コミュニティからの貢献は大歓迎です。
一方、SDK をダウンロードすることなく、Internet Computer の母国語である Motoko をウェブブラウザ上で直接、便利に探求することを楽しんでいただければと思います。また、Motoko Playgroundのオープンソースのコードもぜひご覧ください。
____
smartcontracts.org でビルドを開始し、forum.dfinity.org の開発者コミュニティにぜひ参加してください。
