swarm-jsを利用して分散ストレージSWARMに画像をアップロードする

swarm-jsを利用して分散ストレージSWARMに画像をアップロードする

どうもこじりょー(@kojiryoinvestor)です。

前回の記事では分散ストレージ「Swarm」の概要と、クライアントをインストールしてHTMLをアップロードする方法を解説しました。

今回の記事では、「swarm-js」というライブラリを利用して、WEBからSwarmにアップロードする方法を解説します。

以下のツイート内の動画は「swarm-js」を利用したサンプルです。

スポンサーリンク


「swarm-js」の使い方

インストール方法

「swarm-js」はnpmを利用してインストールすることができます。

npm isntall swarm-js

記事執筆時点 (2018年9月22日時点)でnpmからイントールできる「swarm-js」は、アップロード先に「bzzr:」という廃止されたスキームを指定していてエラー(405)になります。

すでにこのバグは修正されていますが、npmの方では古いままになっています。

そこで「npm」で「swarm-js」をインストールした後に、githubページから直接ダウンロードしたもので上書きします。

「swarm-js」のGitHubページに行き、「Clone or download」をクリックして、次に「Download ZIP」をクリックしてダウンロードします。

ダウンロードしたらファイルを解凍して、ディレクトリ名を「swarm-js」に変更します。

あとは「node_modules」配下にコピーして上書きをすればインストール完了です。

アップロードのロジック

「swarm-js」を利用して、Swarmにアップロードするコードはシンプルです。

swarm-img-uploader/App.js Line:43~50

上記は今回作成したサンプルで利用しているコードです。

この関数(uploadToSwarm)が実行される前には、画像のバイナリデータを取り出すなどの処理がありますが、Swarmへアップロードするコード自体はいたってシンプルです。

まず「swarm-js」を利用する際には、アップロード先のノードを指定します。

at("https://swarm-gateways.net")

ここではEthereum財団が運用するパブリックゲートウェイを指定しています。

upload(buffer)

アップロードしたいファイルのデータなどは「upload()」に引数として渡します。

文字列や画像のバイナリデータ(Uint8Array)、複数ファイルの場合はオブジェクト形式にすることでアップロードすることができます。

今回のサンプルでは画像1枚のバイナリデータ(Uint8Array)を「buffer引数」で受け取って、「upload()」で渡しています。

「upload()」が実行されると「then()」の処理が実行されます。

アップロードに成功すれば「hash変数」内にコンテンツのハッシュデータが格納されます。

アップロードに失敗した場合はエラーメッセージが「reason変数」に格納されます。

ちなみに4MB以上のファイルのアップロードはエラーになるのでご注意ください。

おわりに

以上が「swarm-js」を利用して画像をアップロードする方法でした。

「swarm-js」を利用すればWebから簡単にデータをアップロードすることができます。

興味のある方はぜひ試してみてはいかがでしょうか。

また、「swarm-js」を利用したサンプルはGitHubで公開しています。

サンプルの起動方法等はGitHubに記載していますので、「swarm-js」を触ってみたい方はぜひ参考にしていただければと思います。

Dapps開発のチュートリアル動画

Dapps開発のチュートリアル動画をYoutubeで公開しています!

よろしかったらチャンネル登録をよろしくお願いします!

Dapps開発カテゴリの最新記事