Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@YutopianF

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

この記事では、ブラウザ環境で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)

 

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?