概要

「Peripleo」を使う方法を調べましたので、備忘録です。「Peripleo」は以下のように説明されています。

Peripleo is a browser-based tool for the mapping of things related to place.

https://github.com/britishlibrary/peripleo

今回は以下の記事で紹介した「れきちず」と組み合わせて、使用する方法について紹介します。

成果物

以下のURLでお試しいただけます。

https://nakamura196.github.io/peripleo/

リポジトリは以下です。

https://github.com/nakamura196/peripleo

本ブログでは、以下の『東京帝國大學本部構内及農學部建物鳥瞰圖』(東京大学農学生命科学図書館所蔵）をサンプルデータとして使用します。

https://iiif.dl.itc.u-tokyo.ac.jp/repo/s/agriculture/document/187cc82d-11e6-9912-9dd4-b4cca9b10970

背景

以下の会議に参加し、「Peripleo」について教えていただきました。「Peripleo」を開発してくださっている関係者の皆様、会議を開催してくださった皆様、また使用方法を教えてくださったGethin Rees氏に感謝いたします。

http://codh.rois.ac.jp/conference/linked-pasts-10/

基本的な使い方

以下に記載があります。

https://github.com/britishlibrary/peripleo?tab=readme-ov-file#installation-guide

今回は、『東京帝國大學本部構内及農學部建物鳥瞰圖』のデータを利用するにあたり、カスタマイズした点について紹介します。

データの準備

以下のようなスプレッドシートを用意します。

https://docs.google.com/spreadsheets/d/1ZZJZL0K4cBOc0EgMHNV9NQ56C_fcZm0eceBg_OPmxe4/edit?usp=sharing

灰色のセルは不要な列です。

データの準備ができたら、CSV形式でダウンロードします。

JSON形式への変換

Locolligoというツールを用いて、CSVのデータをJSON形式のデータに変換します。

https://github.com/docuracy/Locolligo

まず、以下にアクセスします。

https://docuracy.github.io/Locolligo/

CSVファイルをアップロード後、「Assign CSV Columns」を押すと、以下が表示されます。

予約語をCSVのヘッダーに使用しておくと、手動でマッピングする必要がないようでした。うまくマッピングされなかった場合には、手動で設定します。

なお、予約語は以下で確認できました。

https://github.com/docuracy/Locolligo/blob/main/js/data-converter.js

fu$v]n(a[[[[[[[[[[[[[[[[[;c'r'''''''''''''''''t#(@ppgggnllddddtt{iaaiirreeeaiieeeeyycossgdooooomnnppssppunssn'ppmmmekkiicceesiio,eeeeesssccrrsstaggr'rrttt[[[ttii[[osnneittrrr000iipp00ms'm)diiyyy]]]oott]]}i)e'eee......nnii..'g.n]nsscccttissooil]nrt,t..ooooyd[[nnda(eOit%oooppe00sseb)mpfi%rrroen]][[ne{otit%dddn't..00tlviel'iiiy]i@t]]i'eore]nnnm,fii..f]Cn',aaa'idt@vi,lsu,ttt,e'liaeau'eee'r]edlrs=itssst',''u'sdi'[[o]]]e]([|t,01p,,,','il']]o]tdec''n,ho,,yr@no''moiarll'bdmdoa]''eint,)]|ngi;,laitattubeudesdel|e|'c|l]ola,ootrn|dgns|lrOntSghG|iBen'ag]s|,tsionugt|hwiensgt|iYn'g]|,X'],

結果をダウンロードすると、featuresに以下のようなアイテムが格納されたデータを取得できます。

{},"""}"}"]"]"]@tp,g,d,t,liyreeyidpooppn"ep"m""]i{}e{}k{}:"etetccss:rityot"""ttrpoi::h"ilyer13o""""tFee""d35n@t[l[ites"::i9.siiadpa":n.7"dtbest:{"a71:"len:u"Pt60:elt/r{医oe29[""i/e学is20"::fu"部n"93hiv,　t:47t""e-第"9t東医rv二,[,p京学"4号s大部:.館:学"n"/農"e/学hti生tli命tii科pff学sy.研:.d究/al科/p.・epi農n/t学.#c部w?.imu/ka-intGpiorefkadeydisouat.a.=atohcert.gtjS/ppcws/hi:iok/ioi/il/nfGa/ork2faa/dmaAuuggarrrtaiie1cc_9uuS6llc.tthguuoirrotealh_l_urobeaf.%n_i2dMoFe/nLdpoiioufcr_eittnaaSeltc__eiapmenrondonc_/oeFucsashcaFugkaleact/nuyazl_gutor%yfi2_cFoMu0fel0dt0Aiu2gcr.rietin/icemfu,a/l_n1tUi1unf1rie2evs6,et.r.0Tsj,his8eto1yn2U_&4nox.ify0v_w,eTh1ro=0sk10iy10to1,y"2160o.0f00%/T26oC0k80y1,2"40./0d%e2fCa1u0l0t0.%j2pCg1"0,00",

ビューアの起動

!

以下、ソースコードをローカルにダウンロードして作業する方法を紹介しますが、冒頭で紹介したperipleoのREADME.mdに記載があるとおり、GitHubのGUI上でファイルの更新などをしていただいても大丈夫です。

gcpidyttphceolrnoinp-elmehohttttpps.:s/e/rgvietrhub.com/britishlibrary/peripleo.git

そして、以下にアクセスすると、デフォルトの表示内容を確認できます。

http://localhost:8000/docs/

ローカルで実行される場合で、gitやpython -m http.serverがうまく動かなかった場合は、インターネット上にある他の記事などを参考にしてください。

ビューアの設定変更

データの更新

まず、先ほどダウンロードしたJSONの内容をコピーして、以下のファイルを上書きします。

docs/data/VisitPlus-UK.lp.json

ブラウザをリロードの上、東京のほうに移動すると、以下のように、独自のデータが表示されていることを確認できます。

設定の更新

ビューアの設定は以下にあります。

docs/peripleo.config.json

以下のように変更します。

{}"]""]i,md,n1313aa{}i3535ptt9.9._a""""i.7.7s"nfsaa7071t:aortl5767ymrct_7676l[em"rb3,3e"a:io,,":tbu:""un":.td"東/ish京"do"t帝Lan:t國It"p大Na:[s學K/:本EV"/部Di東/構_s京m内Pi大i及Lt学e農AP農r學Cl学u部Eu生n建Ss命e物"-科.鳥,U学g瞰K研i圖.究t"l科h,p・u.農bj学.s部ioon//"r,Gerkaidcuhaitzeu-Sscthyoloel/sotfylAegsr/iscturleteutr/asltyalned.jLsiofne",Sciences/FacultyofAgriculture,TheUniversityofTokyo"

まず、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) に準拠することで、このようなアプリが使えるようになり、大変便利だと思いました。

https://github.com/LinkedPasts/linked-places-format/blob/master/README.md