ブラウザ環境でのSymbolの実行環境の構築について

<p>この記事では、ブラウザ環境でSymbolの機能を使える方法を紹介します。</p>
<p>また、本編に入る前の前置きでSymbol documentationを読んでいきますので、以下の記事を読んで全体的な概要を知ると頭に入りやすいかと思います。</p>
<p><strong><a href="https://qiita.com/YutopianF/items/28b120993fb928fed5a8">Symbol Documentationについて</a></strong></p>
<h2 style="background-color: #ff9600; padding: 8px;"><strong><span style="font-size: 16pt; color: #ffffff;">【前置き】Symbol SDKはサーバーで使うもの</span></strong></h2>
<p>Symbolの機能を使うには、Symbol SDKを使えばまとまった開発ができます。<br />ここで、SDKとは「Software Developper Kit」の略称で、開発に必要なプログラムをひとまとめにしたパッケージです。現在(2020年11月1日現在)はサーバー向けのJavascript、Typescript、JAVAが提供されています。<br />また、Symbolはオープンソースなので、どんな言語でもSDKに移植することができます。</p>
<p><br />そのSymbol SDKは、Node.jsの仕組みを使って作動させています。Node.jsはJavascriptをサーバーで動かす仕組みとなるものです。</p>
<p>本来、Javascriptはクライアント側(自分たち側)で動かす言語であり、サーバーで動かす言語ではありませんが、Node.jsを使う事で、Javascriptがサーバーでも使えるようになります。</p>
<p>また、Symbol SDKのJavascript版を利用するには、Node.jsバージョン10以上のインストールが必要のようです。</p>

<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51357/1604659406スクリーンショット 2020-11-06 19.37.47.png" alt="" width="1206" height="425" /></p>

<p>以上の写真で掲載したページは、以下のURLに記載されています。</p>
<p><a href="https://github.com/nemtech/symbol-sdk-typescript-javascript">https://github.com/nemtech/symbol-sdk-typescript-javascript</a></p>

<p>なので、Symbol SDKを使う一番最初の手順はサーバー環境を構築してから以下のようにします。</p>
<p>・Node.js公式サイトからNode.jsをインストールする(これは必須)</p>
<p><a href="https://nodejs.org/ja/">https://nodejs.org/ja/</a></p>

<p>プロジェクト用フォルダを作成し、</p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51357/1604296117スクリーンショット 2020-11-02 14.47.56.png" alt="" width="647" height="153" /></p>
<p>その中にSymbol SDKとrxjsをインストールします。</p>
<pre class="language-css"><code>npm install symbol-sdk rxjs</code></pre>

<p>このようにサーバー環境で構築となると、それなりの専門知識が必要になりますし、Symbolの機能を使う事が難しくなります。<br />ではどうすればいいのかをここで紹介します。</p>

<h2 style="background-color: #ff9600; padding: 8px;"><strong><span style="font-size: 16pt; color: #ffffff;">【本編】ブラウザ環境でSymbolの機能を使えるようにする</span></strong></h2>

<p>　ブラウザ環境でSymbolの機能を使えるようにするには、browserifyを用いてまとめたファイルをダウンロードすることで、ブラウザ環境でもSymbol SDKを使えるようになります。このまとめたファイルを<strong>バンドルファイル</strong>といいます。<br />　これは、takanobuさん(<a href="https://twitter.com/xembook">https://twitter.com/xembook</a>)がGitHUBにて以下のページにてまとめてくれています。</p>
<p><strong><a href="https://github.com/xembook/nem2-browserify">https://github.com/xembook/nem2-browserify</a></strong></p>

<p>このページから最新版をダウンロードすることになります。</p>
<p>2020年11月1日現在の最新版は「symbol-sdk-0.21.0.js」なので、それをクリックします。</p>
<p>今後、最新版が出ると思いますので、それをダウンロードしてください。</p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51357/1604472142スクリーンショット 2020-11-04 15.38.35.png" alt="" width="1217" height="459" /></p>

<p>クリックすると・・・</p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51357/1604472271スクリーンショット 2020-11-04 15.38.46.png" alt="" /></p>
<p>「Download」をクリックすると、ソースコードが表示されます。</p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51357/1604472381スクリーンショット 2020-11-04 15.45.52.png" alt="" width="1217" height="340" /></p>
<p>このソースコードをダウンロードしてください。</p>
<p>ここで、右クリックすると、ダウンロードすることができます。</p>
<p>拡張子が.jsでのダウンロードができない場合は、ダウンロード後に.jsに拡張子を変更することも可能です。</p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51357/1604472604スクリーンショット 2020-11-04 15.47.17.png" alt="" width="320" height="316" /></p>

<p>ダウンロードしたら、適用したいファイルとSymbol SDKを同じフォルダに入れることで、Symbol SDKを使えるようになります。適用するファイルはHTMLファイルであったりします。</p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51357/1604578202スクリーンショット 2020-11-05 21.09.46.png" alt="" width="1206" height="263" /></p>
<p>このようにダウンロードしてローカル環境でも使えるSDKを使うのもいいですが、HTMLの中に以下のように記述することでSymbol SDKを使う事もできます。</p>
<pre class="language-markup"><code>&lt;script src="https://xembook.github.io/nem2-browserify/symbol-sdk-0.21.0.js"&gt;&lt;/script&gt;</code></pre>
<p>そうすることで、ネットワーク上からSDKを読み込んで使うことができます。</p>
<h2 style="background-color: #ff9600; padding: 8px;"><strong><span style="font-size: 16pt; color: #ffffff;">バンドルファイルは自作可能</span></strong></h2>
<p>Symbol SDKをブラウザ環境で使えるバンドルファイルの作成はtakanobuさんがしてくれていますが、自分で作成することもできます。その方法は、以下の本の86ページと87ページに掲載されているので、そちらで確認をしてください。</p>

<p><strong>次世代NEMではじめるブロックチェーンアプリケーション開発</strong></p>
<p><img src="https://s3-ap-northeast-1.amazonaws.com/nem-social/blog/50000/51000/51300/51357/1604577735c0b4883e-98ff-4bd7-ae8c-fe8b9704579c_base_resized.jpg" alt="" width="376" height="537" /></p>
<p>この本は、BOOTHにて販売中です!!<br />(<a href="https://nizveyl.booth.pm/items/1549217" target="_blank" rel="noopener">https://nizveyl.booth.pm/items/1549217</a>)</p>
<p>&nbsp;</p>