TEI Publisher: TEI Publisher Demo Collectionの可視化例①
概要
TEI Publisherの以下のページでは、さまざまな可視化例が紹介されています。
以降、複数の記事にわたって、上記の可視化例を紹介します。
Letter #6 from Robert Graves to William Graves (at Oundle School) November 15, 1957
概要
https://teipublisher.com/exist/apps/tei-publisher/test/graves6.xml
以下のように、地名や人名の一覧、および地図とともにテキストが表示されます。
以下のように説明されています。
A 20th century manuscript letter from Robert Graves where emphasis has been put on visualizing rich encoding of semantic information in the letter, in particular geographic and prosopographical data. The map is displayed with a pb-leaflet component.
機械翻訳
ロバート・グレイブスによる20世紀の写本書簡。書簡中の意味情報、特に地理的・韻律的データの豊富な符号化を視覚化することに重点が置かれている。地図はpb-leafletコンポーネントで表示される。
データ
XMLファイルの特徴です。
teiHeader > profileDesc > abstract
abstractタグの内容が上記の検索ページに表示されるようです。
teiHeader > profileDesc > textClass
以下のような記述があります。これらがファセット検索に使用されていました。
<textClass>
<catRef scheme="#genre" target="#correspondence"/>
<catRef scheme="#form" target="#manuscript"/>
<catRef scheme="#feature" target="#pages"/>
<catRef scheme="#feature" target="#person"/>
<catRef scheme="#feature" target="#place"/>
<catRef scheme="#feature" target="#map"/>
<catRef scheme="#feature" target="#ltr"/>
<catRef scheme="#period" target="#modern"/>
</textClass>
teiHeader > profileDesc > particDesc
<particDesc>内に<listPerson>が記載されています。
<particDesc>
<listPerson>
<person xml:id="GravesWilliam">
<persName>
<forename>William</forename>
<surname>Graves</surname>
</persName>
<birth when="1940">1940</birth>
<sex value="M">male</sex>
<note>Robert Graves' eldest son by Beryl</note>
</person>
<person xml:id="GravesRobert">
<persName>Robert Graves</persName>
<!-- to be completed by the students -->
<note>Robert Graves (1895-1985) was a poet, novelist, mythographer, critic
and historian. Probably best known as the author of
<title>I,Claudius</title>, and <title>Claudius the God</title> and
as a survivor and poet of the Great War, he is one of the great figures
of 20th Century English Poetry and Literature.</note>
</person>
...
teiHeader > profileDesc > settingDesc
こちらには地名の一覧が記載されています。<geo>タグで、経緯度が記載されています。
<settingDesc>
<listPlace>
<place xml:id="Deia">
<placeName>Deya</placeName>
<placeName>Deià</placeName>
<location>
<geo>39.7484 2.64918</geo>
</location>
<location type="geopolitical">
<settlement>Deya</settlement>
<region>Majorca</region>
<region>Balearic Islands</region>
<country>Spain</country>
</location>
<note>Deià is a small coastal village in the Serra de Tramuntana, which
forms the northern ridge of the Spanish island of Mallorca. It is
located about ten miles north of Valldemossa, and it is known for its
literary and musical residents. Its idyllic landscape, orange and olive
groves on steep cliffs overlooking the Mediterranean, served as a draw
for German, English, and American expatriates after the First World
War.</note>
</place>
<place xml:id="Canellun">
<placeName>Canellun</placeName>
<location>
<geo>39.7484 2.64918</geo>
</location>
<location type="geopolitical">
<settlement>Deya</settlement>
<region>Majorca</region>
<region>Balearic Islands</region>
<country>Spain</country>
</location>
<note>Graves' house in Deia</note>
</place>
...
text
本文中での固有表現は、<name>タグが使用され、ref属性を使って、上記のリストで指定されたidを参照しています。また、type属性を使って、人名か地名を区別しています。
<text>
<body>
<pb facs="WG.57.11.15.a.jpg"/>
<opener>
<dateline>
<date when="1957-11-15">November 15, 1957</date>
</dateline>
<salute> Dearest <name ref="#GravesWilliam" type="person">
<abbr>Wm</abbr>
</name>: </salute>
</opener>
...
ODD
ログインが必要かと思いますが、ODDファイルは以下です。
name - model [inline] @type='place'
以下の部分で、イタリックのスタイル使用が定義されています。
確かに、以下のように記載されているYugはイタリックになっています。
for your <name ref="#Yugoslavia" type="place">Yug</name> visa.
name - model [webcomponent] @type='place' and id(substring-after(@ref, '#'), root($parameters?root))/location/geo
一方、上記のような記載がある項目があります。
まず、id(...から始まる部分の内容をGPT-4に教えてもらいました。
この文はXPathと呼ばれるクエリ言語の一部で、XML文書内の特定の要素や属性を選択するために使われます。具体的には、このXPath式は以下のような処理を行います：
-
id(substring-after(@ref, '#'), root($parameters?root))：この部分は、@ref属性からハッシュ記号（#）の後の部分を取り出し（substring-after関数を使用）、その結果をid関数に渡しています。id関数はXML文書内で指定されたIDを持つ要素を見つけ出します。この場合、root($parameters?root)はこの検索を行う文書のルート要素を指定しています。 -
/location/geo：見つかった要素の子要素の中でlocationという要素をさらに検索し、その子要素であるgeoを選択します。
総合すると、このXPath式は、特定の参照IDに基づいて特定の要素を見つけ、その要素のlocationおよびgeoという子要素を選択するために使用されます。これは、XML文書内の特定の地理的位置情報を取得するのに役立つかもしれません。
geoタグを持つ地名を参照している要素の場合、といった感じです。この場合は、以下のようにスタイルが定義されています。
color: #1565c0;
cursor: pointer;
以下の地名などに、このスタイルがあたっています。
また先のODDにおいて、以下のようにParametersが指定されています。
結果、htmlタグは以下のような記載になっていました。nameタグがpb-geolocationタグに変換されており、上記のXPath（もしくはXQuery？）に基づき、属性が設定されています。
<pb-geolocation
class="tei-name4"
longitude="2.64918"
latitude="39.7484"
label="Can Floque"
key="CanFloque"
scroll="scroll"
emit="letter"
duration="1000">
Can Floque
</pb-geolocation>
.tei-name4 {
color: #1565c0;
cursor: pointer;
}
テンプレート
最後に、テンプレートを確認します。以下の当該ファイルがあります。
/db/apps/tei-publisher/templates/pages/letter.html
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"/>
<link rel="shortcut icon" type="image/x-icon" href="resources/images/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="resources/images/favicon-16.png" sizes="16x16"/>
<link rel="shortcut icon" type="image/png" href="resources/images/favicon-24.png" sizes="24x24"/>
<link rel="shortcut icon" type="image/png" href="resources/images/favicon-32.png" sizes="32x32"/>
<link rel="shortcut icon" type="image/png" href="resources/images/favicon-64.png" sizes="64x64"/>
<title data-template="config:app-title"/>
<meta name="description" content="Graves' Letter"/>
<link rel="stylesheet" href="resources/css/theme.css"/>
<script type="module" src="pb-components-bundle.js" data-template="pages:load-components"/>
<script type="module" src="pb-leaflet-map.js" data-template="pages:load-components"/>
<style>
body {
--pb-view-height: calc(100vh - 220px);
}
pb-view {
font: var(--pb-base-font);
}
#view1 {
flex: 3 0;
max-width: 60vw;
margin: 8px 16px;
height: var(--pb-view-height);
overflow: auto;
}
.content-body {
position: relative;
display: flex;
justify-content: center;
margin: 0 10px;
}
aside {
flex: 1 0;
min-width: 360px;
max-width: 480px;
margin-right: 16px;
height: var(--pb-view-height);
overflow: auto;
}
aside pb-highlight {
display: block;
width: 100%;
padding: 0 8px;
}
pb-leaflet-map {
width: 100%;
height: 100%;
}
.toc-toggle, pb-navigation {
display: none;
}
</style>
</head>
<body>
<pb-page data-template="pages:pb-page" unresolved="unresolved">
<pb-document id="document1" data-template="pages:pb-document"/>
<app-drawer-layout force-narrow="force-narrow">
<app-drawer data-template="lib:include" data-template-path="templates/drawer.html"/>
<app-header-layout>
<app-header slot="header" reveals="reveals" fixed="fixed" effects="waterfall">
<app-toolbar data-template="lib:include" data-template-path="templates/menu.html"/>
<app-toolbar data-template="lib:include" data-template-path="templates/toolbar.html"/>
</app-header>
<section class="breadcrumbs">
<pb-view id="title-view1" src="document1" xpath="//teiHeader/fileDesc/titleStmt/title" view="single">
<pb-param name="header" value="short"/>
</pb-view>
</section>
<section class="content-body">
<pb-view id="view1" src="document1" column-separator=".tei-cb" append-footnotes="append-footnotes" subscribe="transcription" emit="transcription"/>
<aside class="places">
<pb-view src="document1" odd="graves" subscribe="transcription" emit="letter" wait-for="pb-leaflet-map">
<pb-param name="mode" value="facets"/>
</pb-view>
</aside>
<aside>
<pb-leaflet-map subscribe="letter" access-token="pk.eyJ1Ijoid29sZmdhbmdtbSIsImEiOiJjam1kMjVpMnUwNm9wM3JwMzdsNGhhcnZ0In0.v65crewF-dkNsPF3o1Q4uw"/>
<!--pb-map api-key="AIzaSyA8_mVF-4N2NRWfQ9y6ADgrkiQgoml3trw" zoom="14" subscribe="letter"></pb-map-->
</aside>
</section>
</app-header-layout>
</app-drawer-layout>
</pb-page>
<div class="splash"/>
</body>
</html>
pb-viewやpb-leaflet-mapが使用されています。pb-viewの2つ目はtranscriptionをsubscribeして、letterをemitしています。またoddにgravesが指定されています。また、pb-leaflet-mapはletterをsubscribeしていることがわかります。
<section class="content-body">
<pb-view id="view1" src="document1" column-separator=".tei-cb" append-footnotes="append-footnotes" subscribe="transcription" emit="transcription"/>
<aside class="places">
<pb-view src="document1" odd="graves" subscribe="transcription" emit="letter" wait-for="pb-leaflet-map">
<pb-param name="mode" value="facets"/>
</pb-view>
</aside>
<aside>
<pb-leaflet-map subscribe="letter" access-token="pk.eyJ1Ijoid29sZmdhbmdtbSIsImEiOiJjam1kMjVpMnUwNm9wM3JwMzdsNGhhcnZ0In0.v65crewF-dkNsPF3o1Q4uw"/>
<!--pb-map api-key="AIzaSyA8_mVF-4N2NRWfQ9y6ADgrkiQgoml3trw" zoom="14" subscribe="letter"></pb-map-->
</aside>
</section>
上記の関係を使って、TEI/XML中の経緯度を含む地名の情報をやりとりしていると思われます。
まとめ
次回は、pb-viewやpb-leaflet-mapの内容について確認してみます。中途半端な記事で恐縮ですが、参考になる部分がありましたら幸いです。
Discussion