DToC: Dynamic Table of Contextsを試す

概要 DToC: Dynamic Table of Contextsを試す機会がありましたので、備忘録です。 https://www.leaf-vre.org/docs/features/dtoc 機械翻訳の結果は以下です。 セマンティックマークアップの威力と書籍のナビゲーション機能を融合させ、電子読書に革新をもたらします。従来の印刷書籍で長年親しまれてきた目次とキーワード索引という概観機能が、全文検索やタグベースのインデックス機能と動的に統合されることで、新たな読書体験を実現します。 最終的に、以下のような可視化を行うことができました。 https://dtoc.leaf-vre.org/view?document=https://dtoc-demo.vercel.app/P-III-b-1189/dtoc.json 対象データ 東洋文庫が所蔵するモリソンパンフレット「Marco Polo’s adventures : The greatest traveller the world has seen.」をサンプルデータとして利用しました。 https://www.toyo-bunko.org/open/show_detail_open.php?targetid=363479 https://www.toyo-bunko.org/morisonp2015/morisonpocr2016_showimg.php?tgfn=P-III-b-1189&tgfn2=01Geo01 背景 以下のワークショップに参加し、DToCの使用方法を教えてもらいました。 https://github.com/LEAF-VRE/dh2025_workshop 以下のチュートリアルも参考になりました。 https://www.leaf-vre.org/docs/training/tutorials/dtoc-tutorial mainとなるxmlを作成する まず、mainとなるxmlを作成します。以下のURLで確認できます。 https://dtoc-demo.vercel.app/P-III-b-1189/main.xml OCR Azure AI Document Intelligenceを用いてOCRを行いました。 https://azure.microsoft.com/en-us/products/ai-services/ai-document-intelligence 校正 & タグづけ OCR結果の校正と、人名や地名のタグ付与にあたり、「Google: Gemini 2.5 Pro」を使用しました。 https://deepmind.google/models/gemini/pro/ このように機械的な処理のため、誤りなどが含まれている可能性が高いですが、DToCで使用するためのTEI/XMLファイルを用意することができました。 index用のxmlを作成する 以下を参考にしました。 https://www.leaf-vre.org/docs/training/tutorials/dtoc-tutorial#step-2-create-an-index このindex作成にも「Google: Gemini 2.5 Pro」を使用し、先に作成したmain.xmlから機械的に作成しました。結果は以下です。 https://dtoc-demo.vercel.app/P-III-b-1189/index.xml JSONファイルを作成する DToCでロードするためのJSONファイルを作成します。この部分はGUIから行うことができました。最終的な結果は以下です。 https://dtoc-demo.vercel.app/P-III-b-1189/dtoc.json まず、以下にアクセスし、GitHubアカウントでログインします。 https://dtoc.leaf-vre.org/ 次に以下にアクセスします。 https://dtoc.leaf-vre.org/view そして、チュートリアル資料などを参考に、必要な項目を入力します。 Documentsには、前のプロセスで作成したXMLファイルのURLを入力します。 Corpus Partsでは、XMLファイルのどの部分を使用するか、を指定します。Curpus Partではmain.xmlのdivタグを、Curpus Indexではindex.xmlのdivタグをXPathで指定しました。 ...

2025年7月16日 · 3 分 · Nakamura

LEAF WriterをNext.jsから使用する

概要 LEAF WriterをNext.jsから使用する方法について紹介します。 デモ 以下のURLからお試しいただけます。 https://leaf-writer-nextjs.vercel.app/ 以下が画面例です。ヘッダー部分がNext.jsを用いて追加した部分です。エディタ部分はLEAF Writerを使用しています。 ソースコードは以下でご確認いただけます。 https://github.com/nakamura196/leaf-writer-nextjs 使用方法 以下に記載があります。 https://gitlab.com/calincs/cwrc/leaf-writer/leaf-writer/-/tree/main/packages/cwrc-leafwriter?ref_type=heads 注意点として、div containerのidをleaf-writer-containerにする必要があります。これを行わない場合、スタイルが崩れることがわかりました。この点は、今後プルリクエストを送りたいと思います。 # c o c n o s n t s t c o c n o t n a t i a n i e n r e r = = d o d c o u c m u e m n e t n . t g . e g t e E t l E e l m e e m n e t n B t y B I y d I ( d ' ( # ' l # e l a e f a - f w - r w i r t i e t r e - r c ' o ) n ; t a i n e r ' ) ; まとめ LEAF Writerの応用にあたり、参考になりましたら幸いです。 ...

2024年10月29日 · 1 分 · Nakamura