概要
以下のツイートを参考に、画像とIIIFマニフェストをipfsに追加してみました。
Ed Silverton (@edsilv) on X
I've just minted (what I believe to be) the first ever @iiif_io manifest NFT using @FleekHQ, @IPFS and @opensea : https://t.co/YcwZD9B5Mz
View it in the @universalviewer here: https://t.co/W4Vi7geayk
#IIIF #NFT #IPFS
X (formerly Twitter)ipfsへの追加については、上記のツイートでも言及されているFleekを使用しました。
fleek.co
Fleekの使い方は以下のサイトが参考になりました。
ENSとfleek(IPFS)でWeb3.0なWebサイトを作成してみた
2020年ごろから巷で「web3.0」みたいな言葉が流行っている。また、もっと前から仮想通貨のブームもあり、システム業界ももしかしたらどんどんと「分散型」のweb3の時代に突入していくのかもしれない。
私は仮想通貨なんかを少し嗜む程度でweb3の世界のDAOなどのシステムを構築した経験はない。なので完全な素人なのだが、今回簡単にweb3を体験してみたのでこの情報をシェアする。もしかすると5年後くらいにはweb3の掲げるDAO(Decentralized Autonomous Organization)が一般化しているのかもしれないし、今のうちにちょっとかじっておこうと思う。
完全分散型なWebサイト構成 今回の構成は以下で行う。
ENS(Ethereum Name Service) Fleek(IPFS) ENSの購入や設定にETH(イーサリアム)が必要なので、完全に無料ではできない。また、以下はすべてイーサが入ったウォレットと接続している前提だ。
DNSではなくENS 従来のシステム業界ではDNSという言葉が存在するが、このWeb3の世界ではENS(Ethereum Name Service)が最も有名だ。
ソースコード
ソースコードは以下です。
github.com
手順
画像のアップロード
まず、上記のリポジトリに以下の画像をアップロードしました。
github.com
github.com先のサイトを参考に、本リポジトリをfleekに接続しました。その結果、以下のURLでアクセスできました。
ipfs.io
ipfs.io参考
またIPFSのデスクトップアプリをダウンロードして、「QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo」を入力したところ、以下のように表示することができました。
さらに、以下のGoogle Chromeの拡張機能をインストールしました。
chrome.google.com
上記のデスクトップアプリを起動した状態で、先のURL（https://ipfs.io/ipfs/...）を入力すると、以下のURLに変換されました。
マニフェストファイルのアップロード
次にマニフェストファイルを作成します。以下のようなマニフェストファイルを作成しました。
{
"@context": "http://iiif.io/api/presentation/2/context.json",
"@id": "https://ipfs.io/ipfs/QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo/kunshujo_400.jpg",
"@type": "sc:Manifest",
"attribution": "sample",
"description": "Manifest file of My first IIIF and IPFS",
"label": "My first IIIF and IPFS",
"metadata": [
{
"label": "keyword",
"value": "ipfs"
}
],
"sequences": [
{
"@id": "https://ipfs.io/ipfs/QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo/kunshujo_400.jpg/sequence/normal",
"@type": "sc:Sequence",
"canvases": [
{
"@id": "https://ipfs.io/ipfs/QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo/kunshujo_400.jpg/canvas/p1",
"@type": "sc:Canvas",
"height": 289,
"images": [
{
"@id": "https://ipfs.io/ipfs/QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo/kunshujo_400.jpg/annotation/p1-image",
"@type": "oa:Annotation",
"motivation": "sc:painting",
"on": "https://ipfs.io/ipfs/QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo/kunshujo_400.jpg/canvas/p1",
"resource": {
"@id": "https://ipfs.io/ipfs/QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo/kunshujo_400.jpg",
"@type": "dctypes:Image",
"format": "image/jpeg",
"height": 289,
"width": 400
}
}
],
"label": "[1]",
"thumbnail": {
"@id": "https://ipfs.io/ipfs/QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo/kunshujo_400.jpg"
},
"width": 400
}
]
}
]
}
その結果、以下のURLでアクセスできるようになりました。
ipfs.io
本マニフェストファイルをUniversal Viewerで表示したところ、以下のように正しく表示ができました。
Universal Viewer Examples
まとめ
色々とわかっていない点が多いですが、とりあえず画像とIIIFマニフェストファイルをipfsに追加することができました。
コメント
…