ジャパンサーチ(BETA)を探検 踊り場にて

前回の記事では、ジャパンサーチ(BETA)の入り口あたりを探検してみました。 ダンジョンで言えば、地下一階を探検して、下層に向かう最初の階段にたどり着いたあたりかなと思います。そこで、踊り場にて、ちょっと一休みしながら 地下一階の探検を振り返ってみたいと思います。

前回記事で検索した資料は、木版資料でした。一つの内容について、複製が物理的に多数存在するものであり、また、さらに、 もしかしたら、補刻や、版木全体の彫り直しなどによって、一見すると同じものに見えるが実はちょっと異なっているものも あるかもしれない、というものです。実際のところ、国立国会図書館や国文学研究資料館から公開されている画像は、 ざっと見たところ同じものであるように見え、スタンフォード大学図書館から公開されているものも色は異なるものの、 基本的には同じもののようです。詳しく比較してみたり、重ねて透過してみたりすると、もしかしたら違いが 発見できるかもしれないが、それはそれで楽しい作業になりそうです。あるいは、すでに誰かが研究発表をしている こともあるかもしれません。その場合は、それを追体験して楽しむこともできそうです。

ところで、「南瞻部洲萬國掌菓之圖」のように、同じ内容の資料が日本各地、さらには世界中に広がっている例 というのは他にたくさんあります。いわゆる古典籍と呼ばれるものは大抵そうです。さらに言えば、たとえば 「源氏物語」であれば、江戸時代に別々の出版者が作って刊行した、内容はほとんど同じだけど版式が異なるものがたくさん残ってますし、 木版出版が広まる前は写本で伝えられてきており、同じ源氏物語でも形態や内容に少しずつ異なるものが様々に残されています。 ジャパンサーチというからには、そういった資料をうまくまとめて探せるようになっていると、とても ありがたいところです。

ではジャパンサーチがそういうまとめ作業まですべきなのかと言えば、それはちょっと大変過ぎます。 むしろ、既存のデータをうまく使う方向を考えるとよいのではないかと思います。古典籍の書名であれば、 国文学研究資料館の日本古典籍総合データベースというものがあり、たとえばこのように、 世界中の源氏物語の書誌情報を集めた上に、画像公開しているものについては画像へのリンクもはってあります。 ジャパンサーチの古典籍版とも言えるもののようにも思えますが、いずれにしても、たとえば 「源氏物語」で検索した時に、このデータへのリンクのURLが検索結果一覧の左側にある ファセットに表示されてくれるか、「書名典拠情報」などとして検索結果一覧の一番上に出てくれたりすると、 税金で構築されている二つの巨大なデータベースが納税者にとって使いやすい形で提供されることになると 思いますので、ぜひ期待したいところです。双方に余裕があれば、双方のデータをマージすることで お互いに作業効率をあげるようなことが可能かもしれませんが、それはまた別途、少し先の課題として 考えていただくのがよいのではないかとも思います。

また、同様に、人名に関しても、いわゆる人名典拠データベースが いくつかありますので、人名検索した際には、典拠情報データベースへのリンクも同時に表示されて くれるとありがたい、というか、とても便利なのではないかと思う次第です。

それから、もう一つ、振り返ってみて、なんとかしていただきたいなと思ったのは、「出典情報を 書きやすくしていただきたい」ということです。せっかくデジタルデータを集めているのですから、 利用者に出典情報を調べさせて書かせるのではなく、「このテキストをコピーして貼り付ければ出典情報として 使える」というようなテキストを、コンテンツ情報ページに表示しておいていただけると大変ありがたい のです。あるいはさらに「copy」ボタンも用意して、クリックすればクリップボードにコピーされる という風になっているとなおありがたいです。この種の機能は、たとえばSAT大蔵経テキストデータベースなどでも 10年くらい前から提供しているような、出典を重視するデータベースでは割と一般的な機能ですので、 そんなに難しいことではないと思います。

ということで、地下2階の探索に向けて、また少し準備をしてみます。

ジャパンサーチ(BETA)を探検その1

まだベータ版ですのでこれから色々良くなっていくところだと思いますが、ベータ版をレビューすべしという声があちこちから聞かれるので、私も少し触ってみることにしました。

色々な使い方があると思いますが、まずは、ちょうど用事があったので、江戸時代の有名な地図、「南瞻部洲萬國掌菓之圖」をみてみました。これは、 18世紀くらいのもので、古いですが、それほど珍しいものではなく、Web上での有名どころでは、 Devid Rumsey Map Collectionにて色刷りのものが公開されており、これが スタンフォード大学図書館からはIIIF対応で公開されていて、 さらにWikipediaでもこの画像を見ることができます。また、数ヶ月前の東洋文庫@駒込のあたりでの展示会でも同じく色刷りの現物が展示されていました。

さて、検索しようとしてみますと・・・、どこから検索したらいいのでしょうか?うーん?タブキーを押し下げするとキーワード入力欄に 飛んでくれるかな?と思って押し下げしてみたらいかなかったので、ううーん?と思って画面を見回してみると、右上に虫眼鏡のアイコンが あります。これをクリックしてみたら、出ました!検索キーワード入力欄です。「太刀」「埴輪」「祭り」「天皇」という ボタンも一緒に並んでいますので、クリックするとキーワード入力欄に入力してくれるのかな・・・と思って、ボタンをクリックしたら、 いきなり検索結果に飛んでしまいました。このタイミングでいきなりHTTP/1.1で、80リクエスト、1.1MB transferredはちょっときついですね。 手元がおぼつかない私のようなおじさんだと、海外出張中につい間違って押してしまって、500MBくらいしかない時もある 貴重なレンタルWIFIルータの使用可能データ量を無駄に使ってしまいそうです。どちらかといえば、クリックしたら キーワードが検索窓に入って、その後、検索ボタンクリックか、Return/Enterキー押し下げで検索してもらえると ありがたいですね。

さて、太刀の検索結果も見てみようと思いましたが、検索結果が結構多いので、これはまた今度ということにして、 「南瞻部洲萬國掌菓之圖」を検索してみます。そうすると、おお、出ましたね。一番上に国立国会図書館の 資料、次は「国会図書館 立命館大学アート・リサーチセンター (ARC古典籍ポータルデータベース)」、 次は「東京国立博物館 独立行政法人国立文化財機構 (ColBase)」、 「デジタルアーカイブシステムADEAC 国立国会図書館 (国立国会図書館サーチ)」 という感じになっています。この記載の仕方、いわゆる「つなぎ役(正式名称をよくわかってなくて申し訳ありません)」 の名前と実際の提供機関の名前が並んで、さらに、その次に、リンク先データベースが並んでいるという風に なっているのかなと思いましたが、検索結果としてリストされたコンテンツに付与できる少ない情報の中に この情報を入れるべきなのかどうか、という点は少し気になります。提供機関やつなぎ役(?)からすると 載せてもらわないと貢献がみえないので困る、ということで理由も気持ちもよくわかりますが、これほど 格好いいデザインを作れるのであれば、そのあたりも何か少しうまいソリューションを作り込んで いただけるのではないかなと思います。

さて、とりあえず、ユーザとしては、まずは画像を見たいので、一番上の国立国会図書館のものを クリックしてみます。そうすると、EuropeanaのようにIIIFコンテンツをそのまま表示してくれていて、 拡大縮小もできます。これはなかなかよい感じです。二次利用条件もどういう風に利用できるか わかりやすく提示されていて、パブリックドメインであることがすぐわかる上に、 「教育利用」「商用利用」「非商用利用」でそれぞれ可能かどうかも○がついているのでよくわかります。 ただ、この表示の仕方だと、いわゆるCC BY-SAにおける「SA」をどう表現できるのか、というのが ちょっと気になるところです。それはまた次の機会に見てみましょう。

メタデータもRDFで取れるようになっているので、これはなかなか便利ですね。

ただ、画像としては、古地図なのに分割撮影しまっていて(これはなんとかして もらいたい)、色もついていないので(これはややミーハー気味)、もう少し 別のものはないかなと思って次のものを見てみます。。。と思って、検索結果一覧に戻る リンクを探してみますが、うーん?よくわからないので、とりあえずブラウザの「戻る」 ボタンで戻ってみます。そこで、2つ目をクリックしてみます。そうすると、 所属機関は国立国会図書館、連携機関は立命館大学アートリサーチセンター、となっています。 「所属」というのは、メタデータの所属が国立国会図書館になっているというようなこと なのでしょうか?ここでは、CC BY-NC-SAなので商用利用に「×」がついています。 ただ、この表記だと、SAが表現されないのがちょっと気になりますが、(?)アイコンを クリックするとポップアップでライセンスの解説が表示されるのでよいでしょうかね。さらに ポップアップをクリックすると、CCの本家ページへのリンクもありますので、 利用者側が気をつけさえすれば万全ですね。

さて、このコンテンツでは、リンク先のページにいけば画像が見られるということのようですので リンクをクリックすると、時々見かけるARC古典籍ポータルデータベースの検索結果一覧の ようなページが表示されます。URLのパラメータを見るとf1==NDL-2542466という風になっている ので、ここで複数コンテンツがリストされるということはなく、あくまでも、ID指定で そのコンテンツの情報のみが表示されるということなのでしょう。

・・・と思ったのですが、このリストで「ORG閲覧」ボタンをクリックすると、先ほどみたNDLの コンテンツにジャンプするようです。一方、「国文研検索」ボタンをクリックすると、国文学研究資料館の 日本古典籍総合目録データベースの当該書誌情報にジャンプするようです。ここでは 国文学研究資料館所蔵の画像へのリンクが表示されているので、それをクリックすると、 インフォコム株式会社謹製の旧ビューワで画像が表示され、新しいIIIF対応ビューワへのリンクも 表示されるようです。さらに、旧ビューワ上で国文学研究資料館が作った詳細書誌情報への リンクも表示されていて、これはかなり以前からずっと要望していたものでしたので、いつのまにか 実装されていたようで大変胸熱です。 やや脱線しましたが、ついでにもう少し脱線すると、そういえば、国文学研究資料館が公開している画像が ジャパンサーチでの検索結果リストには表示されなかったような気がしますが、これはどういうことなのでしょうか? 国文学研究資料館は連携機関に入っていますので、検索語の具合でヒットしなかったということなのか、 それとも、日本古典籍総合目録データベースはアートリサーチセンター経由でジャパンサーチに 情報提供することになったのか、一般ユーザである私には色々想像するしかありません。 いずれにしても、アーチリサーチセンターは、それ自体が日本文化ポータルサイトとしての機能を 追求している面があるのだろうと思いますが(そしてそのことはとても貴重な取り組みだと思います)、 ジャパンサーチユーザからすると、 独自コンテンツなのか、いわゆるパスファインダー的な情報提供なのか、がジャパンサーチ上で わかるようになっているとありがたいところです。これは、アートリサーチセンターというよりも 「つなぎ役」的なところで対応できるとよいことかもしれません。 ついでに、そうすると、ジャパンサーチ上ではCC BY-NC-SA(表示-非営利-継承)という ライセンス表示になっていますが、リンク先デジタルコンテンツはPDMとCC BY-SAですので、 「デジタルコンテンツの二次利用条件」と記載されているものは、メタデータのみに適用される ものと考えるべきでしょうか?・・・と思って色々見てみると(色々見てみないといけないようですが)、 コンテンツの情報を記載しているページの中に表示されている3つの連携先リンクのうち、 「収録されているデータベース」のところの連携先リンクをクリックすると、 メタデータの利用条件についてもまとめられています。これを見る限りでは、 リンク先の条件はリンク先によるが、メタデータはCC BY-NC-SA、ということのようですね。

さて、次のリンクをクリックしてみましょう。「東京国立博物館 独立行政法人国立文化財機構」からの 情報です。「解説」のところが充実していて良いですね、

仏教宇宙観における南贍部洲は須弥山の南方の大海中に位置するインド大陸をさすという。本図は仏教系世界図として初の木版図で、広く流布し、多くの通俗版に影響を与えた。右上の日本の南に「亜(あ)墨(め)利(り)加(か)」、左上に「イタリヤ」など、欧州からの知識が反映されている。 (出典:ジャパンサーチColBase https://jpsearch.go.jp/item/cobas-141163

これはきっと、詳細に書かれている場合にのみ 表示されるようになっているのでしょうね・・・と思って、そういえば他のものは どうだったかと思って戻ってみてみました。冒頭の国立国会図書館からの情報ページ(なんと呼べばいいのかな? とりあえず「コンテンツ情報ページ」と仮に呼んでおきます) で、念のため、メタデータリストの一番下にある「すべて表示」をクリックしてみると、なんと、こんな解説が付与されてました。

頭陀浪華子製図并撰。浪華子とは鳳譚また僧濬で、華厳宗再興の祖とされる。仏教的世界観にもとづく世界図。南瞻部洲とは須弥山の東西南北にある4つの大陸のうち南の大陸で、仏教的世界観ではここが人間の住む世界とされる。北が広く南に尖ったかぶら型で、もともとは唐・天竺・日本の3国をその世界の主体とするが、西洋からの世界知識の伝来をうけて両者の融合がはかられる。本図はその代表例で、北西部に群島状のヨーロッパが描かれ、日本の南には南北アメリカ大陸と比定できる陸塊が見える。題額脇に多数の典拠資料リストがある。板行の南瞻部州図としては最初、かつ最詳の図として広く流布した。元の題簽は残るが改装。 (出典:ジャパンサーチ国立国会図書館デジタルコレクション https://jpsearch.go.jp/item/dignl-2542466 )

これは、コンテンツ情報ページのところで最初から表示されているとありがたいですし、欲を言えば、これくらいの情報が、検索結果リストを眺める際に なんらかの形で表示してもらえるとありがたいところです。ポップアップとかでもいいです。

さて、東京国立博物館のColBaseでは「デジタル化されていません。」となっていて、リンク先も画像は出ないようです。そうすると、 コンテンツ情報ページのコンテンツの二次利用条件というところは、あくまでも、画像などのコンテンツのことを示していて、 メタデータのことを指しているわけではない、と考えるべきなのでしょうね。メタデータの利用条件については 「収録されているデータベース」の「ColBase」をクリックすると、政府標準利用規約(第2.0版)であることが 確認できます。

このあたりは、ベータ版なので、正式版ではメタデータのライセンスとコンテンツのライセンスをわかりやすく区別して それぞれコンテンツ情報ページにて提示していただけると、私のようなユーザでも使いやすくなってありがたいところです。

さて、ここまで来たので、4つ目も見てみましょう。「デジタルアーカイブシステムADEAC国立国会図書館 (国立国会図書館サーチ)」と なっているものです。コンテンツ情報ページを見る限りでは、メタデータのみの提供のようですが、この 資料の特徴を表す情報としてここで見えるものは「古典籍書誌データベース、 西尾市岩瀬文庫」のみです。 「すべて表示」ボタンをクリックすると「内容細目」のところに少し詳しい解説が出ています。そこで、この解説を 参照を提示しつつ引用しようとして「国会図書館サーチ」を見てみると「利用条件は連携先によって異なります。下記「連携先一覧」をご確認ください。」 となっています。そこで、「デジタルアーカイブシステムADEAC」をクリックして見てみると、ポップアップが表示されます。ここで、 メタデータのクレジットは、

「本サービスで提供するメタデータの一部は、デジタルアーカイブシステムADEAC(TRC-ADEAC株式会社が運営)を利用してデータ公開している各機関に由来する。ライセンスは<クリエイティブ・コモンズ 表示 4.0 国際 パブリック・ライセンス> https://creativecommons.org/licenses/by/4.0/legalcode.ja である」といった表示が望ましい。」

という風に書いてありますが、

「デジタルアーカイブシステムADEAC 船橋市西図書館 所蔵」となっています。今回見ていたコンテンツは船橋市西図書館 所蔵ではないので これではないだろうと思って、このポップアップには、「デジタルアーカイブシステムADEAC「利用規定」」というリンクもあるので これをクリックしてみますと、要するに、「各ページで確認するように」となっています。ふー。ちょっと疲れてきました。さて、そこで、 コンテンツ情報ページのタイトルの下にある「国立国会図書館サーチ」をクリックすると、TRC-ADEACサイト上の「西尾市岩瀬文庫/古典籍書誌データベース」 での書誌情報が表示されます。ページの一番下に「利用規定」のリンクがありますので、これをクリックすると、 ようやく確認できました。が、 書誌情報に関する扱いについては特に記載がないので、引用するだけなら、普通に引用として参照元を示せばそれでよいという ことかもしれません。

なお、ここまでの利用で少し思ったことですが、ジャパンサーチには古文書と古典籍の情報がたくさん 入っているはずで(これからも増えるはずで)、しかし、古文書と古典籍は、探し方や見つかってからの扱いがかなり異なっていて、 こだわりポイントも結構違うのではないかと思います。そのあたりへの配慮を組み込むための仕組みも ある程度できるといいのかもしれないと思ったところでした。

それから、今回のケースだと、「見たい日本の資料は海外サイトやWikipediaにある」という状況なので、そういうのもいずれ なんとかできるといいですね。

さて、もう少しヒットしたものがありますが、今日はここまでにしたいと思います。これくらい書いておけば、 UXの専門家なら、どこをどうつなげばここでの苦労を半減させられるか大体把握できると思いますので、ご検討のほど、よろしくお願いいたします。

フリーのOCRソフトTesseract 4 が簡単に使えるようになってました!

しばらく前から時々試してみていたTesseract ですが、気がついたらえらく使いやすい感じになっていたので、また試してみました。

なんと、メジャーなLinuxディストリビューションごとにバイナリが用意されていたのです。こういうものは 「Ubuntuだとこうやってインストールできます」という話が多くて、RHEL/CentOSユーザな私はコンパイル環境があわなくて泣きながら作業することが 多かったのですが、今回はなんと、RHELにもCentOSにもバイナリが用意されています。さっそく、バイナリインストールです。

yum-config-manager --add-repo https://download.opensuse.org/repositories/home:/Alexander_Pozdnyakov/CentOS_7/
sudo rpm --import https://build.opensuse.org/projects/home:Alexander_Pozdnyakov/public_key
yum update
yum install tesseract 
yum install tesseract-langpack-jpn

これでいきなり使えるようになってしまったようです。コマンドラインで

$ tesseract 画像ファイル名 出力先 -l jpn

ということで使えてしまいました。ただ、トレーニング済みデータのもっと大きなものが公開されていましたので、 それをダウンロードして設置…は、CentOS7では以下のURLに置いてあるようでしたので、そこのファイルを 置き換えました。

/usr/share/tesseract/4/tessdata/

そうすると、なんだかちょっと精度が高まったような気がします。ちなみに縦書き日本語用の jpn_vert.traineddata というのもありまして 縦書き資料ではこちらを使って見ると多少精度が高まります。その場合、以下のようなコマンドになるようです。

$ tesseract 画像ファイル名 出力先 -l jpn_vert

いずれにしましても、とりあえずLinuxのコマンドラインから使えるようになりましたので、シェルスクリプトでの繰り返し処理さえ書ければ、各地の公開画像を色々ダウンロードしてどんどんOCRをかけてみる ことが割と簡単にできるようになりました。Tesseract3の時も一応できましたが、それよりは精度があがったような気がします。

ちなみに、精度を高めべく学習させることもできるそうですので、それについてもこれから少し試してみたいと思っております。

ということで、みんなで色々試してみましょう!

近代文語UnidicをPython3で使おうとして少々大変だった話

プログラミング言語と言えば、仕事ではこのところずっとPHPとJavascriptばかり使っておりますが、ディープラーニング関係はPythonのライブラリが強いということと、大学院生達に教えるならとりあえず世界的な情勢からもPython一択しかないと思って、なんとかちまちまPythonを勉強しながら教えています。 そのようななかで、今回は、近代文学資料のテクスト分析をしてみようということで、分かち書き&形態素解析をすべく、Mecab+近代文語UnidicをPython3から使おうとして少し苦労したので、備忘録代わりにここにまとめておきたいと思います。 ちなみに、環境は、Windows10+WSL+Ubuntu18系です。

MecabをPython3から使えるようになるには、ググればいくらでも情報は出てきますし、この環境でも特殊性はほとんどなかったように 思いましたのでそちらに譲ります。その状況を前提として、次に行きます。

近代文語Unidicは、こちらからダウンロードします。WSL/Ubuntuから見えるディレクトリなら どこでもいいようですので、どこかで展開します。このディレクトリを仮に WSL/Ubuntu側から見て

/mnt/c/Users/nagasaki/Documents/jugyou2019/python_graph/UniDic-kindai_1603 (ディレクトリA)

としておきましょう。

すでにこの環境に、mecab-python3の最新版がインストールされている場合、ホームディレクトリに以下のようなファイルが存在するはずです。

~/.local/lib/python3.6/site-packages/MeCab/mecabrc.in

このファイル中に以下のような箇所がありますので、

dicdir = @DICDIR@

ここに上記のディレクトリAを持ってきて以下のように書き換えます。

;dicdir = @DICDIR@
dicdir = /mnt/c/Users/nagasaki/Documents/jugyou2019/python_graph/UniDic-kindai_1603

これで辞書としては使えるようになったはずです。ただし、テクスト分析のようなことをする場合、 もう一箇所、もしかしたら書き換えた方がいいかもしれない箇所があります。それは、既存のスクリプトが現代語Unidicを 前提としてすでに作られたもので、しかも、-Ochasenといったchasen互換を前提とした形態素解析情報を 読み込むようになっていた場合に限定されると思いますが、この場合、この辞書の設定に以下のような追記をする ことになります。

この場合、近代語Unidicの中に入っている辞書設定ファイル、dicrcに、

UniDic-kindai_1603/dicrc

以下のように追記します。

; ChaSen
node-format-chasen = %m\t%f[7]\t%f[6]\t%F-[0,1,2,3]\t%f[4]\t%f[5]\n
unk-format-chasen  = %m\t%m\t%m\t%F-[0,1,2,3]\t\t\n
eos-format-chasen  = EOS\n

これで、現代語Unidicのchasen互換を前提としたPythonスクリプトに近代文語Unidicを使わせることができました。 ただし、Chasen互換の箇所はもう少し書き方を工夫した方がいいかもしれません。

このようにしてやり方が書いてあれば、何のことはなさそうですし、作業自体は10分もかからないと思いますが、 このやり方を確定して、数人の間で同様に動作することを確認するまでに相当の時間を要しました。 非常に限定的なケースですが、しかし、同じことに困る人がいつか出てきた時のためにメモしておきます。

ついでに、もう一つ書いておくと、この関連で、python3で簡単なグラフ描画をするための igraphというモジュールをインストールするのに少々苦労しましたので それも書いておきます。この環境で動かせるようになるまでに、以下のコマンドが必要でした。 これも、ググって丁寧に調べればわかることですが、まとめて書いてあると楽な人もいるだろうと 思います。

sudo apt-get install libxml2-dev
pip3 install python-igraph
sudo apt-get install libcairo2-dev
pip3 install cairocffi

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

IIIF対応ビューワ:最近の話題

IIIFは、おかげさまで徐々に国内にも広がってきておりまして、あちこちの画像をまとめて統合的に活用することも現実的なものとなってきました。一方、対応ビューワの方にも少し新しい話が出てきております。やはり注目はMirador3で、これまでの課題を解決しつつ、よりさくさくと動くように、使い方を分かりやすく、そして、より拡張性の高いものを目指して開発が進みつつあります。最近ようやく、開発版が割と簡単に使えるようになりましたので、ちょっと画像が粗くて恐縮ですが、とりあえず以下の動画でちょっとお届けします。

youtu.be

インターフェイスの日本語化も現時点では一応できています。まだ、アノテーションなどいくつかの機能が完成してないようで、 jsファイルも16MBほどあるのでこれからブラッシュアップしていくものと思われますが、デザインだけを見ても今までのバージョンとは かなり雰囲気が違っています。ソースコードはこちらから取得できますので、よかったらお試ししてみてください。 https://github.com/ProjectMirador/mirador/

もう一つ、TIFYというものがゲッティンゲン大学にて開発されているようです。こちらはモバイルにも対応しているとのことですが、後発な分、先行ビューワの微妙に不便だったところがケアされているような感じで、難しいことをいわなければ全体的に使いやすい感じがします。

f:id:digitalnagasaki:20190511173528p:plain

アノテーションも、Fulltextタブをクリックすると内容は表示されるようです。TIFYについては、まだ検証が不十分なので、もう少し調べてみようと思っております。

簡単なIIIFビューワを作ってみよう(6): もう少し便利なインターフェイスを

透過度や位置を変更できるようにしましたが、いちいち数字を入れてボタンを押す・・・という操作はいかにも面倒です。透過度の調整は、スライダが適しているように思えます。そこで jQuery UIのスライダを組み込んでみましょう。

とりあえず、動くスライダを表示してみる

jQuery UIは、jQueryで便利なインターフェイスを提供してくれるライブラリのようなものです。うまく組み込むことができれば、とても便利に使うことができます。基本的には、ダウンロードしてscriptタグで読み込まれば準備は完了です。

ダウンロードはこちらからです。以下のページ画面の右側の方にある「stable」をクリックしてください。 f:id:digitalnagasaki:20190504213317p:plain

ダウンロードしたら、展開してください。そうすると、たとえばダウンロードしたものが jquery-ui-1.12.1.zip であれば、 jquery-ui-1.12.1 というフォルダ(ディレクトリ)ができているはずです。jquery-uiはディレクトリ構成をいじるとややこしいことが起きるかもしれませんのでこのまま使いましょう。

まず、とにかくスライダを表示させることを目標にしてみます。jquery-uiでスライダを表示できるようにするには、jquery-uiのcssファイルとjsファイルをページに読み込ませる必要があります。

<title>私の簡易IIIFビューワ</title>
    <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.min.css">
    <!-- 上記のタグを追加してcssファイルを読み込めるようにします。-->
    <style>
    <script src="jquery-3.4.1.min.js"></script>
    <script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>
    <!-- 上記のタグを追加してjsファイルを読み込めるようにします。-->
    <script src="openseadragon-bin-2.4.0/openseadragon.min.js"></script>

以上のようにして、cssファイルとjsファイルを読み込めるようにしたら、スライダを表示するエレメントをどこかに追加してみましょう。とりあえずビューワ画面の直上がいいような気がしますので、以下のようにしてみます。

    <div id="slider"></div>
    <!-- 上のタグを追加します。-->
    <div id="myViewer" class="openseadragon" style="width:600px;height:600px"></div>

そして、スライダを表示するjavascriptを書きます。

    <script>
  $(function(){
    $( "#slider" ).slider();
    // 上の一行を、最初の方に追加します。

そうすると、単にスライダが追加され、動かせるようになっているはずです。 今回のサンプルはこちらです。

スライダを重ねた画像の透過度と連動させてみる

スライダは色々な設定を加えることができます。透過度はcssのopacityで設定できますので、 以下のようにスライダのjavascriptに追記して、スライダの値とopacityが連動するようにしてみます。

    $( "#slider" ).slider({
      min: 0,
      //最小値
      max: 100,
      //最大値
      value: 100,
      // 最初の値
      slide: function( event, ui ) {
         var opa = ui.value / 100;
         // ui.valueで、スライダの値をとれます。opacityは1が最大値なので、スライダの値(最大値100)を100で割った値を用います。
         console.log();
        $(".overLayImg").css({'opacity':opa});
        //重ねた画像のクラスを指定して、cssでopacityの値を与えます。
      }
    });

ついでに、幅が広すぎると使いにくいので、スタイルを設定してスライダの幅を少し狭くしてみます。

<div id="slider" style="width:50%"></div>

今回のサンプルはこちらです。

簡単なIIIFビューワを作ってみよう:まとめ

IIIF Presesntation APIを理解する上で、IIIF ビューワを作ってみるとよいのではないかと思いまして、ちょっとチュートリアル的なものを作ってみました。

と言っても、一から作るわけではなく、画像表示部分はOpenSeadragonにおまかせ、という話です。OpenSeadragonが担当してくれるところは、ほぼIIIF Image APIと重なるので、そこはまた別の機会にということで、今回は、OpenSeadragonを核にしてIIIF Presentation APIを活用して閲覧システムを作ろう、という話です。

基本的に、作成に際してはサーバは不要で、ローカルで動かすシステムです。ただ、外部のIIIF Manifestファイルを読み込むという話ですので、ネットにつながっている必要はあります。

以下、順番に解説を読みながら取り組んでいただくと、IIIF Presentation APIについて少し理解が深まると思います。また、途中からは、それを離れておまけの機能作成に行ってしまっておりますが、さらに利便性を高めるための基礎になるようなものをいくつか採り上げておりますので、こういったものを踏まえてさらにうまく活用していただいたり、よりよいサービスを展開したりしていただけますと幸甚に存じます。

簡単なIIIFビューワを作ってみよう(1): IIIF Presentation APIの理解に向けて

簡単なIIIFビューワを作ってみよう(2): IIIF Presentation APIの理解に向けて

簡単なIIIFビューワを作ってみよう(3): おまけの機能を少し

簡単なIIIFビューワを作ってみよう(4): 画像切り出しをしてみよう

簡単なIIIFビューワを作ってみよう(5): 切り出した画像を重ねてみる

簡単なIIIFビューワを作ってみよう(6): もう少し便利なインターフェイスを