5. デモ
5.1. デモ1 クラウド上のBlockchain-as-a-Service（on Bluemix）を使ってデモアプリを動かしてみよう！
お待たせしました！ ここからは実際にデモアプリを動かしてBlockchainを体験してみましょう。
既にこれまでの連載でBluemixのアカウントは取得しているかと思いますが、まだの方はhttps://console.ng.bluemix.net/へアクセスし、無料のアカウントを作成してください。
なお、「ng」の箇所はサーバーの所在地を表しており、以下の地域が存在します。
- ng：米国南部
- eu-gb：英国
- au-syd：豪国
メンテナンスなどにより時々アクセスしにくい場合があるのでご注意ください。
また、ローカル環境でソースコードを編集しBluemixにデプロイするためには、Cloud FoundryのCLIツールをインストールする必要がありますが、今回は簡単デプロイすることにします。
それではまず、GitHubのページに行ってみましょう。
READMEの最初の方に「Deploy to Bluemix」というボタンがあるので、そちらをクリックしてください。
そうすると、以下のようなページに遷移しますので「LOG IN」をクリックします。
次に、デプロイする「地域」「組織」「スペース」を選択し、「DEPLOY」を押下します（※ここでは既にスペースの作成まで完了していることを前提としています）。
しばらく待って、「Success!」と表示されたらDeployは完了です。おめでとうございます！
補足
「Success!」と表示されても、実際にはステージング中という場合があり、遅い時には丸1日掛かることもあるので、もし正常に動作しない場合は気長にお待ちください。翌日にはきっとDevOpsの完了メールが届いているはずです。
それでは早速「VIEW YOUR APP」をクリックし、アプリケーションを表示してみましょう（都合上、私の画面ではau-sydにデプロイしたアプリケーションを使用します）。
アプリのページに移動すると、以下のような画面になるかと思います。
ここで、右上にTIMEが表示されずloading…と表示されている場合はまだ完全にアプリが起動していない可能性があります。その場合はダッシュボードからアプリを再起動し気長に待ちましょう……。
私の場合には、URLは以下のようになっています。
- http://marbles-rascal.au-syd.mybluemix.net/p1/home
実はもう1つのページがあります。そちらは次のようになっています。
- http://marbles-rascal.au-syd.mybluemix.net/p2/home
右上に「HI BOB」と表示されていますね。こちらのプルダウンより、ユーザーを切り替えることができます。ユーザーはBobとLeroyの2人です。権限の違いにも着目してください（BobはLeroyのMarbleを移動できず、逆もまた同様です）。
詳細はREADMEを読んでいただくとよいかと思いますが、まずは画面上部の「CREATE」ボタンでMarbleを早速作ってみましょう。
「CREATE」ボタンをクリックして、Marbleの属性を選択し、「CREATE」ボタンを押下します。するとHOME画面に戻りますので、Marbleが作成されたことを確認してみましょう。
以下のような画面が見られたでしょうか？ 指定した属性のMarbleが作成されましたね！
画面下部の「VIEW TX BLOCKS」を開くと、TransactionのBlockが新しく追加されていることも確認できるかと思います。先ほど開いたp2でも同じくMarbleが作成されていることも確認できるはずです。
ログも見てみましょう。ログはダッシュボードから見ることが可能です。
上の結果を見ると、
received ws msg: {"type":"create","name":"rkjam80","color":"red","size":"16","user":"bob","v":1}
と表示され、createメッセージが渡されたことを表しています。ChaincodeとしてはInvokeが実行されたことを意味しています。
下の結果では、画面の再描画の際にreadメッセージ（Query）が渡されたことを表しています。
VIEW TX BLOCKの最新のものを開いてみると、
作成された時刻、ユニークなID、Type、Chaincode ID、ペイロードなどが表示されます。これ以降、さらにいくつかのMarblesを作成しTrade（交換）することもできますので、色々と遊んでみてください。
また、ソースコードを見ながら操作すると理解が深まるかと思いますので、ぜひ参照してください（以下は抜粋です）。
function show_details(event, id)){ //build the block details html
var left = event.pageX - $('#details').parent().offset().left - 50;
if(left < 0) left = 0;
var ccid = formatCCID(blocks[id].blockstats.transactions[0].type, blocks[id].blockstats.transactions[0].uuid, atob(blocks[id].blockstats.transactions[0].chaincodeID));
var payload = atob(blocks[id].blockstats.transactions[0].payload);
var html = '<p class="blckLegend"> Block Height: ' + blocks[id].id + '</p>';
html += '<hr class="line"/><p>Created: ' + formatDate(blocks[id].blockstats.transactions[0].timestamp.seconds * 1000, '%M-%d-%Y %I:%m%p') + ' UTC</p>';
html += '<p> UUID: ' + formatUUID(blocks[id].blockstats.transactions[0].type, blocks[id].blockstats.transactions[0].uuid) + '</p>';
html += '<p> Type: ' + formatType(blocks[id].blockstats.transactions[0].type) + '</p>';
html += '<p> CC ID: ' + ccid + '</p>';
html += '<p> Payload: ' + formatPayload(payload, ccid) + '</p>';
$('#details').html(html).css('left', left).fadeIn();
}
function new_block(newblck){ //rec a new block
if(!blocks[Number(newblck.id)]){
for(var last in blocks); //find the id of the last known block
if(!last) last = 0;
last++;
//console.log('last', last, Number(newblck.id));
if(block > 0){ //never fake blocks on an initial load
for(var i=last; i < Number(newblck.id); i++){ //build fake blocks for ones we missed out on
console.log('run?');
blocks[Number(i)] = newblck;
build_block(i);
}
}
blocks[Number(newblck.id)] = newblck;
build_block(newblck.id); //build block
}
}
