Overview

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

https://twitter.com/edsilv/status/1400221815369355267

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

https://fleek.co/

The following site was helpful for learning how to use Fleek.

https://i-407.com/blog/m10/

Source Code

The source code is below.

https://github.com/nakamura196/fleek_test

Steps

Uploading Images

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

https://github.com/nakamura196/fleek_test/blob/main/kunshujo_400.jpg

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

https://ipfs.io/ipfs/QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo/kunshujo_400.jpg

Reference

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

Furthermore, I installed the following Google Chrome extension.

https://chrome.google.com/webstore/detail/ipfs-companion/nibjojkomfdiaoajekhjakgkdhaomnch

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
                }
            ]
        }
    ]
}

As a result, it became accessible at the following URL.

https://ipfs.io/ipfs/QmdS7UP4oSHw5wgG4T46NXvLrN17hCoWrSRgBQUtjCVpmM/manifest.json

When I displayed this manifest file in Universal Viewer, it was displayed correctly as shown below.

https://uv-v4.netlify.app/#?manifest=https://ipfs.io/ipfs/QmdS7UP4oSHw5wgG4T46NXvLrN17hCoWrSRgBQUtjCVpmM/manifest.json

Summary

While there are still many things I don’t fully understand, I was able to add images and a IIIF manifest file to IPFS for now.