12
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

nem #2Advent Calendar 2020

Day 3

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

Last updated at Posted at 2020-12-02

この記事では、ブラウザ環境でSymbolの機能を使える方法を紹介します。

また、本編に入る前の前置きでSymbol documentationを読んでいきますので、以下の記事を読んで全体的な概要を知ると頭に入りやすいかと思います。

Symbol Documentationについて

【前置き】Symbol SDKはサーバーで使うもの

Symbolの機能を使うには、Symbol SDKを使えばまとまった開発ができます。
ここで、SDKとは「Software Developper Kit」の略称で、開発に必要なプログラムをひとまとめにしたパッケージです。現在(2020年11月1日現在)はサーバー向けのJavascript、Typescript、JAVAが提供されています。
また、Symbolはオープンソースなので、どんな言語でもSDKに移植することができます。


そのSymbol SDKは、Node.jsの仕組みを使って作動させています。Node.jsはJavascriptをサーバーで動かす仕組みとなるものです。

本来、Javascriptはクライアント側(自分たち側)で動かす言語であり、サーバーで動かす言語ではありませんが、Node.jsを使う事で、Javascriptがサーバーでも使えるようになります。

また、Symbol SDKのJavascript版を利用するには、Node.jsバージョン10以上のインストールが必要のようです。

以上の写真で掲載したページは、以下のURLに記載されています。

https://github.com/nemtech/symbol-sdk-typescript-javascript

なので、Symbol SDKを使う一番最初の手順はサーバー環境を構築してから以下のようにします。

・Node.js公式サイトからNode.jsをインストールする(これは必須)

https://nodejs.org/ja/

プロジェクト用フォルダを作成し、

その中にSymbol SDKとrxjsをインストールします。

npm install symbol-sdk rxjs

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

【本編】ブラウザ環境でSymbolの機能を使えるようにする

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

https://github.com/xembook/nem2-browserify

このページから最新版をダウンロードすることになります。

2020年11月1日現在の最新版は「symbol-sdk-0.21.0.js」なので、それをクリックします。

今後、最新版が出ると思いますので、それをダウンロードしてください。

クリックすると・・・

「Download」をクリックすると、ソースコードが表示されます。

このソースコードをダウンロードしてください。

ここで、右クリックすると、ダウンロードすることができます。

拡張子が.jsでのダウンロードができない場合は、ダウンロード後に.jsに拡張子を変更することも可能です。

ダウンロードしたら、適用したいファイルとSymbol SDKを同じフォルダに入れることで、Symbol SDKを使えるようになります。適用するファイルはHTMLファイルであったりします。

このようにダウンロードしてローカル環境でも使えるSDKを使うのもいいですが、HTMLの中に以下のように記述することでSymbol SDKを使う事もできます。

<script src="https://xembook.github.io/nem2-browserify/symbol-sdk-0.21.0.js"></script>

そうすることで、ネットワーク上からSDKを読み込んで使うことができます。

バンドルファイルは自作可能

Symbol SDKをブラウザ環境で使えるバンドルファイルの作成はtakanobuさんがしてくれていますが、自分で作成することもできます。その方法は、以下の本の86ページと87ページに掲載されているので、そちらで確認をしてください。

次世代NEMではじめるブロックチェーンアプリケーション開発

この本は、BOOTHにて販売中です!!
(https://nizveyl.booth.pm/items/1549217)

 

12
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?