🦁

画像とIIIFマニフェストをipfsに追加してみる

2023/01/16に公開

IPFS

fleek

iiif

tech

概要

以下のツイートを参考に、画像とIIIFマニフェストをipfsに追加してみました。

ipfsへの追加については、上記のツイートでも言及されているFleekを使用しました。

https://fleek.co/

Fleekの使い方は以下のサイトが参考になりました。

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

ソースコード

ソースコードは以下です。

手順

画像のアップロード

まず、上記のリポジトリに以下の画像をアップロードしました。

先のサイトを参考に、本リポジトリをfleekに接続しました。その結果、以下のURLでアクセスできました。

参考

またIPFSのデスクトップアプリをダウンロードして、「QmbZekG5x834rwGKVZntBefkbNfL5auH171m4c26TZmCAo」を入力したところ、以下のように表示することができました。

さらに、以下のGoogle Chromeの拡張機能をインストールしました。

上記のデスクトップアプリを起動した状態で、先のURL（https://ipfs.io/ipfs/...）を入力すると、以下のURLに変換されました。

マニフェストファイルのアップロード

次にマニフェストファイルを作成します。以下のようなマニフェストファイルを作成しました。

manifest.json

{
    "@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でアクセスできるようになりました。

本マニフェストファイルをUniversal Viewerで表示したところ、以下のように正しく表示ができました。

まとめ

色々とわかっていない点が多いですが、とりあえず画像とIIIFマニフェストファイルをipfsに追加することができました。

概要

ソースコード

手順

画像のアップロード

参考

マニフェストファイルのアップロード

まとめ

Discussion