IIIF動画アノテーションの作り方

Mirador 3改良版におけるIIIF動画アノテーションのために用意するもの

1. MP4フォーマットの動画ファイル

   1. 利用条件をよく確認すること。

   2. https://www.nhk.or.jp/archives/creative/material/ は動画をダウンロードしなくてもリンクのみでこの用途に使用可能。

   3. Internet Archiveでは再利用可能な動画が多数公開されており検索も可能。

2. IIIF Manifestファイル

   1. IIIF Presentation API 3.0 に準拠したファイルを作成する。

   2. 見本はこちら（ネコ動画）とこちら（オープンコースウェア動画）。

   3. 下記「実際の作業」で作り方を詳述します。

3. Mirador 3改良版プログラム

   1. こちらからダウンロード可能。

4. Mirador 3表示用のHTMLファイル

   1. 見本は1.、2. 、3.のソースコードをご覧ください。

   2. 下記「実際の作業」で修正方法を少しだけ説明します。

実際の作業

1. 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を参考にしてください。）

ここで、もう一つ気をつけておいていただきたいのは、「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=

たとえば、以下のような感じです。

例：https://dzkimgs.l.u-tokyo.ac.jp/videos/m3/embed.html?iiif-content=https://dzkimgs.l.u-tokyo.ac.jp/videos/iiif_in_japan_2017/manifest.json

このようにして、自分が表示させたい動画が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からダウンロードしてください。