HIMIKO Editor for Imageの使い方(カスタマイズ編)
前回の記事では、HIMIKO Editor for Imageの基本的な操作方法を説明しました。この記事では、やや応用的な機能であるカスタマイズについて説明したいと思います。
意義
まず、カスタマイズ機能の意義は大きく分けて二つあります。
- 「石川五右衛門」や「刀」など、個々のデータが表す事物が含まれる概念(例の場合には「人物」「器物」)セットを自由に設定できる。
- 作成する画像アノテーションやエンティティデータに付与する関連情報(ラベルなどの)項目を自由に設定できる。
一つ目について、Editorでデータ構築を進めるにあたっては、画像やエンティティにどのような「タイプ」を与えるかが問題になります。ここでいう「タイプ」とは、セマンティックウェブの文脈でいうところの「クラス」であり、「人物」や「場所」など個物が属する抽象的な概念のことです。Editorのデフォルトでは、「人物」「組織」「場所」「時間」「物理的物体」「概念」といったタイプを与えられるようになっていますが、ユーザによってはこれらの事物の範疇には収まらない概念を記述したい人もいるでしょうし、「人物」の中でも、例えば性差を記述したい、といった場合もありえます。また、EditorがRDFデータを生成するツールである以上、選択されたタイプには必然的にクラスURIが付与されることになりますが、このURIを独自のものに設定したい、という需要もあるでしょう。
二つ目についても具体的な例をあげるならば、ファクトイドを表すノードに典拠情報を付与したい、といった要望があるでしょう。デフォルトでは、上記のタイプ選択の他、ラベルの付与程度しか付加情報入力項目は設定されておらず、より詳細な情報をデータに与えたい場合にはカスタマイズは必須です。
カスタマイズ機能を用いることで、選択可能なタイプや情報入力項目を自由に設定し、個々のユーザのニーズに合わせて柔軟にデータを構築することが可能になります。以下では、カスタマイズを行うための具体的な作業について説明します。
操作
上で述べたカスタマイズの対象からも明らかなように、カスタマイズ機能による編集は主に、画像アノテーションやノードデータ作成の際に表示されるデータ入力フォームに対して行われます。実際にフォームを編集するためには、JSON形式で記述された設定ファイルをEditorにアップロードする必要があります。以下は、この設定ファイルの全体的な構成(実際のデータは抜いた枠組みのみ)です。
{ "Colors": { "data":{} }, "Prefixes": { "data": [] }, "NodeTypeSelect": { "data": [] }, "EntityTypeSelect": { "data": [] }, "EdgeTypeSelect": { "data":[] }, "CurationTypeSelect": { "data":[] }, "FactoidRelationSelect": { "data":[] }, "EntityData": { "data":[] }, "NodeData": { "data":[] }, "CurationData": { "data":[] } }
一つずつ、説明していきます。
タイプ選択項目の編集
まずはタイプ選択項目の編集から始めましょう。
例としてエンティティデータの作成を取り上げます。Editorの「エンティティを追加」をクリックするとエンティティデータ入力フォームが表示されます。デフォルトでは、タイプの選択肢は以下のようになっているはずです。

これを編集してみましょう。まず、現在は"Object"というタイプであらゆる物理的物体を表すしかありませんが、物体の中でもとくに「武器」を重点的に研究するために、「武器Weapon」を独自のタイプとして設定することにします(ひとまず、「人物」と「武器」のみ選択肢とします)。さらに、"Person"の下に仮に「男性Man」と「女性Woman」というタイプを置くことにします。このような変更を加えるには、先にあげたJSON設定ファイルの"EntityTypeSelect"の中に、以下のようにデータを入力します。
"EntityTypeSelect": { "data": [ { "id": "https://example.com/Person", "label": "Person", "children": [ { "id": "https://example.com/Man", "label": "Man" }, { "id": "https://example.com/Woman", "label": "Woman" } ] }, { "id": "https://example.com/Weapon", "label": "Weapon" } ] },
このように記述したJSONファイルを、Editor左下の「設定を編集」から読み込みます。うまくファイルが読み込まれれば、エンティティデータ入力フォームのタイプ選択項目が以下のように変化するはずです。

これで、エンティティ・タイプのカスタマイズが完了しました。なお、実際のデータ作成のプロセスでは、選択されたタイプからクラスURIを設定し、作成されたデータにrdf:typeの目的語として与えることになりますが、ここで与えるURIについても、上のJSONファイルの中の"id"を編集することで自由に設定できます。
エンティティと同様、「ファクトイドを追加」と「エッジを追加」、画像ビューアの「フォームを表示」から開くデータ入力フォームにもタイプ選択項目があります。ファクトイド・タイプについては"NodeTypeSelect"、エッジ・タイプについては"EdgeTypeSelect"、画像アノテーションのタイプについては"CurationTypeSelect"の内容をそれぞれエンティティと同様に入力することで、タイプ選択肢を編集することができます。なお、JSONテンプレートの中には"FactoidRelationSelect"という項目がありますが、これはファクトイド・ノード間の関係性(事象同士の時系列や因果関係など)を記述する場合にのみ利用されるやや特殊なエッジのタイプ選択肢を編集するためのものです。
データ入力項目の追加
次に、データ入力項目そのものをフォームに追加する方法を説明します。ここでもエンティティデータの作成を例に取りましょう。「エンティティを追加」をクリックするとエンティティデータ入力フォームが表示されますが、デフォルトでは、「Prefix」「Core ID」「Entity Type」「ラベル」という項目のみが並んでいるはずです。これらはいずれもデフォルトの入力項目として設定されており、削除することはできません。「Entity Type」から、"Person"を選択したうえで「データ入力へ」をクリックし、関連情報入力フォームに進んでください。現状では、ここには何も表示されておらず、ただ「作成」ボタンがあるだけだと思います。つまり、現在はデフォルト入力項目以外の関連情報は入力できない状態ということになります。ここに、ファクトイドの中で個々のエンティティがどのような役割で言及されているかを表す「Role」、そして、そのエンティティを表すWikidata等の外部URIを参照する「externalURI」という入力項目を追加してみます。
JSON設定ファイルの"EntityData"の中に、以下のようにデータを入力します。
"EntityData": { "data":[ { "title": "役割を入力", "label": "Role", "model": "roleInput", "type": "text", "attachedType": "https://example.com/Person", "id": "https://junjun7613.github.io/MicroKnowledge/himiko.owl#hasRole" }, { "title": "外部データを入力", "label": "External URI", "model": "externalURIInput", "type": "uri", "attachedType": "https://example.com/Weapon", "id": "https://junjun7613.github.io/MicroKnowledge/himiko.owl#referencesEntity" } ] },
こちらのデータ入力について少し注意が必要ですので、もう少し詳しく説明します。入力したデータのうち、"title"の内容はフォームにおけるテキスト入力ボックスの上に表示されるタイトル、"label"はテキスト入力ボックス内に表示されるラベル、"id"はプロパティとして設定されるURIを設定しています。この三つは、自由に設定してください。
一方、"model"と"type"、そして"attachedType"の入力には注意が必要です。"model"の内容は、データ作成処理の際に、動的な変数の名前として用いられることになります。そのため、必ず半角英字、スペースはなしで入力してください(ハイフン非推奨)。"type"は、最終的なRDF出力において、当該データが文字列型になるか、URI型になるかを定義するものです。現状ではこの二つのみをサポートしているため、必ず"text"か"uri"のいずれかを入力してください。
"attachedType"は、ここで設定したデータ入力項目が、どのタイプが選択された際に入力可能になるかを決定するための記述です。例えば、「Role」という入力項目はタイプが人物であれば入力すべきですが、タイプが「武器」の場合に入力する必要はありません。そのためHIMIKO Editorでは、データ作成の際に選択されたタイプに基づいて必要なデータ入力項目を動的に変更する機能を用意しています。"attachedType"の値としては、(エンティティデータ作成の場合には)"EntityTypeSelect"に記述した各タイプのデータから"id"の値を選択して入力してください。
このようにデータを入力したJSONファイルを読み込むと、先ほどは空欄だった関連情報入力フォームの内容が変化するはずです。

「Role」「externalURI」という項目が追加されていることを確認してください。タイプごとに異なる入力項目を設定していれば、この部分で表示される項目はタイプによって変化することになります。
この、データ入力フォームの編集は、「ファクトイドを追加」と画像ビューアの「フォームを開く」で表示されるフォームについても同様の手順で行うことが可能です。ファクトイドのついては"NodeData"、画像アノテーションについては"CurationData"を追記してください。ただし、ファクトイドについては現状ではタイプ選択に基づく入力項目の動的変更は実装していませんので、"attachedType"の入力は必須ではありません(入力しても、動的な変更は行われません)。
その他の設定
JSONテンプレートには、これまでに説明したものに加えて、"Colors"と"Prefixes"という項目があります。このうち"Colors"は、ファクトイドやエンティティを表すノードと、そのノードがグラフエディタに表示される際の表示色との組み合わせを設定するものです。以下のように、定義したファクトイドおよびエンティティのタイプごとに、色を設定してください。(何も設定されていない場合には、灰色の表示になります)
"Colors": { "data":{ "https://example.com/Person": "blue", "https://example.com/Weapon": "orange" } },
他方、"Prefixes"は、ファクトイドやエンティティのインスタンスを作成する際の名前空間とそのPrefixを設定するためのものです。以下のように名前空間のURLとPrefixを記入してください。
"Prefixes": { "data": [{ "id": "https://junjun7613.github.io/MicroKnowledge/himiko.owl#", "label": "himiko" }, { "id": "https://junjun7613.github.io/MicroKnowledge/factoid/", "label": "factoid" }, { "id": "https://example.com/", "label": "ex" } ] },
これにより、データ入力フォームの「IDを入力」項目にあるprefix選択ボックスから定義したPrefixを選択できるようになるので、ファクトイドやエンティティデータを作成する際には必ず選択するようにしてください。なお、画像アノテーションについては、IIIF Content State APIに基づくURIが自動的に付与されるため、Prefix選択の必要がありません。
まとめと注意点
以上で、カスタマイズの説明は一通り終了です。ここまでのカスタマイズを行うことで、入力するデータのタイプや付与すべき関連情報を自由に設定しながら、それぞれのニーズにあったRDFデータ構築を進めることができるはずです。もちろん、現段階ではJSONファイルを編集しなければならないという技術的な障壁はありますが、この点についても今後、設定ファイルそのものをインターフェイス上で編集するためのツールを開発するなど、改善を進めていきたいと考えています。
最後に、いくつか重要な注意点を示しておきたいと思います。
- 設定ファイルが読み込まれると、データ入力フォームに関わるすべての設定データが一度クリアされ、設定ファイルに基づいて再設定されるため、設定ファイルに未入力の項目があると、その項目の表示でエラーが出てしまいます。設定を変更する際には、必ずすべての項目を埋めた上でアップロードするようにしてください。
- JSONテンプレートにあらかじめ設定されている
"EntityTypeSelect"などのオブジェクト名は絶対に変更しないでください。システム側で読み込む際に、このオブジェクト名を参照しているため、ここが変更されてしまうと、データの読み込みができなくなってしまいます。
HIMIKO Editor for Imageの使い方(基礎編)
先日、ROIS-DS人文学オープンデータ共同利用センター(CODH)のホームページからHIMIKO Editor for Imageという、IIIF画像をアノテーションし、そのアノテーションデータ同士の意味的な関係性をRDF知識グラフとして記述するためのツールを試験的に公開しました。
ただ、ツールを開くだけでは使い方がよくわからないと思うので、このブログで、Editorの使い方をご紹介しようと思います。
まずEditorを開くと、このような画面が表示されます。

HIMIKO Editor for ImageはIIIF準拠の画像を中心にデータを構築するため、まずはIIIF画像データを読み込みます。データ読み込みは、画面右上の「Manifest URL」入力欄にIIIF ManifestのURLを貼り付け、「表示」ボタンをクリックします。
すると、以下のように画像が表示されるはずです。(画像は国立国会図書館デジタルコレクションより)

画像が表示されたら、まずはこの画像にアノテーションを付与していきます。画像ビューアの部分にはOpenseadragonを利用していますが、あわせてAnnotoriousのアノテーション機能も実装しているため、画像上でShiftを押しながらドラッグすることで、以下のように領域選択を行うことができます。
選択された領域は画像上に矩形で表示されます。この矩形をクリックで選択すると、以下のように黄色枠表示になりますので、この状態で、ビューア上部の「フォームを表示」をクリックし、データ入力フォームを開きます。(*必ず、矩形領域をクリックして選択状態にしてからフォームを表示してください。未選択のままフォームからデータを入力するとエラーになります)


ここで表示されるフォームはデータ作成用のフォームですので、選択した部分に描かれている事物のタイプを選択し、「データ入力へ」をクリックします。すると、「詳細データの入力」というフォームに移動しますので、そこでコメントや外部データといった、アノテーションデータに紐付けるべき関連情報(入力可能な関連情報項目は、前画面で選択したタイプによって変化します)を入力します。必要な情報を入力したうえで、「作成」をクリックすると、画像のアノテーションデータが作成されます。実際にアノテーションデータが作成されたかどうかを確認したい場合には、Editorの左下にある「グラフデータを表示」をクリックしてみてください。以下のようなJSONデータが表示され、作成した画像アノテーションデータは"curations"というオブジェクトに格納されているはずです。以下のデータは、データタイプに「Person」、関連情報として「石川五右衛門」というコメントを入力した例です。

このように、まずは画像に描かれている事物について、その領域を選択し、アノテーションデータを作成していきます。
さて、HIMIKO Editorの特長は、単にアノテーションを行うのみでなく、アノテーション同士をデータとして接続し、上の画像の例でいえば「石川五右衛門が刀を持っている」というような意味内容、知識をデータとして記述できる点にあります。次に、この知識グラフの記述プロセスを紹介します。
Editorの左側はグラフ・エディタとなっており、ノードやエッジを描画していくことで、RDFデータを生成できるようになっています。
それでは実際に、「石川五右衛門が刀を持っている」という知識を表現するグラフデータを作成していきましょう。まず、Editor左上に並んでいるボタンから、「ファクトイドを追加」をクリックします。ファクトイドとは、何らかの出来事や状況、関係性といった「現象」そのものを表すデータの単位だと思ってください。つまりここでは、「石川五右衛門が刀を持っている」という状況自体が一つのデータ項目として記述されることになります。「ファクトイドを追加」をクリックすると、以下のようなノードデータ生成フォーム、続いて関連情報入力フォームが表示されるので、ここで必要項目を選択・入力し、「作成」をクリックします。すると、空白であったビューア部分に新たなノードが出現します。


これで、一つの状況を表すデータが生成されたことになります。次に、この状況に関与するヒトやモノの情報を紐付けていきます。まずは、ヒトやモノを表すデータを作成しましょう。Editor左上の「エンティティを追加」をクリックし、新たなデータ入力フォームを開きます。エンティティとは文字通り、ヒトや場所、モノといった、個物に対応するデータ項目を指します。以下のようなデータ入力フォームが現れるので、ファクトイドと同様、必要事項を選択・入力し、「作成」をクリックします。これにより、ビューア部分にエンティティを表すノードが追加で表示されるはずです。


ここで再度、「グラフデータを表示」をクリックしてみましょう。先ほどの"curations"に加えて、"nodes"オブジェクトにも新たにいま作ったデータが追加されているはずです。

次に、作成したファクトイドやエンティティのデータを互いに接続していきます。ノード同士を接続するには、対象となる二つのノードの組みを選択した上で、「エッジを追加」をクリックします。今回の例では、「石川五右衛門が刀を握る」というファクトイドを接続元、「石川五右衛門」というエンティティを接続先にしたいので、ファクトイドノード → エンティティノードという順でノードをクリックし、選択状態にします(選択状態になると、黄色の枠線が現れます)。二つのノードが選択された状態で「エッジを追加」をクリックすると、以下のようなデータ入力フォームが現れるので、必要項目を入力して「作成」します。すると、二つのノードがエッジで結ばれ、その関係性が表示されるようになります。


ここでは、ファクトイドとして表現される現象の「主語subject」として「石川五右衛門」というエンティティが紐づけられていることがわかるでしょう。同様に、「刀」を表すエンティティデータを作成し、ファクトイドと紐づけます。最終的に描画されるグラフは以下のようになるはずです。また、「グラフデータ」の"edges"にもデータが追加されます。


ここまでで、知識グラフの構築が一通り完了しました。ただし、この段階では先ほどの画像アノテーションと、グラフエディタ側で作成したファクトイドやエンティティのデータは接続されていませんので、最後に両者を接続してみます。
この作業はそれほど難しくなく、画像ビューア側で接続したい矩形領域、グラフエディタ側で対応するデータノードをそれぞれ選択(両者とも選択されると黄色枠表示になる)し、エディタ上部の「画像とリンク」をクリックするだけです。例えば以下では、「刀」というモノを表すエンティティデータと、刀を描いた部分を選択した画像アノテーションデータをそれぞれ選択し、リンクしようとしています。

以上の作業で作成された画像アノテーションデータとファクトイド・エンティティデータ、および両者の接続情報は、グラフエディタ上部の「JSONファイルをダウンロード」「TURTLEファイルをダウンロード」から、JSONとTurtleの二つの形式で出力することができます。Linked Dataとして利用する場合にはTurtleでダウンロードし、いずれかのトリプルストアにアップロードすることで、SPARQLによる検索や可視化も直ちに可能になるでしょう。試しに、ダウンロードしたTurtleデータをそのまま神崎正英先生の可視化ツールで表示したものが以下のグラフです。

このように、画像アノテーションデータを含む複雑なRDFデータの作成を支援するHIMIKO Editor for Imageは、単なる画像のアノテーションにとどまらず、そこに描かれたヒトやモノの関係性といった「知識」の構造化をも可能にするツールということができます。
本記事では、HIMIKO Editor for Imageの本当に基本的な操作の部分を説明しました。これだけでも、画像のアノテーションや知識グラフデータの構築をすぐに始めることができますが、限界もあります。それは、画像アノテーションやノード作成の際に表示されるデータ入力フォームにおいて選択できるデータのタイプや入力項目がデフォルトで提供されるものに限られる、という点です。
じつはHIMIKO Editor for Imageはこの点についてもカスタマイズ機能を提供しており、ユーザが自由に入力項目や選択項目を設定して、データを構築することができます。そのため次の記事では、このカスタマイズ機能の操作方法について詳しく説明したいと思います。