Peripleoを試す
概要
「Peripleo」を使う方法を調べましたので、備忘録です。「Peripleo」は以下のように説明されています。
Peripleo is a browser-based tool for the mapping of things related to place.
今回は以下の記事で紹介した「れきちず」と組み合わせて、使用する方法について紹介します。
成果物
以下のURLでお試しいただけます。
リポジトリは以下です。
本ブログでは、以下の『東京帝國大學本部構内及農學部建物鳥瞰圖』(東京大学農学生命科学図書館所蔵）をサンプルデータとして使用します。
背景
以下の会議に参加し、「Peripleo」について教えていただきました。「Peripleo」を開発してくださっている関係者の皆様、会議を開催してくださった皆様、また使用方法を教えてくださったGethin Rees氏に感謝いたします。
基本的な使い方
以下に記載があります。
https://github.com/britishlibrary/peripleo?tab=readme-ov-file#installation-guide
今回は、『東京帝國大學本部構内及農學部建物鳥瞰圖』のデータを利用するにあたり、カスタマイズした点について紹介します。
データの準備
以下のようなスプレッドシートを用意します。
灰色のセルは不要な列です。
データの準備ができたら、CSV形式でダウンロードします。
JSON形式への変換
Locolligoというツールを用いて、CSVのデータをJSON形式のデータに変換します。
まず、以下にアクセスします。
CSVファイルをアップロード後、「Assign CSV Columns」を押すと、以下が表示されます。
予約語をCSVのヘッダーに使用しておくと、手動でマッピングする必要がないようでした。うまくマッピングされなかった場合には、手動で設定します。
なお、予約語は以下で確認できました。
https://github.com/docuracy/Locolligo/blob/main/js/data-converter.js
function assign(){
$('#assign').removeClass('throb');
var assignmentOptions = [
['(ignore)'],
['@id','identifier|uuid|id|@id'],
['properties.title','title|name|label'],
['properties.%%%'],
['geometry.coordinates','coordinates|coords|OSGB'],
['geometry.coordinates[0]','longitude|long|lng|easting|westing|X'],
['geometry.coordinates[1]','latitude|lat|northing|southing|Y'],
['names[0].toponym','toponym'],
['links[0].type'],
['links[0].identifier'],
['depictions[0].@id'],
['depictions[0].title'],
['descriptions[0].@id'],
['descriptions[0].value'],
['types[0].identifier'],
['types[0].label'],
['{custom}']
];
結果をダウンロードすると、featuresに以下のようなアイテムが格納されたデータを取得できます。
{
"@id": "https://uv-v4.netlify.app/#?manifest=https://nakamura196.github.io/portal_pro/usage/agriculture/manifest.json&xywh=11126.0%2C8124.0%2C1000%2C1000",
"type": "Feature",
"properties": {
"title": "医学部 第二号館"
},
"geometry": {
"type": "Point",
"coordinates": [
139.7622949,
35.7109037
]
},
"depictions": [
{
"@id": "https://iiif.dl.itc.u-tokyo.ac.jp/iiif/2/agriculture_re%2Fnou_tatemonochokanzu%2F0002.tif/11126.0,8124.0,1000,1000/600,/0/default.jpg",
"title": "東京大学農学生命科学研究科・農学部 / Graduate School of Agricultural and Life Sciences/Faculty of Agriculture, The University of Tokyo"
}
],
"types": [
{
"label": "医学部"
}
],
"links": [
{
"identifier": "https://en.wikipedia.org/wiki/Graduate_School_of_Medicine_and_Faculty_of_Medicine,_University_of_Tokyo"
}
]
},
ビューアの起動
git clone https://github.com/britishlibrary/peripleo.git
cd peripleo
python -m http.server
そして、以下にアクセスすると、デフォルトの表示内容を確認できます。
ローカルで実行される場合で、gitやpython -m http.serverがうまく動かなかった場合は、インターネット上にある他の記事などを参考にしてください。
ビューアの設定変更
データの更新
まず、先ほどダウンロードしたJSONの内容をコピーして、以下のファイルを上書きします。
docs/data/VisitPlus-UK.lp.json
ブラウザをリロードの上、東京のほうに移動すると、以下のように、独自のデータが表示されていることを確認できます。
設定の更新
ビューアの設定は以下にあります。
docs/peripleo.config.json
以下のように変更します。
{
"initial_bounds": [
139.7573,
35.7076,
139.7673,
35.7176
],
"map_style": "https://mierune.github.io/rekichizu-style/styles/street/style.json",
"data": [
{
"name": "東京帝國大學本部構内及農學部建物鳥瞰圖",
"format": "LINKED_PLACES",
"src": "./data/VisitPlus-UK.lp.json",
"attribution": "東京大学農学生命科学研究科・農学部 / Graduate School of Agricultural and Life Sciences/Faculty of Agriculture, The University of Tokyo"
}
],
...
}
まず、initial_boundsを東京大学周辺に変更します。
また、map_styleを「れきちず」に変更します。
さらに、attributionも変更します。
この結果、以下のように、「れきちず」上に独自データが表示されます。
機能紹介
depictions[0].@idを設定したことにより、サムネイル画像が表示されます。リンク先は、identifierに設定した値が使用されます。
拡大表示すると、depictions[0].titleに設定した文字列が表示されます。
また、links[0].identifierに設定したdbpediaへのリンクに基づき、Related Web Resourcesが表示されます。
さらに、types[0].labelの値に基づき、絞り込み検索が可能です。
まとめ
不正確・不十分な説明もあるかもしれませんが、参考になりましたら幸いです。
Linked Places Format (LPF) に準拠することで、このようなアプリが使えるようになり、大変便利だと思いました。
Discussion