Zenn
🎉

@iiif/parserを試す

2024/06/05に公開
iiif
tech

概要

@iiif/parserというnpmモジュールを知ったので、一部の機能を試してみました。

https://github.com/IIIF-Commons/parser

使い方

以下は一例です。v2のIIIFマニフェストを、v3に変換します。

"use client";

import { useState } from "react";
import { convertPresentation2 } from "@iiif/parser/presentation-2";

import { Button, Label, TextInput } from "flowbite-react";
import ComponentsPagesParserPre from "./pages/parser/pre";

type ManifestData = any;

export default function ComponentsParser() {
  const [url, setUrl] = useState<string>(
    "https://iiif.dl.itc.u-tokyo.ac.jp/repo/iiif/fbd0479b-dbb4-4eaa-95b8-f27e1c423e4b/manifest"
  );
  const [data, setData] = useState<ManifestData>(null);

  const fetchAndConvertManifest = async (
    manifestUrl: string
  ): Promise<void> => {
    try {
      const response = await fetch(manifestUrl);
      const manifestJson = await response.json();
      const convertedManifest = convertPresentation2(manifestJson);

      setData(convertedManifest);
    } catch (error) {
      console.error("Failed to fetch or convert manifest", error);
      setData("Error fetching or converting manifest.");
    }
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault();
    fetchAndConvertManifest(url);
  };

  return (
    <>
      <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
        <div>
          <Label htmlFor="url" value="IIIF Manifest URL (v2)" />
          <TextInput
            id="url"
            type="text"
            value={url}
            placeholder="https://example.com/iiif/manifest.json"
            required
            onChange={(e) => setUrl(e.target.value)}
          />
        </div>
        <Button type="submit">Submit</Button>
      </form>

      <div className="mt-8">
        <ComponentsPagesParserPre data={data} />
      </div>
    </>
  );
}

まず、以下でインポートします。

import { convertPresentation2 } from "@iiif/parser/presentation-2";

以下で、変換を行っています。

const response = await fetch(manifestUrl);
const manifestJson = await response.json();
const convertedManifest = convertPresentation2(manifestJson);

デモ

不完全なサイトですが、以下のページで、v2のIIIFマニフェストをv3に変換できます。

https://iiif-demo-next.vercel.app/parser

まとめ

挙動の確認などの参考になりましたら幸いです。

Discussion