国文研館蔵和古書画像400万コマ近くがオープンデータに！

　先日、国文学研究資料館（以下、国文研）の館蔵和古書画像がCC BY-SAへとライセンス変更されたことは記憶に新しいところです。筆者としては早速ダウンロードして色々活用できるように…と思って少し試してみたらなかなか大変でした。結果として、19451書誌分の古典籍画像をダウンロードすることができたのですが、書誌情報はオープンデータになっていないので、内容がわかる人でないとなかなか活用は難しいのではないかと思います。この点、昨年「国文研データセット」として公開されたものは書誌情報やタグ、一部の全文テクストなど色々おまけがついていたので楽しみやすいものでした。筆者としても、色々な工夫をさせていただきました。

　しかし、やはり、せっかくオープンデータとして公開されたのですから、これはなるべくみんなで活用できるようにした方がよいと思いました。このところ「デジタルアーカイブ」についての議論が盛り上がっていることもあり、古典籍好きな人たちがデジタルアーカイブについての活用例を色々と出せるようにすることは、古典籍に関わる研究者だけでなく全体にとってもいいことなのではないかということもあり、とりあえず皆が共有しやすい形にしようかと思いました。

　とりあえず、このブログで何度もご紹介しているIIIFに対応する形で公開するのは活用の幅がかなり広がりますので、まずはIIIF対応をさせました。このIIIF Manifestのリストはタブ区切りテクストで公開しております。この件は、さっそく笠間書院が採り上げてくださったので、ありがたいことです。なお、なんでJSONじゃないの？という突っ込みはご容赦ください。JSONであるべきだと思う人はJSONにして再配布してください。

　さて次に、画像のダウンロードです。国文研のデータベースはあんまりダウンロードしやすくないので、ダウンロードしやすいようにしてみました。ポイントは、

1. 画像のディレクトリ／ファイル番号と書誌情報ID（？）との対応をわかりやすく
2. 画像のファイル名を固定長で
3. 1書誌ごとに全画像を１つの頁にまとめる

という３点です。先にテクニカルな話をしておくと、ファイル／ディレクトリの構造はそのままにして、シンボリックリンクをはることで上記のことを実現しています。多分、こうしておくことで、元のリポジトリ上での画像の状況に小変更が生じた時にもそれなりに機械的に対応できると思います。

では、上記の3点をかいつまんで説明していきますと、

「1. 画像のディレクトリ／ファイル番号と書誌情報ID（？）との対応をわかりやすく」というのは、書いているとおりです。おそらく、書誌情報やモノとしての本や周辺物の構造にあわせてディレクトリやファイル番号をつけていった上で、データベース上で順番を管理して表示していたのだと思うので、Webインターフェイスから使うことだけを考えるならこれでよいと思うのですが、画像をダウンロードして使うことを考えた場合、画像にアクセスした時にそのオリジナルのディレクトリ／ファイル番号（ファイル名）が見えてしまっていて、結果として書誌情報との関係や画像の順番がダウンロード後によくわからない、という状態になってしまうようでした。たとえば、何らかの事情で番号が飛んでいる場合、複数の本で構成される一つの本（書誌）のディレクトリの分け方に色々なパターンがある、あるいは、帙の写真があって本文が始まるけど画像番号は帙の写真の方が大きい、など、です。これだと、ダウンロードした時に、Webで見せている順番（＝多分国文研でこうあるべきと思った順番）では使えなさそうな感じでした。これは、これまでの国文研のデータベースがダウンロードでの利用を前提としていないのである意味当然のことであるとも言えるのですが、せっかくCC BY-SAでの公開となったのに、ダウンロードした際にうまく使えないとちょっと困るかもしれないので、とりあえず、各書誌情報ID（？）ごとに、画像をぶらさげる形にしてみました。

「2.画像のファイル名を固定長で」というのも、書いているとおりです。特にパソコンに1冊分をダウンロードしたり、複数の本を同じフォルダに保存してみたりした場合、読む順番で画像が並んでいたり、きちんと連番になっていたり、固定長になっていたりすることは、画像を簡単に順番に並べることができるという点で、ライトなパソコンユーザには割と重要なことかと思います。幸いにして書誌情報ID（？）は固定長なので、書誌毎の画像をWebで公開されている順番にならべて、その順番の番号を固定長でつけました。こういうのをPHPでやってしまう人なので sprintf("%05d", $filename); という感じです。結果として、今のところ、3,957,881点（多分重複あり）のすべての画像が「書誌番号ID_5桁の連番.jpg」という風になっています。

「1書誌ごとに全画像を１つの頁にまとめる」というのは、半分、上記1. の話の繰り返しになりますが、たとえばこんな感じで、各書誌ごとに頁を生成して、そこから、その書誌に対応する画像へのリンクが表示されるようにしてみました。

　さて、ここまで来たら、今度はIIIF manifestやダウンロード画像を探しやすくする工夫です。といっても書誌情報がオープンデータ化されていない現状では、できることは極めて限られていますが、一応、タイトルで検索できるようにしてみました。いわゆる親書誌と個別の書誌で同じ画像を含んでいる場合もあったり、結果として同じ画像が重複してヒットする場合もあるかもしれませんが、その点はご容赦ください。

　というわけで、とりあえずこんなものを作ってみました。サイトにちゃんとした名前をつけたいような気もするのですが、これはあくまでも本家の国文研サイトでIIIF manifestやダウンロードしやすい仕組みが提供されるまでのつなぎですので、「テストサイト」としています。この仕組みは、以前に国文研データベースの画像を全部チェックして仏典画像を探した時に苦労した点を反映したもので、基本的には、各本へのリンクが一覧表示されている画面からなるべく動かずに色々な情報を得られるように、というものです。

　まず、国デコ（国立国会図書館デジタルコレクション）ではすでに用意されている機能を少し発展させたものとして、少し大きめの頁のサムネイル画像を、頁を指定して一覧表示画面に列挙できるようにしています（たとえば、10頁のサムネイル画像を表示させる、といった具合です）。この機能があると、それぞれの本がどういうものか、ということについての簡単な見通しが得やすくなりますので、ちょっと作業がやりやすくなります。そして、そのサムネイル画像をクリックすると、Miradorで、その頁を拡大表示した形で、その本が表示されます。こうすると、内容の確認に入りやすい上に、Miradorは他の頁に飛ぶ方法が楽なので（頁下部のサムネイル画像をクリックするだけ）、その点でも便利です。国文研のデータベースも新しいものでは部分的にサムネイル画像が用意されるようになってきているようですが、「サムネイル画像は準備中です」となっているものに多く遭遇する上に、一度に閲覧できるサムネイル画像の数が少ないので（これは国デコもなのですが）、微妙に不便です。また、サムネイル画面と個別頁の画面はいちいち別ページを読み込む形になるので、そのたびにビューが切り替わり、さっき見ていたものがわからなくなるのは、たくさん画像を見なければならないときは結構疲れます。Miradorでの、頁拡大画面の下部にサムネイルがリストされる表示方法は、その点、結構楽でありがたいことです。ただ、この点については好みの問題もあるかもしれないので、あくまでも私が便利で楽だと思っている、ということにしておいていただけたらと思います。

　それから、書誌詳細を、ポップアップウインドウに表示されるようにしました。これは、国文研の現在のデータベースでは、新しい頁を開いてしまうのでちょっと大げさです。せっかくGET Methodに対応したのですから、こういう感じで表示してもらえると、視線があまり動かないのでありがたいのです、と思っております。ポップアップでなくても、フレームみたいなものでもいいのですが。

　それに加えて、画像ダウンロードのリンク、Mirador、Universal Viewerへのリンク、IIIFドラッグ＆ドロップアイコンなどもご用意いたしました。ここら辺を何らかの使いやすい形で本家でもいずれ用意していただけたらと思っているところです。

　オープンデータとして公開されたのに十分に活用されていない、となると、今度はかえってオープンデータ公開の意義が問われることになってしまいかねません。ということを最近いつも心配しております。とりあえずここまでしておけば、簡単なダウンローダを使って持って行って色々試したりすることも比較的容易にできると思いますので、みなさま、ぜひ色々ご活用してみてください。

　それから、この画像をオープンデータ化する決断をしてくださった国文研への感謝の念と参照情報は、常に忘れないようにしましょう。特に参照を明確に・できれば機械可読な形でも提示することは、オープンデータの意義を高めることに割と直接的につながり、他の機関のオープンデータ化を後押しすることにもなると思いますので、ぜひともよろしくお願いいたします。

今回新規にご紹介したURL：

http://www2.dhii.jp/nijl_opendata/kanzo_all.txt

http://www2.dhii.jp/nijl_opendata/searchlist.php

Mirador2.1を手元で活用（その１）

IIIF対応ビューワ、Mirador2.1は、Javascriptで書かれていて、最近のWebブラウザさえあれば大体動きます。もちろん、ネット上の画像にアクセスしますので、パソコンがネットワーク接続されていないとどうにもならないのですが、つながっていれば、手元のMiradorで各地の画像を表示することができます。先日はこの件で笠間書院さんがツィートしてくださいました。

永﨑研宣氏が、国文学研究資料館の館蔵和古書画像19451点の古典籍をIIIF対応に。Mirador 2.1 (IIIF対応ビューワ)をダウンロードして、それで見ると、従来より格段に見やすくなり、非常に便利です! https://t.co/FfxUh0SmPf

— 笠間書院広報室 (@kasamashoin) 2016年10月22日

さて、この、ローカルでも閲覧できるという件ですが、Miradorは、お目当ての画像にたどり着くまでが実はちょっと面倒です。IIIFアイコンのドラッグ＆ドロップという手法が一応用意されていて、たとえばスタンフォード大学からIIIF対応で公開されている近江國絵圖では、ビューワの左下にある「i」ボタンをクリックすると表示される画像の付帯情報の中にIIIFアイコンがありますので、これをMiradorにドラッグ＆ドロップするだけで近江國絵圖の高精細画像を閲覧することができます。

しかし、世の中にはIIIFアイコンが用意されているものばかりではありませんし、ドラッグ＆ドロップも少々面倒です。特に、「これとこれを並べてみせたい！」と思っている時に、いちいちアイコンを引っ張ってきたりドラッグ＆ドロップしたりするのは少々不便です。そもそもIIIFのコミュニティはギークが多いので、こういうことができるってだけでおおっ！と盛り上がってしまってさっそくあちこちのサイトにドラッグ＆ドロップアイコンがついたりするのですが、少し冷静になってみると、なんだかちょっと面倒なのでは…と思ったり思わなかったり。

そこで出てくるのが、Miradorの初期画面設定をいじってしまう、という話です。

一応、やり方は本家のサイトにあるので、気合いの入っているかたはそちらをご覧いただけたらと思います。ここでは、とりあえず、「開くと３つのIIIF対応画像が下記のような状態になってくれるHTMLファイル」を作ってみて、やり方をなんとなく知っていただくことを目指します。

　ちなみに下記のものは、フランス国立図書館gallicaの敦煌写本画像と、東京大学総合図書館の萬暦版大蔵経画像、国文学研究資料館の文政年間の木版本を並べているものです。いわゆる「法華経」の冒頭部分の同じテクストに関して、江戸・明・敦煌で作られたものを並べて比較しているものです。

さて、まずはMiradorのプログラムをダウンロードして手元に展開してみましょう。

http://www.dhii.jp/nagasaki/mirador_practices/mirador2.1.zip

そうすると、展開したフォルダの中には、以下のように、Miradorというフォルダとindex.htmlというファイルがあるはずです。まずはindex.htmlをGoogle Chromeで開いてみましょう。

そうすると「Add item」という文字が真ん中に表示されるはずですので、それをクリックすると、各地のIIIF対応画像がサンプルとしてリスト表示されます。以下のような感じです。

いずれも、クリックするとその画像が表示され、その本・あるいはひとまとまりの写真等の資料が頁めくりで表示できるようになります。この中には、海外の機関が登録した日本の資料や日本の機関・組織から登録した画像も含まれていますので、お時間がおありのときにちょっとながめてみてください。

しかし、実用段階に入っていくと、こういう各地の画像はあんまり必要なくて、むしろ、自分が使いたい画像がここで表示されてくれるとありがたいように思います。そこで出てくるのが、このindex.htmlファイルの書き換えです。これには、利用したい画像のIIIF manifestファイルが必要になります。まずはIIIF manifestファイルのURLを集めてみましょう。今回は、妙法蓮華経の巻第一にあたる画像を探そうとしていますので、その画像を含むIIIF manifestファイルを探せばよいことになります。Europeanaなどでも探せますので、ちょっと探してみましょうか。

………

IIIF manifestファイルの探し方：

フランス国立図書館gallicaの場合、普通に検索してお目当ての画像を見つけたら、たとえば以下のようなURLの場合、「.r=」以下を削除して、「/ark:」の前に「iiif/」と入れると、IIIF manifestファイルになります。Europeana上でみつけた場合、gallica由来コンテンツであれば、Identifierという項目に書かれているものがそれです。

http://gallica.bnf.fr/ark:/12148/btv1b10526554g.r=hokusai?rk=21459;2

http://gallica.bnf.fr/iiif/ark:/12148/btv1b10526554g/manifest.json

IIIF manifestを得るためのもっとスマートな方法があるはずなのですが、残念ながらうまく見つけることができていません…。

次に、国文学研究資料館関係の画像については、

国文研データセット簡易Web閲覧

http://www2.dhii.jp/nijl_opendata/openimages.php

国文学研究資料館の館蔵和古書画像のためのテストサイト

http://www2.dhii.jp/nijl_opendata/searchlist.php

などで、IIIF manifestというリンクがありますので、そのURLを持ってくればOKです。

さて、とりあえず頑張った結果、下記のIIIF manifest ファイルが入手できました。

http://gallica.bnf.fr/iiif/ark:/12148/btv1b8302822s/manifest.json

http://dzkimgs.l.u-tokyo.ac.jp/iiif/kakouzou/045_1/manifest.json

http://www2.dhii.jp/nijl/kanzo/iiif/200016819/manifest.json

これを、例のindex.htmlファイルに書き込めばOKです。一応、ファイル名をindex2.htmlに変えておきましょう。ファイル名をとりあえずindex2.htmlに変えて保存してから、いよいよ編集です。

Miradorの設定箇所はJSON様になっています。まずは、

Mirador({
         "id": "viewer",
         "layout": "1x1",

となっているところを探してください。そして、ここの「1x1」のところを「1x3」と変更してみましょう。以下のような感じになります。

Mirador({
         "id": "viewer",
         "layout": "1x3",

とりあえず、これで保存して、このindex2.htmlをWebブラウザで開いてみましょう。そうすると、画面が３つに分割されて、それぞれの画面で画像を選べるようになっているはずです。いかがでしょうか？

しかしこのままでは、当初の目的である「見たい画像を表示する」にはまだまだ遠いです。そこで次に挑戦するのは、既存のmanifestファイルの削除と先ほど探してきたmanifestファイルの追加です。

index2.htmlの中で、下記のようになっている場所を見つけてください。

"data": [
           { "manifestUri": "https://iiif.lib.harvard.edu/manifests/drs:48309543", "location": "Harvard University"},
           { "manifestUri": "https://iiif.lib.harvard.edu/manifests/drs:5981093", "location": "Harvard University"},

そうです、ここで、例のリストされるmanifestファイルを規定しています。ここでは、とりあえず

最後の３つを残して上の方から削除してしまいましょう。

削除を開始するのは以下の行からです。

           { "manifestUri": "https://iiif.lib.harvard.edu/manifests/drs:48309543", "location": "Harvard University"},

そして、以下は、残すべき３つのファイルです。

           { "manifestUri": "http://www2.dhii.jp/nijl/NIJL0018/099-0014/manifest_tags.json", "location": "NIJL"},
           { "manifestUri": "http://digi.vatlib.it/iiif/MSS_Vat.lat.3225/manifest.json", "location": "Vatican Library"},
           { "manifestUri": "http://media.nga.gov/public/manifests/nga_highlights.json", "location": "National Gallery of Art"}
         ],

下の方を敢えて残して上から消すことで、ちょっとした、しかしハマりがちなヒューマンエラーを減らすことができるのですが、それはまた別の話としまして、結果として、編集中の箇所の周辺は以下のような状態になっているでしょうか？

        "layout": "1x3",
         "data": [
           { "manifestUri": "http://www2.dhii.jp/nijl/NIJL0018/099-0014/manifest_tags.json", "location": "NIJL"},
           { "manifestUri": "http://digi.vatlib.it/iiif/MSS_Vat.lat.3225/manifest.json", "location": "Vatican Library"},
           { "manifestUri": "http://media.nga.gov/public/manifests/nga_highlights.json", "location": "National Gallery of Art"}
         ],
         "windowObjects": ,

ここで、これらの３つのmanifestファイルのURLを、先ほどの３つと入れ替えます。あと、「NIJL」「Vatican Library」「National Gallery of Ar」と書かれているところも、念のため、それぞれのmanifestの画像を公開している機関に書き換えておきましょう。

そうすると、manifestUriの行はそれぞれ以下のようになっているはずです。

           { "manifestUri": "http://gallica.bnf.fr/iiif/ark:/12148/btv1b8302822s/manifest.json", "location": "gallica"},
           { "manifestUri": "http://dzkimgs.l.u-tokyo.ac.jp/iiif/kakouzou/045_1/manifest.json", "location": "UT Library"},
           { "manifestUri": "http://www2.dhii.jp/nijl/kanzo/iiif/200016819/manifest.json", "location": "NIJL"}
         ],

さて、これで再び、index2.htmlをWebブラウザで開いてみましょう。いかがでしょうか？３つのウインドウが開いて、

一応、見本のファイルを置いておきますので、うまくいかないときは、こちらのファイルをダウンロードしてHTMLソースと見比べてみてください。

http://www.dhii.jp/nagasaki/mirador_practices/index2.html

 しかし、このままですと、やはりファイルの選択をしなければなりません。HTMLファイルを開いた時にいきなり画像が表示されるようにするには、「windowObjects": ,」に設定を書き込む必要があります。では、やってみましょう。

  "windowObjects": ,

この行に注目してください。この の間に書き込む内容が、HTMLファイルを開いた時に表示される内容です。ここでは、まず最初の頁を表示するようにしてみましょう。

画像を最初から表示するための記述は大体以下のような感じです。（ちょっと余計なものがありますが、それらはこの後の作業のためです。）

       {
         "annotationState" : "annoOnCreateOn",
         "loadedManifest" :"http://gallica.bnf.fr/iiif/ark:/12148/btv1b8302822s/manifest.json",
         "viewType" : "ImageView",
         "windowOptions": {
          }
        }

これがmanifest一つ分です。これを１セットとして、今回の場合、3セットを、カンマ区切りで書いてみてください。うまくいったら、以下のようになるはずです。

さて、ここでは、1ページ目が表示されています。ここから頁をめくっていって目的の頁にたどりつく、というのでも、今までよりは確実に楽です。本来表示したい画像は、「見せたい頁の見せたい場所を拡大表示」です。ここからはちょっとマニュアル的な面倒な作業になります。

　この作業は本来自動化可能な部分で、たとえばSAT大正蔵図像部DBのタグ付けシステムでは、これは完全に自動化されていて、見ているページにタグをつけるとそこが検索されて拡大表示されるようになってきます。技術的には、Miradorにもう一工夫するとMirador単体でも実現できる機能のはずなのですが、今のところまだできないようです。時間があればそこら辺の開発に取り組んでみたいと思っていますが、どなたか、我こそはという人は、ぜひ、がんばってみてください。

　…ちょっと脱線しましたが、これは、脱線せざるを得ないくらい、ちょっと面倒な作業です。難しくはありません。では、やってみましょう。

まず、見せたい頁を表示する、というところからいきます。見せたい頁のcanvas idを探します。

たとえば、

http://gallica.bnf.fr/iiif/ark:/12148/btv1b8302822s/manifest.json

をみてみましょう。典型的なJSONファイルで、階層構造を為しています。このうち、

"sequences" : [ {

/>という行を探してください。ここから下の階層に「canvasが並べられて、canvasの順番が規定されます。canvasの順番は複数設定ができるようなのですが、多くの場合１つしか設定されていないと思います。このすぐ下の階層に

"canvases" : [ {

という箇所があります。この中にリストされている各要素が「canvas」です。各要素の中にはそれぞれ「@id」という項目があります。この@idが、canvasを一意に決めるものです。ここでは、1頁目の画像がほしい、ということは、1つ目のcanvasを指定したい、ということになるので、1つめの@idをコピペしておきます。

"http://gallica.bnf.fr/iiif/ark:/12148/btv1b8302822s/canvas/f1"

さて、次に、http://www2.dhii.jp/nijl/kanzo/iiif/200016819/manifest.json

を見てみましょう。要領はさっきと同じです。ただし、今回は、5ページ目を見たいので、5頁目のcanvas idを探します。探し方のコツとしては「"label"」という項目が各canvasの中にあるのを見つけてみてください。これは、Miradorの画面下部の各サムネイルの下部に表示されているので、それを見比べると割と簡単に見つけられると思います。ただし、labelの値を全canvas同じにしているmanifestファイルもありますので、その場合は別の探し方を考えるしかありません。

　今回は、各canvasごとに異なるlabel値がつけられているようなので

"label": "p. 5",

上記箇所を探すことで、割と簡単に見つけられました。今回のcanvas idは

http://www2.dhii.jp/nijl/kanzo/iiif/200016819/canvas/p5.json"

です。

同様にして、

http://dzkimgs.l.u-tokyo.ac.jp/iiif/kakouzou/045_1/manifest.json

に関してもcanvas idを探してみましょう。

さて、canvas idが一通り出そろったら、あとはそれを適切な場所に書き込んでいきます。

この場合、windowsObjects以下の各要素の中に書き込んでいくことになります。ここでは、「loadedManifest」の次に書き込むことにして、この行の最後に「,」を入れて、次の要素として下記のようにcanvas idを記述しておきます。

"loadedManifest" :"http://dzkimgs.l.u-tokyo.ac.jp/iiif/kakouzou/045_1/manifest.json",
"canvasID": "http://dzkimgs.l.u-tokyo.ac.jp/iiifimgs/kakouzou/045_1/pkakouzou/045_1/0009",

これを他の２つの要素に関しても同様にしてみてください。

これがうまくいくと、それぞれの頁が開くはずです。見本が下記にありますので、うまくいかないときはこの頁のHTMLソースをみて検討してみてください。

http://www.dhii.jp/nagasaki/mirador_practices/index3.html

さて、いよいよ最後の仕上げです。しかし、これが実は一番ややこしくて、しかも自動化すれば大変簡単になるところです。今度は、

             "windowOptions": {
             }

の中に、位置情報を記述していくのです。たとえば以下のような感じです。

    "windowOptions": {
     "osdBounds": {
       "x": 0.7,
       "y": 0.1,
       "width": 0.2,
       "height": 0.2
       }
     }

ここでは、1を画像の最大サイズとして、0から1の間の数値で画像内の位置を表現しています。xが横位置、yが縦位置、widthが幅、heightが高さ、です。

位置情報は、ここでは目分量（笑）でちょこちょこ調整しながらつけました。みなさんもぜひ試行錯誤してみてください。試行錯誤の時間がない人は、下記の完成版を参考にしてみてください。

http://www.dhii.jp/nagasaki/mirador_practices/index4.html

ということで、いかがでしたか。Miradorにこの位置情報を拾って最初から表示する機能をつけてくれ…という思いがどうしても先に来てしまいますが（追記：Miradorには、見ているviewを保存するbookmarkという機能があるのですが、手元ではうまく動いたことがありません。これがうまく動くようになれば最後のステップ（あるいはこれらのステップ全体？）は省略できるようになるかもしれないので、どなたか挑戦していただけますとよいかもしれません）、しかし、そんなに数が多くなければ、手でつけてみるのもまた乙なものかもしれません。せっかく、世界中で多種多様な画像がIIIF対応にて公開されているので、こういう活用の仕方も、ぜひ考えて見てください。

今後とも、よろしくお願いいたします。