Blockstackでアプリ開発をはじめる手順

Image Credit: blockstack.org

はじめに

Blockstackは、ブロックチェーンを利用して非中央集権型のアプリケーションを作成できるプラットフォームです。この記事では、Blockstackとは何かについてと実際にBlockstackを使ったアプリでHello Worldを表示するまでの手順をまとめます。

Blockstackについて

Blockstackは、従来のクライアント・サーバーのような中央集権的なシステムではなく、サーバーが存在せず非中央集権権的な分散システムを構築するためのプラットフォームです。Blockstack上で動作させるアプリケーションは、従来のようにサーバーで何かしらの処理を実行したりデータを保存したりすることなく、クライアント上でこれらを実行します。 Blockstackの実際の役割について少し説明すると、フロントエンドとしてJavascript（ReactやVueも使用可）などでアプリを開発し、そのバックエンドとしてBlockstackを使用します。Blockstackはブロックチェーン技術もベースとなっています。詳しくは、以下の公式の日本語のホワイトペーパーにまとめられています。

できるようになること

Blockstack公式のチュートリアルに従って、BlockstackアプリでHello Worldを表示させるまでの手順をまとめます。

前提と環境

Blockstackのアプリ開発といっても、新しい言語を覚えるというようなことは不要です。Javascriptでフロントエンド部分を開発します。すなわちReactやVue.jsを使用できます。ちなみに、まだプレリリースですがiOSおよびAndroid用のSDKも公開されています。この記事では、Javascrip(Vue.js)tで開発を進めます。以下が前提と要件です。

• OS : Ubuntu18.04（Windows、macOSでも可）
• Node.js v10以上推奨。最低でもNode.js v8以上が必要
• BlockstackアプリへのアクセスにはGoogle Chromeを使用する（Firefox 69.0.1 (64 ビット) では期待の動作をしなかった）

Node.jsがインストール済かどうかは、端末で以下のコマンドを実行することで確認できます。ver10以上が表示されればOKです。

$ node -v
v10.15.3

以下の公式チュートリアルに従って作成していきます。

BlockstackのIDを作成する

まず公式チュートリアルにもある通り、以下にアクセスしてBlockstackのIDを作成します。

以下のようなウィンドウが表示されるので、「Create new ID」をクリックします。

続いてユーザ名の入力です。任意のユーザ名を入力して、「Check Availability」クリックします。ユーザ名は最低８文字以上です。

「Check Availability」をクリックしてユーザ名に問題がなければ、以下のように「Username Available!」と表示されます。次に「Continue」をクリックします。

ユーザー名に続いてパスワードを入力します。入力したら「Register ID」をクリックします。

少し待機すると、今度はメールアドレスを確認されます。バックアップとリカバリー時に必要となると書かれています。「Next」をクリックします。

以下のようにIDが作成できたと表示されます。

「Go to Blockstack」をクリックします。すると、以下のようにTop Appsというページで公開されているBlockstackアプリが表示されます。これでIDの作成は完了です。

なお、ID作成時に登録したメールアドレスに以下のようなメールが届いています。

Save this email: Recovery info for hellocode.id.blockstack

lJoiw4u0tOJO:Er294jt.ILJEorilu2j4o8;jtO>ILAEJ;of9j2;49jtp:IJEFp9fj43p;9jtp;9jKP:IJEp;94ojk2;t

You can recover your Blockstack ID on any device with your Magic Recovery Code.
(you will also need your password).We send this code only once. Blockstack cannot restore your ID or reset your password
for you. Please save this email forever and make note of the password you used.You can also recover your Blockstack ID with your Secret Recovery Key.
Save your key wherever you keep important, secret information.View Secret Recovery KeyThis email was sent to you because someone created a blockstack ID with this
email address. If this was not you, please disregard this email.

上記メールの中の、lJoiw4u0t...という文字列が後ほど使用するシークレットキーになるのでコピーしておきます。以上でIDの作成が完了です。

Blockstackアプリを作成する

Blockstackのアプリ作成には、npxコマンドを使用します。なお、作成時に素のJavascpritか、React、Vueのいずれかを指定することができます。ここでは、試しにVue.jsで作成してみます。

適当なディレクトリに、今から作成するBlockstack用のディレクトリを任意の名前で作成します。

$ mkdir hello-world-app
$ cd hello-world-app

そして以下のnpxコマンドで作成します。以下はVue.jsを指定する場合です。

$ npx generator-blockstack --vue

少々時間がかかるので完了するまで待機します。最終的にI'm all done. Running npm ...と表示されれば完了です。

$ npx generator-blockstack --vue                                                                               
npx: 338個のパッケージを14.657秒でインストールしました。                                                           
   create package.json                                                                                             
   create babel.config.js                                                                                          
   create .editorconfig                                                                                            
   create .eslintignore
   
   (...途中省略...)

   create public/_redirects
   create vue.config.js


I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the comm
and yourself.

(...以降省略...)

なお、上記のメッセージ以降にパッケージの依存性に関して警告やエラーが出る場合があります。とりあえずは無視して以下を実行して必要なパッケージをインストールしてしまいます。

$ npm install --save

作成したBlockstackアプリのディレクトリ構造を見てみると、以下のようになっています。　

.
├── babel.config.js
├── firebase.json
├── jest.config.js
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
├── src
└── vue.config.js

上記のsrcディレクトリの中に見慣れたVue.jsのApp.vueなどのコードが含まれています。自身のアプリ開発時には、このディレクトリ配下のコードを主に修正、追加していく形になります。

Blockstackアプリを起動する

以下で作成したBlockstackアプリを起動します。

$ npm run start

以下のように表示されれば、無事に起動しあとはGoogle Chromeからhttp://localhost:8081/にアクセスできます。

$ npm run start

 DONE  Compiled successfully in 18376ms                                                                  2:33:17 PM


  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://10.0.2.15:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

なお、Reactを指定した場合は、ポート番号が8081ではなく、3000になっていました。 Google Chromeでlocalhost:8081にアクセスしてみると、以下のように表示されます。「Sign In with Blockstack」をクリックします。

以下のようにサインインが面が開くので、「Sign in with an existing ID」をクリックします。

先程メールに届いたシークレットキーを入力して、「Sign In」をクリックします。

さらにパスワードを入力して「Next」をクリックします。

続いてメールアドレス入力して「Next」をクリックします。

以下のように表示されればサインインが成功です。「Go to Hello, Blockstack App」をクリックします。

最後に以下のように使用するIDを選択するよう表示されるので、選択します。複数のBlockstack IDを保持している場合は複数表示されます。

これで認証が完了し、以下のように作成したBlockstackのHello Worldアプリに戻ります。

これでBlockstackアプリでHello Worldを表示させるまでが完了しました。なお、FireFoxでアクセスした場合、何故かBlockstackのログインが完了してもHello Worldアプリにリダイレクトされず、認証した状態になりませんでした。おそらくCORS対策周りが原因そうですが、とりあえずGoogle Chromeだと期待通りの動作をしました。

より実践的な内容について

上記のHello Worldアプリからいきなり実践的な開発を進めるのは難しいと思います。公式チュートリアルには、次のステップとしてToDoアプリの開発手順が掲載されています。英語ですが、Google翻訳などを使って進めればある程度理解できると思います。

なお、Blockstack上で動作するアプリのデータは、Gaiaと呼ばれるストレージネットワーク上に保管されます。中々奥が深そうな内容ですが、以下の公式ドキュメントに仕組みについて説明が載っています。

まとめ

Blockstackについての理解はまだ全くできていませんが、色々と実際に使ってみてまたまとめたいと思います。