Web Annotation と Mirador ― 画像に「注釈」をつける

別バージョン

ナレーション解説

章立て

1. 1

   本編

   なぜ注釈の標準か・Web Annotation(W3C)・body+target・セレクタで部分指定・JSON-LDとIRI・motivation・Miradorで領域に注釈・IIIFと地続き・解釈・始め方

   読み上げ原稿

   • 0:00画像に「注釈」をつける

     皆さん、こんにちは。デジタル・ヒューマニティーズ入門、技術要素シリーズ、なかむらさとるの、解説回です。この回の、ナレーションは、合成音声で、お届けします。テーマは、Web Annotationと、Mirador。資料に、注釈を、つける、お話です。画像の、どこに、どんなコメントを、という、ふだんの行為を、共有できる、データにする。その考え方を、図を交えながら、ゆっくり、見ていきます。どうぞ、気楽について来てください。

     
   • 0:40この動画について

     はじめに、この動画について、簡単に、ご案内します。この動画は、クリエイティブ・コモンズ(CC)で、公開されている、オープンな教材、おもに、IIIFの資料を、参照しつつ、独自に、構成した、解説です。スライドと、図は、新規に作成し、ナレーションは、AIの、音声合成です。この回は、本人の、クローン声では、ありません。あくまで、実験的な、取り組みですので、内容は、ご確認・ご注意のうえ、ご利用ください。誤りに、気づかれたら、概要欄から、ご指摘いただけると、たすかります。出典と、ライセンスは、動画の最後と、概要欄に、まとめてあります。それでは、本編に、入りましょう。

     
   • 1:36この回のゴール

     まず、この回のゴールを、確認しておきましょう。目標は、大きく、四つです。一つめは、Web Annotationが、注釈を、共有・再利用できる、データにする、W3Cの標準だと、説明できること。二つめは、注釈が、ボディ、つまり中身と、ターゲット、つまり対象の、組み合わせだ、という基本の形を、説明できること。三つめは、セレクタで、対象の、一部分、たとえば、本文の引用箇所や、画像の領域を、指せる、とイメージできること。そして四つめは、Miradorという、IIIFの、ビューアで、画像の領域に、注釈を、つける、という実践を、イメージできることです。

     
   • 2:29今日の流れ

     今日の流れです。はじめに、なぜ、注釈に、標準が、要るのか。つぎに、Web Annotationの、しくみ。ボディと、ターゲット、そして、セレクタ。それから、注釈じたいが、データになる、という話で、JSON-LDと、目的。そして、Miradorで、実際に、画像の領域に、注釈をつける。最後に、自分で、始めるための、手がかりを、紹介します。

     
   • 3:04なぜ「標準」が要るのか

     それでは、はじめましょう。まずは、なぜ、注釈に、標準が、要るのか。注釈の、困りごとから、見ていきます。

     
   • 3:15注釈は、ツールに閉じこもりがち

     図を、見てください。私たちは、いろいろな、ツールで、メモや、コメントを、つけます。けれども、その注釈は、たいてい、つけた、ツールの中に、閉じこもってしまいます。別の場所に、持ち出したり、ほかの人と、共有したり、あとで、再利用したりするのが、難しい。せっかくの、読みや、気づきが、その場かぎりに、なりがちなのです。

     
   • 3:46共通の「標準」があれば

     そこで、もし、図のように、注釈を、同じ、データの形に、そろえる、共通の標準が、あったら、どうでしょう。注釈じたいを、持ち運べる、データに、すれば、道具を、越えて、共有したり、集めたり、再利用したりすることが、できるようになります。注釈を、その場かぎりにせず、みんなの、財産にする、というわけです。

     
   • 4:14Web Annotation ― 注釈の標準

     その、共通の標準が、Web Annotationです。注釈を、共有できる、ウェブの、データにするための、データの形と、作法を、定めています。W3Cが、二千十七年に、勧告として、公開した、れっきとした、標準で、中身は、リンクトデータの、書き方、JSON-LD、です。

     
   • 4:40ここまでのポイント

     ここで、いったん、整理します。注釈は、つけた、ツールに、閉じこもり、共有や、再利用が、しにくく、なりがちでした。けれど、同じ、データの形に、そろえれば、道具を、越えて、持ち運べる。それを、定めたのが、Web Annotationで、W3Cの勧告、中身は、JSON-LD、でした。では、その、データの形とは、どんな形なのでしょう。つぎは、ボディと、ターゲットの、話です。

     
   • 5:18Web Annotation のしくみ

     ここからは、Web Annotationの、しくみです。注釈の、形を、見ていきます。

     
   • 5:26注釈＝ body（中身）＋ target（対象）

     図を、見てください。注釈の、いちばんの基本は、ボディ、つまり、中身と、ターゲット、つまり、対象の、二点セットです。たとえば、いい筆致だ、という、コメントが、ボディ。その、コメントが、どの絵の、どの部分について、述べているのか、が、ターゲット。この、コメントは、あれについて、という、二点の、組み合わせ。それが、注釈の、正体です。

     
   • 6:00セレクタ ― 対象の「一部分」を指す

     そして、対象は、全体だけでは、ありません。図のように、セレクタ、という、しくみを、使うと、対象の、一部分を、指すことが、できます。たとえば、一枚の、画像の、この、領域。あるいは、本文の、この、引用箇所。ここ、と、指し示せるので、絵の、ある部分にだけ、コメントを、つける、といったことが、できるのです。

     
   • 6:30注釈じたいが、IRIを持つWeb資源

     もう一つ、大事な、特徴が、あります。図のように、注釈は、JSON-LDで、書かれ、注釈じたいが、自分の、アイアールアイ、つまり、URLのような、識別子を、持ちます。これは、注釈が、ひとつの、独立した、ウェブの、資源だ、ということです。だから、注釈だけを、取り出して、共有したり、たくさん、集約したり、ほかから、引用したりすることが、できます。

     
   • 7:04motivation ― 注釈の「目的」

     さらに、注釈には、モチベーション、つまり、目的を、添えることが、できます。図のように、これは、コメントなのか、タグ付けなのか、ハイライトなのか、説明なのか。同じ、ボディと、ターゲットの、組み合わせでも、目的を、添えることで、その注釈が、何のための、ものなのかを、はっきり、意味づけできる、というわけです。

     
   • 7:32ここまでのポイント

     ここまでを、整理します。注釈の、基本は、ボディ、つまり中身と、ターゲット、つまり対象。セレクタで、対象の、一部分も、指せる。注釈は、JSON-LDで、書かれ、自分の、アイアールアイを、持つ、ウェブの資源なので、共有や、集約が、できる。そして、モチベーションで、目的も、添えられる、のでした。では、これを、実際に、画像へ、つけてみましょう。Miradorの、出番です。

     
   • 8:10Mirador で実際に

     ここからは、Miradorで、実際に。画像の、領域に、注釈を、つける、ところを、見ていきます。

     
   • 8:19Mirador ― IIIFの画像ビューア

     Miradorは、図のように、IIIFの、画像を、見るための、ビューアです。複数の、画像を、並べて、比べたり、自由に、ズームや、移動を、したり、できます。そして、大切なのが、注釈の、作成と、表示が、できること。世界中の、図書館や、美術館で、広く、使われている、オープンソースの、ソフトウェアです。

     
   • 8:49画像の領域を囲んで、コメント

     では、どうやって、注釈を、つけるのでしょう。図のように、Miradorの、画面で、画像の、注目したい、領域を、四角く、囲み、そこに、コメントを、書き込みます。たとえば、ここは、後筆か、といった、メモです。すると、その、中身は、まさに、Web Annotation、ボディと、ターゲットと、セレクタの、形で、生成されるのです。特別な、知識が、なくても、囲んで、書くだけで、標準に沿った、注釈が、できあがります。

     
   • 9:28IIIFの画像に、注釈を重ねる

     全体の、つながりを、見ておきましょう。図のように、IIIFの、画像、いわば、キャンバスの上に、Web Annotationの、注釈を、レイヤーのように、重ねます。そして、それを、Miradorで、表示する。IIIFが、画像を、配るしくみ。その上に、注釈が、乗るわけです。まさに、地続きで、つながっています。

     
   • 9:58ここまでのポイント

     ここまでを、整理します。Miradorは、IIIFの、画像を、見て、比べて、注釈する、オープンソースの、ビューアでした。画像の、領域を、囲んで、コメントすると、その中身は、Web Annotationに、なる。そして、IIIFの、画像に、注釈を、重ねて、Miradorで、表示できる。IIIFと、地続き、でした。仕組みが、見えてきたところで、少し、立ち止まって、考えてみましょう。

     
   • 10:36考えてみよう

     ここで、少し、考えてみましょう。あなたなら、何に、どこに、注釈を、つけるでしょうか。手元の、資料の、どの部分に、どんな、コメントを、添えたいか。よろしければ、ここで一度、動画を止めて、思い浮かべてみてください。

     
   • 10:57注釈は、解釈そのもの

     いまの、問いには、大事な点が、ひそんでいます。何を、対象に、選び、どこを、どう、切り取るかは、機械的に、決まるものでは、ありません。ここに、注目せよ、という、選び方、そのものに、あなたの、読みと、判断が、表れます。そして、標準化された、注釈は、その、判断を、ほかの人と、共有し、積み重ねていくことを、可能にします。注釈を、つけることは、資料を、どう、読むかを、示す、すぐれて、人文学的な、営みなのです。

     
   • 11:39始め方・学ぶには

     では、自分でも、始めてみたい、と思ったら、どうすれば、よいでしょう。まず、触れてみるなら、Miradorで、公開されている、IIIFの画像を、開いて、領域に、注釈を、つけてみるのが、よい、入り口です。ウェブページに、注釈を、つけたいなら、ハイポセシス、という、道具も、あります。体系的に、学ぶなら、IIIFの、クックブックにある、注釈の、作例や、W3Cの、Web Annotation・データモデルを。そして、つけた注釈の、JSON-LD、ボディや、ターゲット、セレクタを、実際に、眺めてみると、理解が、深まります。

     
   • 12:28まとめ

     今日の、まとめです。Web Annotationは、注釈を、共有できる、ウェブの、データにする、W3Cの標準でした。基本は、ボディ、つまり中身と、ターゲット、つまり対象。セレクタで、一部分も、指せる。注釈は、JSON-LDで、書かれ、自分の、アイアールアイを、持つので、共有・集約・引用できる。そして、Miradorという、IIIFの、ビューアで、画像の、領域に、注釈を、つけて、見られる。画像を、配る、IIIFに、ここに、こう読む、を、重ねる。それが、Web Annotationです。

     
   • 13:17出典・ライセンス

     この動画は、海外で、オープンライセンスのもとに、公開されている、教材を、参照して、作成しました。主なものは、IIIFの、公式ドキュメントで、その、Presentation APIは、Web Annotationを、採用しています。クリエイティブ・コモンズ(CC)の、表示ライセンスで、公開されています。あわせて、事実確認には、W3Cの、Web Annotation・データモデルや、Miradorの、プロジェクトも、参照しました。スライドと、図は、これらを、参考にしたうえで、あらためて、新規に、作成したものです。

     
   • 14:02ご清聴ありがとうございました

     以上で、Web Annotationと、Miradorの、入門を、終わります。資料の、ここに、こう読む、という、注釈を、共有できる、データにして、画像の上に、重ねていく。その、考え方の、第一歩を、つかんでいただけたなら、と思います。ご清聴、ありがとうございました。