Tech

概要 Omeka SにMiradorビューアを追加するモジュールについて紹介します。 GitHubリポジトリは以下です。 github.com Mirador2と3の両方が利用可能です。また、各種プラグインを設定画面から追加することができます。この記事では、画像の回転や左右反転を可能にする「Imgae tools」プラグインを追加する方法を紹介します。 本モジュールを利用するには、Omeka SにIIIFサーバ機能を持たせるか、外部のマニフェストファイルを参照する必要があります。前者の導入方法については、別の記事で紹介予定です。 インストール 特に注意点はありません。 使用方法 モジュールのインストール後、以下に示す各サイトの設定画面において、Miradorの設定を行うことができます。 特に、「Mirador plugins for v3」において、プラグインの追加を行うことができます。画像の回転やフリップなどを可能にする「Image tools」プラグイン等を導入可能です。 導入後、以下のように当該プラグインが表示されます。 Omeka SでMirador 3を使用する際の参考になれば幸いです。

Omeka Sに関する記事をまとめます。（随時更新） Zenn に移行作業中です。最新の記事は、以下をご確認ください。 zenn.dev 利用者向け Omeka Sの導入方法およびモジュールの追加方法 サイト アイテムの新規登録における各サイトへの自動追加の設定について リソース 既存の標準語彙の追加方法 メタデータの言語属性の設定方法 管理 モジュール モジュールのインストール方法 識別子 Clean Urlの使い方 [動画] Clean Urlの使い方 Clean Urlモジュールの不具合と暫定の修正方法 地図 Mappingモジュールの使い方 IIIF関連 IIIFサーバの導入方法 IIIF Serverモジュールにおいて、外部のImage Serverを利用する方法 Omeka S IIIF Serverモジュールを用いたIIIFコレクションの生成 目次を加える（その１：フラットな目次） 目次を加える（その２：階層構造を持つ目次） 目次情報の追加方法の和訳 cors policyの設定方法 [開発] ライセンスプロパティの不具合修正 動的タイル画像生成における画像サイズの上限設定 Miradorの使い方 Omeka Sで利用可能なIIIF対応ビューア [独自開発] IIIF Content Search APIを追加する AWSサーバーレスアプリケーションによるIIIF Image Serverの構築 一括登録 BulkImport CSVファイルを用いたメタデータと画像の一括登録 Bulk ImportによるCSVファイルを用いたメタデータの一括更新 Bulk Importによるリソースクラスの登録方法・設定編集ほか WindowsでBulkImportモジュールを使用する際の注意点 エクスポート OaiPmhRepository：独自語彙の作成 [独自開発] アイテムの詳細画面に各種エクスポートリンクを設置する 検索 Metadata Browse：同じメタデータを持つアイテムを検索する Advanced Search Plus：詳細検索機能を拡張する 日付データに対する範囲検索を可能にする Omeka Sの日本語による全文検索の注意点とMroonga searchモジュール 語彙 Custom Ontology：独自語彙を追加する 動画 TEI/XML XML Viewer：XMLの内容を表示する テーマ Bootstrap 5を用いたOmeka Sテーマ 開発者向け Omeka Sにダミーデータを登録する

Google Drive専用ダウンローダであるgdownについて、以下のエラーが頻発するようになりました。 Access denied with the following error: Cannot retrieve the public link of the file. You may need to change the permission to ‘Anyone with the link’, or have had many accesses. You may still be able to access the file from the browser: 対処方法として、以下のようにgdownをインスールし直すとエラーが解消しました。 !pip install -U –no-cache-dir gdown –pre 同様の事象でお困りの方の参考になれば幸いです。

IIIFマニフェストファイルからTEIのfacsimile要素を作成するプログラムを作成しました。以下のGoogle Colaboratoryでお試しいただけます。 colab.research.google.com IIIFとTEIの連携を検討されている方の参考になりましたら幸いです。

JavaScriptのquerySelector()でxml:idに特定の値を持つ要素を取得する方法についての備忘録です。 具体的には、例えばmyDocという変数に対して、以下の方法で取得できます。この例では、xml:id属性にabcという値を持つ要素を取得します。 myDoc.querySelector("[*|id=‘abc’]") *|（パイプ）idの形で指定する点がポイントです。 JavaScriptでTEI/XMLファイルを扱う場合、xml:id属性の値を使って要素を取得するケースがあります。このxml:id属性について、typeやcorrespといった他の属性と異なり、属性名にprefix「xml:」がついています。そのため、上記のような方法を使用する必要があります。 より良い方法や他の方法もあるかもしれませんが、参考になりましたら幸いです。

Omeka Sにダミーデータを登録するためのCSVファイルを作成するプログラムを作成しました。以下のGoogle Colabからご利用いただけます。 https://colab.research.google.com/drive/1Wy865vh9GpUPyiudu1L2A6RPAPXkGPmO?usp=sharing 実行後、CSVファイルがダウンロードされます。このCSVファイルをCSVインポートモジュールやBulk Importモジュールで使用することにより、以下に示すようなダミーデータを登録することができます。 Omeka Sの動作確認、テーマやモジュール開発時にお役に立てば幸いです。

概要 Omeka Sに地図を追加するMappingモジュールの使い方、特にCSVインポートモジュールを用いた一括登録の方法について説明します。 Omeka S - Mapping モジュールのインストール まず、Mappingモジュールをインストールします。 また、データの一括登録にあたり、CSVインポートモジュールをインストールします。 https://omeka.org/s/modules/CSVImport/ Bulk Importモジュールをインストール済みの場合、当該モジュールを無効化する必要があります。もしくは、以下を参考にパッチの適用等を検討してください。 https://github.com/Daniel-KM/Omeka-S-module-BulkImport#installation データ準備 以下のようなCSVファイルを用意します。 https://github.com/omeka-j/Omeka-S-sampledata/blob/main/mapping.csv 「Resource location」列に緯度経度のデータを入力しています。データの入力方法は何通りかありますが、上記の例では、2つの緯度経度のデータを一つのセルに入力しています。この区切り記号として、今回の例は「|」を利用しています。この記号は、後述の設定画面で選択できます。 また緯度と経度は「/」で区切ります。 データ登録 用意したデータの登録方法について説明します。 まず、画面左側のメニューから「CSVインポート」>「インポート」をクリックし、用意したファイルを選択します。 次の画面において、データのマッピングを行います。「Resource location」列について、プラスボタンから追加オプションを開き、「Resource location」項目から「緯度/経度」を選んでください。 次に、レンチボタンから追加オプションを開き、「多値セパレータを使用する」にチェックを入れてください。一つのセルに一つのデータのみを準備している場合には、本オプションは不要です。 その後、「基本設定」タブに移動して、「多値セパレータ」の値に、「|」を入力します。他の区切り記号を使用している場合には、こちらで変更します。 上記の設定を行ったのち、画面右上の「インポート」ボタンをクリックすることで、以下に示すように、緯度経度の情報を持ったアイテムを登録することができます。 まとめ 本記事では、Mappingモジュールの使用にあたり、CSVインポートモジュールを用いた一括登録の方法について説明しました。 CSVインポートモジュールについては、Bulk Importモジュールと同様に、さまざまなオプションがあります。これらについては、また別の記事でまとめたいと思います。

アイテムの詳細画面に各種エクスポートリンクを設置するモジュールを開発しました。 github.com 本モジュールをインストールすることにより、以下に示すようなエクスポートリンクが表示されます。 具体的には、JSON-LD、テキストデータ、引用、コンテンツ共有、に関するエクスポートボタンを設置します。以下の設定画面から、それぞれ表示／非表示を設定することができます。 本モジュールの出力結果について、Omeka Sのテーマを修正することで、例えば以下に示すようなボタンと機能を実現することができます。（Omeka Sのテーマの修正方法については、別の記事で紹介できればと思います。） 以下のページで設置例をご確認いただけます。 https://diyhistory.org/nakamura196/s/main/item/3 用途が限定されたモジュールですが、同様のニーズをお持ちの方の参考になれば幸いです。 なお、より汎用的な出力モジュールとして、メタデータをCSVやJSON形式で出力可能なBulk Export、引用に関するモジュールであるBibliography、およびコンテンツ共有に関するSharing、などがあります。これらの使用方法について、改めて記事にできればと思います。

概要 IIIFマニフェストにIIIF Content Search APIのURIを追加するOmeka Sのモジュールを開発しました。 github.com IIIF Content Search APIを使用することにより、以下のように、Universal Viewer等でテキスト検索が可能になります。 本モジュールは、Omeka Sとは独立して提供されるIIIF Content Search APIを利用します。そのため、本モジュールを使用するには、このAPIの提供環境を別途用意する必要があります。この環境構築のコストに課題が残りますが、すでにIIIF Content Search APIの提供環境をお持ちで、かつOmeka Sでの利用を検討している方の参考になれば幸いです。 （IIIF Content Search APIの提供環境の構築については、改めて記事にできればと思います。） 背景 Omeka SのIIIF Serverモジュールは、Omeka Sに登録されたメタデータから、IIIFマニフェストファイルなどを生成するモジュールです。Omekaの様々なモジュールを開発されているDaniel-KM氏が主に開発されています。 omeka.org 本IIIF Serverモジュールの使い方については、以下で紹介しています。 youtu.be 本モジュールは、IIIF Presentation API 3.0への対応やIIIFコレクションの出力、目次の生成など、IIIF Presentation APIに関する様々な機能を提供していますが、本記事執筆時点（2022-02-11）において、IIIF Content Search APIに関する機能は提供していません。 なお、今回開発したモジュールとは別に、以下のIIIF Content Search API関連モジュールがあります。こちらはOmeka Sの内部でIIIF Content Search APIの提供環境を構築する大変便利なモジュールですが、PDFファイルに対するOCRテキストの利用が前提となっており、用途が限定的です。 github.com 機能紹介 本モジュールが提供する機能は単純で、以下に示すように、IIIF Content Search APIのURIを格納したプロパティを指定する設定機能を提供します。ここで設定したプロパティにURI形式の値を持つアイテムについて、IIIFマニフェストにIIIF Content Search APIのサービス情報を追記します。 生成されるIIIFマニフェストの例を以下に示します。（Omeka SのIIIF Serverモジュールによって生成された）IIIFマニフェスト内にIIIF Content Search APIのサービス情報が含まれていることを確認できます。 https://iiif.dl.itc.u-tokyo.ac.jp/repo/iiif/d507a810-cff7-4168-bc10-70a32a55920f/manifest ...

◆ 不具合 Omeka S3 に Clean Url モジュールをインストールし、初期設定を行なったにもかかわらず、サイトのアイテム詳細ページなどにおいて、設定したアイテムの識別子が表示されない（Omekaが自動付与するIDがそのまま表示されてしまう）不具合を確認しました。 ◆ 確認したバージョン OmekaS 3.1.1 CleanUrl 3.17.3.3 ◆ 暫定の修正方法 以下の設定画面において、まず「Skip “s/site-slug/” for default site」にチェックを入れて、画面右上の「Submit」を押します。次に、再度「Skip “s/site-slug/” for default site」のチェックを外して、画面右上の「Submit」を押します。この操作により、「Property for identifier」に設定したプロパティのIDがアイテムの識別子として表示されるようになりました。 ◆ まとめ 同様の不具合でお困りの方の参考になれば幸いです。 なお本件について、GitHubのIssueを作成済です。 https://github.com/Daniel-KM/Omeka-S-module-CleanUrl/issues/9

概要 ジャパンナレッジで検索を行うChrome拡張機能を公開しました。 以下のように、選択した文字列をクエリとして、右クリックからジャパンナレッジの検索結果を表示します。 本記事では、この拡張機能の使い方について説明します。 インストール 以下のページにアクセスして、「Chromeに追加」ボタンをクリックしてください。 chrome.google.com 設定 以下のURLをChromeのアドレスバーに入力し、検索条件の設定を行います。入力項目として、「URL」と「その他のクエリ」の2種類があります。 chrome-extension://cppjkneekbjaeellbfkmgnhonkkjfpdn/options.html URL 検索で使用するジャパンナレッジのURLを指定します。ご自身の環境や契約内容に応じて設定してください。「JK Lib」「JK Personal」ボタンをクリックすると、それぞれのURLが入力されます。 また、例えば東京大学ではEZproxyを使い、学外から以下のURLでジャパンナレッジにアクセスすることができます。このような場合は、URLを直接入力してください。 https://japanknowledge-com.utokyo.idm.oclc.org/lib その他のクエリ この項目では、検索文字列（q1）以外のクエリパラメータを入力します。例えば、「ロベール仏和大辞典」のボタンをクリックすると、当該コンテンツ（cids=42200）に検索対象を限定するクエリパラメータが入力されます。 その他の検索条件の指定方法については、ジャパンナレッジの検索結果のURL等を参考にしてください。 検索 検索したい文字列を選択し、右クリックを行うことで、「ジャパンナレッジでXXXを検索」のメニューが表示されますので、そちらをクリックして検索してください。 まとめ ジャパンナレッジを利用する際の参考になれば幸いです。 ソースコード ソースコードは以下でご確認いただけます。 github.com

概要 今回はMirador 3のimage tools（画像の回転など）を初期表示で有効にする方法について説明します。 デフォルトのMirador 3では、Mirador 2ではデフォルトの機能として提供されていた、画像の回転や明度・コントラスト・彩度の調整機能は提供されていません。 これを実現するためには、以下のimage toolsというプラグインを追加する必要があります。 github.com 以下、プラグインの導入方法と、設定方法について説明します。 導入方法 image toolsプラグインの導入方法としては、上記のページの他、以下のリポジトリが参考になります。 モダンなフロントエンドビルドシステム github.com vueでの導入方法 github.com Nuxt.jsでの導入方法 github.com 設定方法 各ウインドウに対して、以下の設定が利用できます。 設定値 タイプ 初期値 説明 imageToolsEnabled boolean false プラグインの表示を有効にする imageToolsOpen boolean false デフォルトでimage toolsを開く 例えば以下のページで、image toolsを初期表示で有効にした例をご確認いただけます。 https://github.com/nakamura196/mirador-integration-vue/blob/master/src/App.vue まとめ Mirador 3の導入の参考になりましたら幸いです。

概要 2021年9月15日時点でOmeka Sのモジュールとして提供されているIIIF対応ビューアをまとめます。 ビューア一覧 Universal Viewer github.com Mirador github.com Diva IIIF Viewer github.com まとめ 以下のページで導入イメージをご確認いただけます。Omeka Sを用いたIIIF画像配信の参考になりましたら幸いです。 diyhistory.org

概要 前回の記事では、Omeka SのIIIF Serverモジュールを用いて、フラットな目次を追加する方法について説明しました。 nakamura196.hatenablog.com 今回は、階層構造を持つ目次を追加する方法について説明します。 公式のマニュアルはこちらにありますが、このマニュアルを和訳した記事も作成しました。不完全な日本語ですが、参考になりましたら幸いです。 nakamura196.hatenablog.com 詳細 前回は、以下の情報を入力することで、フラットな目次を作成しました。 cover,表紙,1 jyo,序,4-6 legend,凡例,6-15 catalogue,總目錄,16-18 toc,目次,19-20 ch1,きりつほ,20-35 ch2,はゝき木,35 各行は、以下の意味を持ちます。 {id}, {label}, {canvasIndexOrRangeId1};{canvasIndexOrRangeId2};...; {canvasIndexOrRangeIdN} ここでは、目次（id: toc）について、その内容を構造化します。 具体的には、まず、19コマ目を目次の内容（id: toc0）として、目次（id: toc）に含まれる形とします。 また、「きりつぼ」（id: ch1）と「はゝき木」（id: ch2）についても、目次（id: toc）に含まれるように修正します。 具体的には、以下のデータを用意します。上記のマニュアルにも記載がありますが、インデントは、階層構造をみやすくするために用いており、モジュール内の処理では無視されます。 cover,表紙,1 jyo,序,4-6 legend,凡例,6-15 catalogue,總目錄,16-18 toc,目次,toc1;ch1;ch2 toc1,内容,19-20 ch1,きりつほ,20-35 ch2,はゝき木,35 このデータをIIIF Serverモジュールの「Property for structures」として設定したプロパティ（今回の例では、dcterms:tableOfContents「Dublin Core: 目次」）の値として登録することで、下図のように、階層構造を持つ目次を実現することができます。 https://diyhistory.org/nakamura196/s/main/item/15 まとめ 今回は、Omeka SのIIIF Serverモジュールを用いて、階層構造を持つ目次を追加する方法について説明しました。今回は単純な階層構造を作成する例を示しましたが、以下のマニュアルページに記載があるような、複雑な階層構造も作成することができます。 https://github.com/Daniel-KM/Omeka-S-module-IiifServer#input-format-of-the-property-for-structures-table-of-contents 本モジュールを用いた、IIIFマニフェストへの目次情報を追加にあたり、本記事が参考になれば幸いです。

概要 Omeka SのIIIF Serverモジュールについて、IIIFマニフェストに目次を加える機能を追加開発しました。以下の、ver 3.6.5.3から本機能が利用可能です。 github.com 本記事では、本モジュールを用いて、目次を追加する方法について説明します。なお、動画でも操作方法を紹介しています。参考なれば幸いです。 youtu.be 詳細 設定 公式の説明は以下にあります。 https://github.com/Daniel-KM/Omeka-S-module-IiifServer#config-options-for-manifest まず、本モジュールの設定画面において、「Property for structures」に指定するプロパティを選択します。ここで選択したプロパティの値に、目次の情報を入力することで、IIIFマニフェストに目次情報を反映させることができます。ここでは、例えば、「Dublin Core: 目次」を選択します。 データ登録 今回は、国立国会図書館で公開されている『校異源氏物語』の一部を例とします。 ここでは、アイテムの登録とBulk Importを用いたIIIF画像の一括登録の方法についても紹介します。Bulk Importの使い方については、以下の記事を参考にしてください。 nakamura196.hatenablog.com アイテムの登録 まず、アイテムを登録します。画面左部のメニューから「アイテム」を選択し、アイテム画面の画面右上部の「新規アイテムの追加」をクリックします。そして、ここでは最低限の情報として、タイトルに「校異源氏物語」、識別子（dcterms:identifier）に「kouigenjimonogatari」を与えます。 画像（メディア）の登録 次に、画像の登録を行います。今回は、IIIF画像を登録する例を紹介します。具体的には、国立国会図書館で配信されているIIIF画像の一部（はじめの35コマ）を登録します。 一括登録用のデータとして、以下のようなCSVファイルを用意します。ポイントとして、列「iiif」にIIIF画像サービスのURL、列「item」に先に入力した「kouigenjimonogatari」を与えます。 https://github.com/omeka-j/Omeka-S-module-BulkImport-Sample-Data/blob/main/media_iiif.csv データの一括登録は、Bulk Importを用います。画面左のメニューから「Bulk Import」をクリックし、「CSV - Medias」をクリックします。そして先に作成したCSVファイルをアップロードして、「Continue」を押します。次の設定画面「Start import」はそのままで、「Continue」>「Start import」を選択して、画像を一括登録します。 アイテムの一覧画面から、先ほど登録した「校異源氏物語」を確認すると、35件の画像が登録されていることを確認できます。 目次の登録 この35件の画像について、目次情報を付与します。ここでは、1コマ目に表紙（id: cover）、4-6コマ目に序（id: jyo）、6-15コマ目に凡例（id: legend）、16-18コマ目に総目録（id: catelogue）、19-20コマ目に目次（id: toc）、20-35コマ目に「きりつぼ」（id: ch1）、35コマ目に「はゝき木」（id: ch2）を与えます。 具体的には、下図のように、プロパティ「目次」を追加して、各行が以下のフォーマットに基づく情報を入力します。 {id}, {label}, {canvasIndexOrRangeId1};{canvasIndexOrRangeId2};...; {canvasIndexOrRangeIdN} または、 {id}, {label}, {canvasIndex1}-{canvasIndexN} 具体的には、以下を入力します。 cover,表紙,1 jyo,序,4-6 legend,凡例,6-15 catalogue,總目錄,16-18 toc,目次,19-20 ch1,きりつほ,20-35 ch2,はゝき木,35 この後、アイテムの公開ページに遷移し、Universal Viewerを確認すると、正しく目次が設定されていることを確認できます。 ...

Omeka SのIIIF Serverモジュールについて、IIIF Presentation APIのバージョン2を使用する際の、ライセンスプロパティにおける不具合を修正しました。 具体的には、以下のIIIF Serverモジュールのライセンスに関する設定において、設定内容がIIIFマニフェストに反映されない不具合を修正しました。 以下の、ver 3.6.5.3から本修正が反映されたモジュールを利用可能です。 github.com 本不具合でお困りの方の参考になれば幸いです。 なお、以下がMerge requestです。 gitlab.com

Omeka S IIIF Serverモジュールの目次情報の追加方法に関するマニュアルの和訳です。公式のマニュアルは以下です。 github.com 本モジュールを用いて、IIIFマニフェストに目次情報を追加する際の参考になりましたら幸いです。 Config options for manifest Input format of the property for structures (table of contents) 構造（目次）のプロパティの入力形式 デフォルトの構造は、iiifメディアの単純なシーケンシャルリストです。 目次を使用して複雑なドキュメントの構造を構築するには、特定のプロパティを使用して、必要なjsonを値に入力するか、次の形式のリテラル値を入力します。各行は構造（目次）の一部です。 {id}, {label}, {canvasIndexOrRangeId1}; {canvasIndexOrRangeId2}; ...; {canvasIndexOrRangeIdN} 例： cover, Front Cover, 1 r1, Introduction, 2; 3; 4; 5 backCover, Back Cover, 6 Range ID（行の最初の部分）は、URIの作成に使用されるRangeの名前です。他のインデックスとの衝突を避けるために、数値であってはなりません。スペース、発音区別符号、またはその他の特殊文字を含まない単純な英数字の名前である必要があります（すべてのコーディング規約において非常に安定しています）。「/」を含めることはできません。とにかく、この名前は最後のuriでURLエンコードされます。 さらに、Range IDはすべてのアイテムで一意である必要があります。 入力を省略した場合、行番号が使用されます。その場合、特定のRange名がないことを示すために最初のコンマを残してください。たとえば上記でr1が指定されていない場合、Range IDはr2になります。Rangeを指すrと2行目を指す2から構成されます。ただし、新しい行が挿入されるとURIが変更されるため、この方法はお勧めしません。 各行の2番目の部分は、章などのRangeのラベルです。空の場合、IIIFマニフェスト内容には記述されますが、IIIF対応ビューアなどでは表示されません。 各行の最後の部分は、現在の範囲に含まれる上位のCanvasまたは上位のRangeのリストであるため、基本的には画像とサブセクションのリストです。 ほとんどの場合、Canvasインデックスはメディアの位置です。iiifで使用されているメディアのみが列挙され、アイテムに添付されているpdf、xmlなどの特定のメディアは列挙されないため、添付メディアのリストのOmeka内部位置とは異なる可能性がある点に注意してください。他のインデックスは、Range ID（各行の最初の部分）のリストにある場合、Rangeインデックスとして管理されます。そうでない場合は、Canvasの英数字の名前になります。 最初の行の最初のRange IDは、ツリーのルートです。ルートは1つだけです。複数のルートがある場合（以下を参照）、すべてのルートをブランチとしてメイン範囲が追加されます。 したがって、このリテラル値から複雑な階層的な目次を作成することが可能です。以下は、不完全で誤った例を使用します。 toc, Table of Contents, cover; intro; r1; r2; backcover cover, Front cover, cover intro, Introduction, 2-5 r1, First chapter, 6; r1-1; r1-2; 12 r1-1, First section, r1-1-1; r1-1-2; illustration1; illus2 r1-1-1, First sub-section, 8-9 r1-1-2, Second sub-section, 9-10 r2, Second chapter, 13 backcover, Back cover, "backcover" illustration1, First illustration non paginated, illus1 illustration3, Third illustration non paginated, illus3 iiif v2のjson出力例： ...

先日、以下の記事で、Nuxt.jsを用いて、Miradorをページ内の特定の領域に埋め込む方法を紹介しました。 nakamura196.hatenablog.com 今回は、Vue.jsなどのフレームワークを使わずに、Miradorを埋め込む方法について紹介します。 具体的には、以下のページのソースコードをご確認ください。 https://nakamura196.github.io/nuxt-mirador/embedded2 上記は単純なHTMLファイルです。 Miradorを画面に埋め込む際、Miradorを表示する要素のID（例：mirador）を指定します。この時、以下のようなCSSを与えることで画面の一部に埋め込むことができます。 #mirador { height: 600px; position: relative; width: 100%; } ポイントは、「position: relative;」です。これを与えないと、heightなどを指定しても全画面で表示されてしまいます。 Mirador 3の利用において、本記事がお役に立つことがあれば幸いです。

概要 本記事では、TEI/XMLを便利に扱うことができるツール「Oxygen XML Editor」において、自動で整形・インデントするルールを変更する方法について紹介します。 特に、行の始まりを示すlbタグの前で改行されるようにすることを目指します。 背景 TEI/XMLを便利に扱うことができるツール「Oxygen XML Editor」において、自動で整形・インデントする機能があります。下図の上部に示しているアイコンです。 本機能を使うことにより、一定のルールに基づいて整形されますが、このルールを編集したくなる場合があります。 例えば、上図は『校異源氏物語』のテキストデータです。行の始まりを示すlb（line beginning）タグがありますが、（私の環境の）デフォルトの整形ルールでは、lbタグが行の途中に入る形で整形されます。 本テキストデータを機械的に処理する際には問題ありませんが、特に人手でテキストデータを作成・編集する際に、lbタグの前で改行されてほしい、というニーズがありました。 整形ルールの編集 Oxygenの「オプション」というメニューから以下の画面を開き、画面左部のナビゲーションから「エディタ」 > 「整形」 > 「XML」を選びます。 下図は、私のデフォルト設定を示します。画面右下の「デフォルト設定」ボタンから、いつでもデフォルト設定に戻すことができます。 これに対して、下図の設定変更を行います。 まず、画面中央部の「要素 間隔」という項目において、右端の「改行」を選び、右下の「追加」ボタンから、lb要素を追加します。この時、「前」という列にチェックが入っていることにより、自動整形時に、lbタグの前で改行されるようになります。 次に、「整形」という項目において、「テキストをそのまま維持」にチェックを入れます。これにチェックを入れないと、マークアップの方法によっては、自動整形するたびに、lbタグの前に空行が入ってしまうことを確認しました。 その他の設定については、必要に応じて試してみてください。 結果 上記の設定を行なった上で自動整形を行うと、下図のように、lbタグの前で改行されるようになりました。 特に人手でTEI/XMLファイルを作成・編集する際に、本記事がお役に立てば幸いです。

概要 以下の記事で、Mirador 3をVueで使用する方法を紹介しました。 nakamura196.hatenablog.com 上記に続いて、今回は、Nuxt.jsでMirador 3を使用する方法を紹介するGitHubリポジトリを作成しました。 github.com 上記リポジトリにおいて、Miradorをページ全体に表示する例に加えて、ページ内の特定の領域に埋め込む例を用意しています。 https://nakamura196.github.io/nuxt-mirador/embedded 本記事では、上記ページに関する説明を行い、Miradorの使い方の一部について紹介します。 詳細 上記のページは、以下について説明することを意図しています。 Miradorを画面の一部に埋め込む プログラムでカンバスを指定する プログラムでZoomを行う それぞれについて説明します。 なお、ソースコードは以下で確認できます。 https://github.com/nakamura196/nuxt-mirador/blob/master/pages/embedded.vue Miradorを画面の一部に埋め込む Miradorを画面に埋め込む際、Miradorを表示する要素のID（例：mirador）を指定します。この時、以下のようなCSSを与えることで画面の一部に埋め込むことができます。 #mirador { height: 600px; position: relative; width: 100%; } ポイントは、「position: relative;」です。これを与えないと、heightなどを指定しても全画面で表示されてしまいます。 また、以下のスタンフォード大学図書館のMirador 3の埋め込みを例として、Configを設定しました。 https://dlmenetwork.org/library/catalog/oai:N%2FA:Manchester~18~18~162~225617 const config = { id: "mirador", windows: [ { id: 'known-window-id', manifestId: this.manifestId, }, ], window: { allowClose: false, allowMaximize: false, allowFullscreen: true, hideWindowTitle: true, }, workspaceControlPanel: { enabled: false, }, } ポイントは、「workspaceControlPanel」を「enabled: false」にしている点や、「allowClose」「allowMaximize」をfalseにしている点ですが、必要に応じてカスタマイズしてください。 ...