IIIF動画アノテーションの作り方
Mirador 3改良版におけるIIIF動画アノテーションのために用意するもの
MP4フォーマットの動画ファイル
利用条件をよく確認すること。
https://www.nhk.or.jp/archives/creative/material/ は動画をダウンロードしなくてもリンクのみでこの用途に使用可能。
Internet Archiveでは再利用可能な動画が多数公開されており検索も可能。
IIIF Manifestファイル
IIIF Presentation API 3.0 に準拠したファイルを作成する。
下記「実際の作業」で作り方を詳述します。
Mirador 3改良版プログラム
こちらからダウンロード可能。
実際の作業
IIIF Manifestの作成
IIIF Manifestは、IIIF Presentation APIに基づいて記述することになっています。今回は、APIバージョン3に基づく記述を試してみます。
1-1. 設置場所とそれに基づくURIの決定
IIIF ManifestファイルにはURIを持たせる必要があります。したがいまして、IIIF Manifestファイルを設置できる場所を用意する必要があります。IIIF Manifestファイルには動画ファイルは入っておらず、外部の動画ファイルを参照するという形になります。これはそれほど大きなファイルではなく、単なるJSON形式のテキストファイルなのでサーバの負荷を考慮する必要はあまりありません。
設置場所は、どこかのサーバで、このIIIF Manifestファイル用に一つのフォルダ（ディレクトリ）を作ることをおすすめします。そうすると、たとえば、ネコの動画を扱うIIIF Manifestファイルを作ることにしたら、たとえば、まずはcat2020というフォルダ（ディレクトリ）を作って、マニフェストのファイル名をmanifest.jsonとしたなら、cat2020/manifest.json というファイルパスができることになります。これに、現在使えるサーバのURLを足すことになります。そうすると、ファイルを置いておくサーバ側のURIがhttps://dzkimgs.l.u-tokyo.ac.jp/videos/ だとすると、全体として、このIIIF ManifestファイルのURIは
https://dzkimgs.l.u-tokyo.ac.jp/videos/cat2020/manifest.json
ということになります。これが同時に、このManifestのid、ということになります。これはIIIF Manifestにidの値として記述することになります。
1-2. IIIF Manifestファイルの大枠を記述
Manifest のidが決まったら、それを元にIIIF Manifestファイルの大枠を記述します。これは、JSONという形式で書いていくことになりますので、普通のテキストエディタでも書けますが、Visual Studio Code (VSCode)というフリーのテキストエディタにZainChen氏作成のJSONというプラグインをインストールして書くと非常に効率よくかけるようになります。（書いてる最中、常に形式のエラーチェックをしてくれたり、必要な括弧の自動補完をしてくれたりします）。VSCodeは非常に広く使われているもので、使い方やプラグインのインストールの仕方は、ググっていただけばたくさんみつかりますので、適宜検索しながら設定してください。もちろん、設定も簡単です。
最初は、Manifestのidと、今回作成しているアノテーションも含むコンテンツのタイトルと、利用条件を書いてみましょう。まず、manifest.jsonという名前のファイルを新規作成してから、以下のようなものを書いてみてください。（https://dzkimgs.l.u-tokyo.ac.jp/videos/cat2020/manifest.jsonから適当にコピペしていただいても大丈夫です。なお、NHKクリエイティブ・ライブラリーのものを使用する場合も、このmanifest.jsonを参考にしてください。）
1-3. IIIF Manifest ファイルに表示する動画とそのメタデータを記述
次に、動画とそのメタデータを記述します。が、その前に、いくつかの要素のURIを決めておく必要があります。というのは、IIIF Presentation APIでは、「Canvas」の上に、「AnnotationPage」でまとめた「Annotation」が指し示す「Content」を載せる、という考え方をとっています。こちらの図の、特に右に提示した図の部分がそれにあたります。
そこで、Canvas, AnnotationPage, Annotation, ContentのそれぞれがURIを持っていなければなりません。ただし、Contentは、今回の場合は動画のURIそのものになりますので、動画のURIが決まっていれば大丈夫です。あとは、残りの3つです。それぞれ、以下のようにしてみましょう。
Canvas: [サーバ側のURI] [動画のフォルダ] /canvas/1
AnnotationPage: [サーバ側のURI] [動画のフォルダ] /canvas/1/page/1
Annotation: [サーバ側のURI] [動画のフォルダ] /canvas/1/page/1/1
それぞれ「/1」が末尾についていますが、これは、複数になる可能性を想定しています。（このURIは、単に他と重ならなければよいというだけのことですので、文字列はどのようにしても（完全なランダム文字列でも）大丈夫です）
なお、これは、URIに対応するデータ（対応するJSONフラグメント）をそのURIでアクセスできるように用意するのが理想的ですが、用意しなくても一応稼働はします。
各要素のURIを決めたら、それを元にして、各要素を入れ子構造でJSONで書いていって、一つの「Canvas」を作成します。
先ほど書いたものの最後の波括弧 } の内側に書く必要がありますので、上記の例だと24行目の } の前に行を足して書いていくことになります。なお、この「Canvas」は、「items」として上位に含まれる複数の要素という扱いになりますので、まずはitems: を書いた上で、その複数要素として [ ] で囲み、その中に個々の Canvasを { }で書いていく、ということになります。「AnnotationPage」や「Annotation」も、同様に「items」に含まれるものとして記述していきます。
たとえば以下のようになります。個別の記載内容については以下のものを参考にしてください。
ここで、もう一つ気をつけておいていただきたいのは、「Canvas」と「Annotation」における、高さ・幅・時間（height, witdh, duration）の記述です。「Annotation」はビデオそのものですから、それを書いておくということは理解しやすいですが、「Canvas」にも記載する必要があるというのは、ちょっと見落としやすいかもしれないので気をつけてください。また、これが、IIIF の特徴でもあります。つまり、Canvasとは、ここでは、高さ・幅・時間を持った仮想空間、ということなのです。APIバージョン2までは時間を持っていませんでしたが、APIバージョン3からは時間も持つことになりました。これにより、Canvasが提示する仮想的な時空間に対してAnnotationとして各種コンテンツを載せていく、ということが原理的には可能になったのです。
ここまでできたら、表示できるかを試してみてもよいと思います。作成してサーバの適切な場所に設置したら（つまり、Manifestのidで指し示すURLで自分のmaniest.jsonにアクセスできるようになったら）、以下のURLに続けて、自分のIIIF ManifestファイルのURLを書いてアクセスしてみてください。
https://dzkimgs.l.u-tokyo.ac.jp/videos/m3/embed.html?iiif-content=
たとえば、以下のような感じです。
このようにして、自分が表示させたい動画がMirador上に表示できたら、まず第一歩はOKです。
1-4. 動画へのアノテーションの記述
さて、いよいよ動画へのアノテーションの記述です。ここまで来れば、あとは用例を見ていただくだけでできると思いますが、念のため少しだけご説明しておきますと、今度は、トップレベルのitems:に並列する形で"annotations"という複数の値をとるキーを作り、そこにAnnotationPageを入れて、さらにその中に（下位に）個々のAnnotationを記述していきます。以下の例は、テキストのアノテーション（Annotationsリスト上にテキストが表示され動画上には枠が表示される）と、画像のアノテーション（Annotationsリスト上にテキストが表示され動画上には画像が表示される）を示しています。
ここで注目していただきたいのは、"target":というキーの「#xywh=」以下です。ここで、動画上の座標を指定していて、さらにその次の「t=」というところで、時間を秒単位で指定しています。たとえば、
#xywh=50,90,750,550&t=100,145
となっていれば、"target"で指定したCanvas（これも幅・高さ・時間が指定されている）において、幅750、高さ550の画像の左上位置が上から90、左から50の位置に、100秒目から145秒目まで、この画像を表示するか、もしくはそのサイズの枠を表示してAnnotationのテキストと紐付ける、ということになります。
アノテーションのコンテンツが文字であるか画像であるかによって、"body":の中身が変わってきます。
書いてみて、試しに表示してみたいときには上記のURLを試してみてください。
ということで、簡単になってしまいましたが、とりあえずはこのような感じで、色々お試しいただければと思います。
このMiradorを自分のサイトに設置したいという場合には、このページの冒頭で紹介したURLからダウンロードしてください。