分散型ストレージサービスのWeb3.Storageにプログラムからアップロードを行なってみる

森 亮介

2022.07.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

この前の記事で分散型ストレージサービスのWeb3.Storageの概要と、Webサービスを使ってファイルのアップロードを試しました。

今回はWebサービスではなく、前回取得して使用しなかったAPIトークンを使ってWeb3.Storageにファイルをアップロードしたりしてみます。

今回使用するのはこちら、

Javascriptのクライアントライブラリ

です。

クライアントライブラリは、アップロードをコンテンツアドレス可能アーカイブ（CAR）に自動的にパックして、Web3.Storageサービスにアップロードします。 このアーカイブは、データの暗号化ハッシュから派生したコンテンツ識別子（CID）のプレフィックスが付いたブロックとしてデータを保存します。

そして、ファイルのCIDを使用してファイルを取得できます。

使ってみる

次のソフトウェアの最新の安定バージョンをインストールすることをお勧めしますが、少なくとも次のものが必要です。

  • NPM 7.0.0
  • Node.js 14.0.0
  • Webpack 5.0.0

インストール

mkdir web3-storage-quickstart
cd web3-storage-quickstart

ディレクトリを作成し、そこへ移動します。

npm install web3.storage

その後、上記コマンドを使ってインストールします。

コンストラクタ

APIトークンを使ってコンストラクタを作成します。

import { Web3Storage } from 'web3.storage';

const client = new Web3Storage({ token: <<apiToken>> });

※ apiTokenの箇所を自身のものに変更

ファイルをアップロード

ファイルをアップロードして保存するには、putメソッドを使用します

<clientObject>.put(file[], { options })

パラメーター

  • file[]
    • アップロードされるファイルのコレクション
  • {options}
    • Web3.Storageのオプションとアップロードされるファイルのメタデータを定義するプロパティがあるオブジェクト
      • name
        • アップロードされたコンテンツアーカイブに任意の名前を付ける
      • maxRetries
        • 失敗した場合に再試行する回数を指定
      • wrapWithDirectory
        • Web3.Storageに追加されたときにファイルをIPFSディレクトリーにラップするかどうかを制御。
        • デフォルトはtrue
      • onRootCidReady
        • データのルートCIDはデータがWeb3.Storageにアップロードされる前に生成されます。アップロードが完了する前にユーザーにCIDを表示したい場合は、CID文字列を受け取るonRootCidReady関数に渡します
      • onStoredChunk
        • onStoredChunkコールバックを渡すことで、進捗状況の更新を表示することができます

実際に動かしてみる

パラメータの動作確認も含めて実践してみます。

file[]のみ使用

ファイルが格納されているディレクトリを指定してputを行います。

import { getFilesFromPath } from 'web3.storage';

const files = await getFilesFromPath('./files');
const rootCid = await client.put(files);
console.log(rootCid)

このようにcidが出力されました。

Webサイトの方を確認してみると、きちんとアップロードされていました。

nameオプション

※ filesオブジェクトは先ほどと同じ

const rootCid = await client.put(files, { name: 'sample files' });

指定した名前で保存されますね。

wrapWithDirectory
$ tree files
files
├── sub
│   └── EuVimtuUYAEL_3l.jpeg
├── web3_storage-logo.png
└── フォース.png

1 directory, 3 files
const rootCid = await client.put(files, { name: 'wrap files' });
console.log(rootCid)

このような構成のディレクトリで、filesをwrapWithDirectory=trueで全てアップロードすると、

CIDはfilesサブディレクトリを含むディレクトリのCIDを返します。

ではfalseにした場合はどういう挙動になるかというと、

const rootCid = await client.put(files, { name: 'no wrap files', wrapWithDirectory:false });
console.log(rootCid)

CIDはfilesサブディレクトリを含まず、filesに入っているコンテンツを直接示すCIDを返します。

onRootCidReady

onRootCidReadyは関数で、putのオプションに渡すとアップロード完了前にcidがわかります。

const onRootCidReady = rootCid => console.log('root cid:', rootCid);
const cid = await client.put(files, { onRootCidReady });
console.log('upload後動くroot cid:', cid)

onStoredChunk

onStoredChunkは関数で、進行状況の更新を表示することもできます。 データの各チャンクがアップロードされた後に呼び出され、チャンクのサイズ（バイト単位）がパラメーターとして渡されます。

const onStoredChunk = chunkSize => console.log(`stored chunk of ${chunkSize} bytes`);
const cid = await client.put(files, { onStoredChunk });

上記のように分割されたチャンクのサイズが表示されました。

次回以降はアップロードしたファイルを取得するなどを行いたいと思います

関連

AWS