Overview

Referencing the following tweet, I tried adding images and a IIIF manifest to IPFS.

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)

For adding to IPFS, I used Fleek, which is also mentioned in the above tweet.

fleek.co

The following site was helpful for learning how to use 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)が最も有名だ。

i407 - すべての初心者プログラマが覚醒する

Source Code

The source code is below.

github.com

Steps

Uploading Images

First, I uploaded the following image to the above repository.

github.com

Following the reference site, I connected this repository to Fleek. As a result, it became accessible at the following URL.

ipfs.io

Reference

I also downloaded the IPFS desktop app and entered "QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo", which displayed the following.

Furthermore, I installed the following Google Chrome extension.

chrome.google.com

With the desktop app running, entering the earlier URL (https://ipfs.io/ipfs/...) resulted in it being converted to the following URL.

http://bafybeigepsc4mwgbur7y7tao5v26oeqgi3bkial2rrbuudlaf3z43iyquq.ipfs.localhost:8080/kunshujo_400.jpg

Uploading the Manifest File

Next, I created a manifest file. I created the following manifest file.

{
    "@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
                }
            ]
        }
    ]
}