まだプログラマーですが何か?

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

2018/02

Hyperledger Composer Playground はオープンソースのブロックチェーン環境である Hyperleger Fabric 上で稼働させるビジネスネットワークを新たに定義したり、編集したり、テストしたり、デプロイする時に便利な GUI を提供するツールです。ウェブ上の公開サービスを使うこともできますが、ローカル環境に導入して、自分専用の環境を構築することもできます。その後者の手順を紹介します。


まず導入先の環境に Hyperledger Fabric を導入しておく必要があります。その手順はこちらを参照してください:
Hyperledger Fabric & Composer 環境の導入手順(2018/2月版)

Hyperledger Fabric が導入された環境の上に Hyperledger Composer Playground を導入します。その手順は以下のコマンド一発だけです:
$ sudo npm install -g composer-playground

導入後に Hyperledger Composer Playground を起動する場合は以下のコマンドを入力します:
$ composer-playground

デフォルトでは 8080 番ポートで Hyperledger Composer Playground が起動します。ウェブブラウザで以下の URL にアクセスします:
http://xx.xx.xx.xx:8080/  (xx.xx.xx.xx は Hyperledger Composer Playground を導入したマシンのサーバー名または IP アドレス)

すると以下のような画面になり、Hyperledger Composer Playground が使えるようになります(ここから先はオンライン版とほぼ同じ):
2018021201


"Let's Blockchain" ボタンをクリックすると、登録済みビジネスネットワークの一覧が表示されます:
2018021202


オンライン版を使うのもアリだとは思いますが、内容のリセットをかけたり、ビジネスネットワークカードを作成したりインポートしたり、といった管理者にしかできない作業も体験できるのがローカル環境に導入した場合のメリットです。


EC サイトの商品画像を効率よく表示するテクニックの1つに「カルーセル(carousel、「回転木馬」とか、日本だと「メリーゴーランド」と表現されることも)」と呼ばれる方法があります。スマホなどの限られた画面サイズの中により多くの画面や画像を含ませる技術で、画面・画像を小さくして詰め込むのではなく、個々の画面は横サイズいっぱいに表示させつつ、(一般的には)横スクロールで画面いっぱいの画像を次々に切り替えて表示するテクニックです。

このカルーセルを実装する方法はいくつもありますが、jQuery と組み合わせて使う slick が有名なようでした。というわけで、使い方を調べてみたので以下メモ代わりに残しておきます:
2018021900


CSS と JavaScript の指定
まず slick は jQuery が読み込まれている前提で動くので、最初に jQuery を読み込んでおきます。その後、CSS 、テーマ CSS、そして Slick の JavaScript をロードします。全て CDN を使うとこんな感じになります:
  :
<script type="text/javascript" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  :

カルーセルの中身を作成
次にカルーセルの中身になる部分を、以下のような形で作成します(カルーセル全体となる <div> 要素に myclass という名前を付けて、その中に子 <div> 要素の形で各カルーセル内の要素を配置。子要素は HTML でも画像でも可)。

当たり前ですが、このままだと各要素が縦に5つ並ぶだけの UI になります:
  :
<div class="myclass">
 <div>(1番目のカルーセルの中身)</div>
 <div>(2番目のカルーセルの中身)</div>
 <div>(3番目のカルーセルの中身)</div>
 <div>(4番目のカルーセルの中身)</div>
 <div>(5番目のカルーセルの中身)</div>
</div>
  :

カルーセル化
この部分をカルーセル化します。カルーセル全体の div 要素(上記の myclass クラスを指定している部分)に slick() 関数を実行します。実行時のパラメータでカルーセルの挙動をカスタマイズすることも可能です(以下はその例):
<script>
  :
$(function(){
  $('.myclass').slick({
    infinite: false,    //. 端までスクロールしてもループしない
    slidesToShow: 3,    //. 1度に3つ表示
    slidesToScroll: 1,  //. スクロールは1つ単位
    initialSlide: 0,    //. 最初に表示するのは一番最初(上)の要素
    arrows: true,       //. コントロール用の矢印を表示する
    dots: true          //. 全体の位置がわかるような点コントロールを表示する
  })
});
  :
</script>


試しにこのブログエントリ内に同じような要素を作ってみるとこんな感じになりました:
(1番目のカルーセルの中身)
(2番目のカルーセルの中身)
(3番目のカルーセルの中身)
(4番目のカルーセルの中身)
(5番目のカルーセルの中身)


簡単ね~

JavaScript で JSON 配列をソートする、意外と簡単な方法があります。具体例として、例えば以下のような JSON 配列: myArray があったときに、
var myArray = [
 { id: 1, name: "鈴木", age: 30 },
 { id: 2, name: "田中", age: 29 },
 { id: 3, name: "佐藤", age: 35 },
   :
];

この JSON 配列を age 要素の小さい順にソートしたいという場合にどうやるか、というケースを紹介します。


まず、JavaScript の配列には sort 関数が標準で用意されています。直感的にこんな感じで使えます:
var array1 = [ 30, 29, 35 ];
array1.sort();                  //. => array1 = [ 29, 30, 35 ];

注意点として sort() 実行後の返り値がソート結果になるのではなく、実行すると array1 そのものが書き換えられる、という点に注意が必要です。

sort() 関数には比較関数をパラメータで指定して、比較方法を指定することもできます。例えば以下の例では比較関数 compare を「小さい順に並べる」ような内容にしているので、sort() 実行後に小さい順にソートされます(要するに普通の sort() と同じ結果になります):
//. 比較関数
function compare( a, b ){ var r = 0; if( a < b ){ r = -1; } else if( a > b ){ r = 1; } return r; }
var array2 = [ 30, 29, 35 ]; array2.sort( compare ); //. => array2 = [ 29, 30, 35 ];

比較関数はパラメータ a と b の大小関係をその返り値によって定義します:
・返り値が 0 より小さい場合、a < b(aはbよりも前に来る)
・返り値が 0 より大きい場合、a > b(aはbよりも後ろに来る)
・返り値が 0 の場合、a = b(aとbの位置関係は変わらない)

したがって、compare 関数の返り値の符号を逆にすると「大きい順に並べる」という比較関数を指定したことになり、sort() 実行後に大きい順にソートされます:
//. 比較関数
function compare( a, b ){ var r = 0; if( a < b ){ r = -1; } else if( a > b ){ r = 1; } return ( -1 * r ); } var array3 = [ 30, 29, 35 ]; array3.sort( compare ); //. => array3 = [ 35, 30, 29 ];

上記 JSON 配列のソートもこの比較関数を使った sort() の応用で可能になります。具体的には以下のように age 要素で大小比較するような比較関数を用意します:
//. 比較関数
function compare( a, b ){ var r = 0; if( a.age < b.age ){ r = -1; } else if( a.age > b.age ){ r = 1; } return r; }
var myArray = [ { id: 1, name: "鈴木", age: 30 }, { id: 2, name: "田中", age: 29 }, { id: 3, name: "佐藤", age: 35 }, : ]; myArray.sort( compare );

これだけ。応用も簡単にできそうで超便利。


オープンソースのブロックチェーン環境である Hyperledger Fabric と、その開発ツールである Composer の環境を手元のマシンに導入する手順を紹介します。基本手順は以前に IDCF テックブログに寄稿させていただいた内容と同じですが、各モジュールのバージョンや導入直後のカード作成の部分が異なっているので、補足する形で紹介します。

前提条件

まず、以下の説明では前提プラットフォームとして Ubuntu 16.04 を使います。ここに Docker, Docker-Compose, Node.js V6.x を導入してから Hyperledger Fabric をインストールしていくのですが、この3つ(Docker, Docker-Compose, Node.js V6.x)が導入されていれば macOS でも可能です(macOS でのこれら3つの導入手順は省略させてください、普通にググれば見つかると思うので・・・)。以下はこれら3つが導入されている前提で、それ以降の手順を紹介します(Ubuntu でも macOS でも手順は同じです)。

というわけで、この時点では以下の3つのモジュールが導入されているものとします(バージョンは 2018/02 時点で手順に沿って実施した場合に入るバージョンでした):
 - Docker 17.12.0-ce
 - Docker-Compose 1.12.0
 - Node.js v6.12.3

ここまでの導入手順については、こちらを参照ください:
Hyperledger Fabric でブロックチェーン環境を構築


Hyperledger Composer コマンドラインインターフェース

前提環境を整える時に導入されている npm コマンドを使って、Hyperledger Composer のコマンドラインインターフェース(composer-cli)をインストールします:
$ sudo npm install -g composer-cli

(↓2018/03/27 追記)
以下の PeerAdmin@hlfv1 カードを作成する際の仕様が変わったため、ここでは composer-cli のバージョン v0.16.3 を指定してインストールする必要があります。したがって以下のコマンドを実行してください:
$ sudo npm install -g composer-cli@0.16.3
(↑2018/03/27 追記)


導入に成功すると composer コマンドが使えるようになります。2018/02 時点でのバージョンは 0.16.3 でした:
$ composer
v0.16.3

Hyperledger Fabric 開発環境サポートツール

「サポートツール」と呼ばれるファイル群を使って、開発環境として使える Hyperledger Fabric を導入します。一般的にブロックチェーンでは「分散台帳」と呼ばれる方式でデータを複数のノードに分散して共有する仕組みを取りますが、開発環境では1ノードのみ使います。

まず、この時点で docker サービスが有効になっている必要があります。docker サービスが停止している場合は、このタイミングで起動しておきます:
$ sudo service docker start

改めてサポートツールを使って Hyperledger Fabric 環境を導入します。以下の例では ~/fabric というフォルダを作って、その下にサポートツールを導入しています:
$ cd
$ mkdir fabric  (ホームディレクトリ配下の ~/fabric/ にサポートツールを導入する場合)
$ cd fabric
$ curl -O https://raw.githubusercontent.com/hyperledger/composer-tools/master/packages/fabric-dev-servers/fabric-dev-servers.zip
$ unzip fabric-dev-servers.zip

「サポートツールの導入」といっても実質「zip ファイルの展開」です。展開ファイルを確認します:
$ ls
_loader.sh                downloadFabric.sh       startFabric.sh
composer-logs             fabric-dev-servers.zip  stopFabric.sh
createComposerProfile.sh  fabric-scripts          teardownAllDocker.sh
createPeerAdminCard.sh    package.json            teardownFabric.sh

2018/02 版では以前に紹介した時よりもファイルが増えています。これは Hyperledger Composer の仕様変更に伴うもので、以前にはなかった createPeerAdminCard.sh などは環境準備後に使うことになります。

では展開したサポートツールを使って Hyperledger Fabric 環境を構築します。といってもコマンドはこれひとつです:
$ ./downloadFabric.sh

このコマンドの中で必要とされる docker イメージのダウンロード等が行われ、Hyperledger Fabric 環境がローカルマシン内に構築されます。

コマンドが終了したら、いったんこの時点で docker コンテナのプロセスを確認します。他の用途で docker を使っていたりしない限り、この時点では docker コンテナのプロセスは1つも動いていないはずです:
$ docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES

Hyperledger Fabric 環境の起動

ではローカルマシンに導入した Hyperledger Fabric 環境を起動します。これもコマンド1つです:
$ ./startFabric.sh

このコマンドが完了すると Hyperledger Fabric が起動したことになります。改めて docker コンテナのプロセスを確認すると、先程まで空だったコンテナプロセスがいくつか動いていることが確認できるはずです:
$ docker ps
CONTAINER ID        IMAGE               COMMAND             
6eb73fa9bc26        dev-peer0.org....   "chaincode -peer.a..."   
3ce2ff860034        hyperledger/f....   "peer node start -..."
e99420efba7f        hyperledger/f....   "orderer"
0dc1e0deaa92        hyperledger/f....   "sh -c 'fabric-ca-..."
c6bc1fe8a3f8        hyperledger/f....   "tini -- /docker-e..."

なお、起動中の Hyperledger Fabric を停止する場合は ./stopFabric.sh を実行します(以下の作業を続けるのであれば、しなくてもいいです):
$ ./stopFabric.sh


カードファイルの作成

ここからは以前の情報にはなかった、新しい仕様に関わる新しい箇所です。2018/02 時点では Hyperledger Fabric に接続する際に「カードファイル」と呼ばれる仕組みを使ってアクセスを行う必要があります(以前は「プロファイル」と呼ばれる仕組みを使った方法が用いられていました)。

作成&起動した Hyperledger Fabric 環境についてもカードファイルを使わないとアクセスしたり、操作することができません。まずはローカル環境(hlfv1)のデフォルト管理者となる PeerAdmin 用のカードファイルを作成します。サポートツールに含まれる以下のスクリプトを実行します:
$ ./createPeerAdminCard.sh

色々動いて、最後に "Command succeeded" と表示されれば成功で、/tmp/PeerAdmin@hlfv1.card というファイルが作られているので、このファイルを手元に(例えばホームディレクトリに)保存しておきます:
$ cp /tmp/PeerAdmin@hlfv1.card .

同時に、この時点で PeerAdmin@hlfv1 カードは有効に登録されています。登録済みのカードを一覧表示するには以下のコマンドを実行します:
$ composer card list

The following Business Network Cards are available:

Connection Profile: hlfv1
+--------------------+-----------+------------------+
| Card Name          | UserId    | Business Network |
+--------------------+-----------+------------------+
| PeerAdmin@hlfv1    | PeerAdmin |                  |
+--------------------+-----------+------------------+


Issue composer card list --name  to get details a specific card

Command succeeded


 ↑PeerAdmin@hlfv1 が確認できました。




・・・というわけで、2018/02 時点での仕様に合わせた Hyperledger Fabric & Composer 環境の構築手順と、カードファイルの準備手順までを紹介しました。ここまでできていると、composer コマンドとカードファイルを使ってビジネスネットワークを定義したり、起動したり、、、といったことができるようになります。そのための準備作業という意味合いでの紹介でした。


これらのエントリの続きです:
アリババクラウドを使う(使おうとしてみた)
アリババクラウドのインスタンスを作ってみた


↑前回までの作業でアリババクラウドの青島データセンター内に Ubuntu サーバーを立てることができました。このサーバーインスタンスを使って色々試したかったことをやってみたいと思います。

まずはお約束として、拙作マンホールマップを使ってみたいと思います。残念ながら GUI を用意していないので、curl コマンドを使ってマンホールマップ API を呼んでみます。まずは普通に「中国」を 10 件検索してみます:
$ curl 'http://manholemap.juge.me/searchkeyword?keyword=中国&limit=10'

2018020704


動きました!「中国」というキーワードで検索ヒットしたマンホール情報の一覧から最初の10件が XML で取得できました。

では同様にして中国国内から「天安門」を検索してみます(他意はありません):
$ curl 'http://manholemap.juge.me/searchkeyword?keyword=天安門&limit=10'

2018020705



ゼロ件! えっ!?もしかしてこれが噂の The Great Firewall ・・・ かと思いましたが、実際にマンホールマップには「天安門」で登録されている情報は一件もありませんでした(笑)。繰り返しますが他意はありませんよ、ええ:
2018020708


(参考)他意はありませんが、参考リンク
中国を含む各国版のGoogleで「天安門事件」を画像検索するとどうなるのか?



次に挑戦したのは「中国国内のサーバーに Hyperledger Fabric を導入してブロックチェーン環境を作る」というものです。こちらの記事を参考に Hyperledger Fabric のインストールを試みました。

同記事内では docker を導入し、docker-compose を導入し、その後に Node.js & npm をインストールしてから composer-cli を導入します。docker & docker-compose までは順調に入りました。その後に Node.js を導入しようと、n package を入れて、Node.js の新しいバージョンを導入しようとしたら・・・
2018020701


・・・やけに時間がかかる・・・
2018020702


・・・まだ終わらん・・・
2018020703


と、結果的には導入できたのですが、このプロセスにこれまでに経験なかったほど時間がかかりました。何か環境が違っているのだろうか・・・


そして改めてこの記事の手順に沿って、npm を使って composer-cli をインストール・・・
2018020706


・・・失敗してしまいました:
2018020707


エラーが記録されているのは暗号化ライブラリである pkcs11js パッケージを導入するタイミングでした。ただここに問題があるのが、別の所の問題が引き金になっているのかは分かっていません。pkcs11js 単体でのインストールには問題なかったのですが、この一連の流れの中では何度試しても 100% ここで引っかかってしまう、という現象に見舞われてしまいました。過去にこんな所でひっかかったことがなかった所で引っかかってしまいました。

エラーメッセージを調べているのですが、未だに原因がよくわかっていません。何がいけないんだろうか?もしかしてさっき変な検索したのが良くなかった??(苦笑)
2018020709


とりあえず、サーバー作成までは意外(?)とあっけなかったのですが、その先は一筋縄ではいかない環境であることが分かりました。うーむ、想定よりも早めに問題に遭遇・・・


このページのトップヘ