🐷

TEI/XMLファイルの編集を支援するVSCode拡張機能の使用例

2023/01/13に公開

VS Code

XML

tei

tech

概要

以下のページで、TEI/XMLファイルの編集を支援するVSCode拡張機能に関する内容をまとめています。

本記事では、上記の拡張機能を使った、TEI/XMLファイルの編集方法について紹介します。なお、上記拡張機能は筆者による独自開発のもので、使い勝手などに改善の余地が多々ある状態です。ご使用される際は、この点についてご了解いただけますと幸いです。

拡張機能のインストール

以下の拡張機能を追加します。

無料

Scholarly XML
- https://marketplace.visualstudio.com/items?itemName=raffazizzi.sxml
Auto Close Tag
- https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
TEI Japanese Editor（筆者が独自開発しているもの）
- https://marketplace.visualstudio.com/items?itemName=ldas.vscode-japanese-tei

加えて、以下の2つの拡張機能が、Scholarly XMLにおいて推奨されています。ただ、私の使い方では不便になってしまう場面もあったので、とりあえず任意とします。

Auto Rename Tag
- https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Close HTML/XML tag
- https://marketplace.visualstudio.com/items?itemName=Compulim.compulim-vscode-closetag

有料（参考）

以下はサブスクリプションが必要な拡張機能ですが、入力補完が便利なので使用しています。

GitHub Copilot
- https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

XMLファイルの編集

以下のXMLファイルを使用します。特徴として、こちらの記事で作成した、タグ数を限定したrngファイルを使用しています。また、xenoDataタグ内に、cssを記述しています。今回使用するエディタでは、このcssファイルを編集することで、テキストの編集と並行して、プレビュー表示のスタイルを更新できるようにしています。

<?xml version="1.0" encoding="utf-8"?>
<?xml-model href="https://raw.githubusercontent.com/nakamura196/test2021/main/tei_excel.rng" schematypens="http://relaxng.org/ns/structure/1.0" type="application/xml"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0">
  <teiHeader>
    <fileDesc>
      <titleStmt>
        <title/>
      </titleStmt>
      <publicationStmt>
        <ab/>
      </publicationStmt>
      <sourceDesc>
        <ab/>
      </sourceDesc>
    </fileDesc>
    <xenoData>
      <![CDATA[ 
  <style>
    * {
       overflow-y:auto;writing-mode:vertical-rl;
   }

   lb:before {
       content:'\a';
       white-space:pre
   }

    orig {
      color: red;
    }

    reg::before {
    content: "（";
   }
   reg {
    color: gray;
   }
    reg::after {
      content: "）";
    }

    note {
      display: none;
    }

    persName {
      color: blue;
    }
  </style>
  ]]>
    </xenoData>
  </teiHeader>
  <text>
    <body>
      <pb corresp="#page_22"/>
      <ab>
        <lb xml:id="page_22-b-1"/>
        <seg>
     いつれの御時にか女御更衣あまたさふらひ
          <choice>
            <orig>
       給ける
              <note corresp="#page_22-b-1-20" type="校異">
        給けるーたまふ河
              </note>
            </orig>
            <reg>
       たまふ
            </reg>
          </choice>
     なかにいとやむことなきゝは
        </seg>
        <lb xml:id="page_22-b-2"/>
        <seg>
     にはあらぬかすくれて時めき給ありけりはしめより我はと思あかり給へる御方
        </seg>
        <lb xml:id="page_22-b-3"/>
        <seg>
     〱めさましきものにおとしめそねみ給おなしほとそれより下らうの更衣たち
        </seg>
        <lb xml:id="page_22-b-4"/>
        <seg>
     はましてやすからすあさゆふの宮つかへにつけても人の心をのみうこかしうら
        </seg>
        <lb xml:id="page_22-b-5"/>
        <seg>
     みをおふつもりにやありけむいとあつしくなりゆきもの心ほそけにさとかちな
        </seg>
        <lb xml:id="page_22-b-6"/>
        <seg>
     るをいよ〱あかすあはれなる物におもほして人のそしりをもえはゝからせ給
        </seg>
        <lb xml:id="page_22-b-7"/>
        <seg>
     はす世のためしにもなりぬへき御もてなし也かんたちめうへ人なともあいなく
        </seg>
        <lb xml:id="page_22-b-8"/>
        <seg>
     めをそはめつゝいとまはゆき人の御おほえなりもろこしにもかゝることのおこ
        </seg>
        <lb xml:id="page_22-b-9"/>
        <seg>
     りにこそ世もみたれあしかりけれとやう〱あめのしたにもあちきなう人のも
        </seg>
        <lb xml:id="page_22-b-10"/>
        <seg>
     てなやみくさになりて          <persName>楊貴妃</persName>のためしもひきいてつへくなりゆくにいとはした
        </seg>
      </ab>
    </body>
  </text>
  <facsimile source="https://dl.ndl.go.jp/api/iiif/3437686/manifest.json">
    <surface source="https://dl.ndl.go.jp/api/iiif/3437686/canvas/22" xml:id="page_22">
      <label>
    [22]
      </label>
      <zone lrx="1126" lry="1319" ulx="1044" uly="895" xml:id="page_22-b-1-20"/>
    </surface>
    <surface source="https://dl.ndl.go.jp/api/iiif/3437686/canvas/23" xml:id="page_23">
      <label>
    [23]
      </label>
    </surface>
  </facsimile>
</TEI>

styleの編集

styleの内容を編集してみます。記法は一般的なCSSと同様です。

overflow-y:auto;writing-mode:vertical-rl;は縦書き表示を行うスタイルで、こちらをコメントアウトすることで、通常の横書き表示に戻ります。

また、「楊貴妃」という文字列にpersNameを与えています。この文字色を青色に設定するスタイルを適用していますが、こちらを緑色に変更する例を示します。

これらのスタイルはあくまでテキストデータの作成・編集中に（本拡張機能で）のみ使用されるものなので、色々とお試しいただくことが可能です。

テキストの編集

タグを入力したい箇所で「<」を入力すると、その箇所で入力可能なタグが表示されます。これは拡張機能である「Scholarly XML」と、rngファイルにより有効になっています。なおカスタマイズしたrngファイルを使用することで、限定されたタグ（各プロジェクトで使用するタグなど）のみが表示されています。また各タグの説明も合わせて表示されます。

また次の行で<seg>を入力すると、拡張機能である「Auto Close Tag」の機能により、</seg>が自動入力されます。

<seg>内で「場所を入力してみます。」と入力すると、画面右側のプレビュー画面が更新されます。

「場所」という文字列をplaceNameタグで囲んでみます。場所を選択して、「Ctrl+e」を押すことで、タグの入力フォームが表示され、選択したテキストを当該タグで囲むことができます。

また拡張機能「TEI Japanese Editor」により、ルビを振りたいテキストを選択して右クリックを行うと、「insert ruby」のオプションが表示されます。

これにより、選択した文字列がrubyタグ等で囲まれるため、rtタグのテキストを編集することで、画面右に示すように、プレビュー画面にルビが表示されます。

なお、TEI/XMLのvalidationが働くため、使用できないタグを入力すると、エラーを表示してくれます。これにより、文法をチェックしながら編集を行うことができます。

まとめ

筆者が独自開発しているTEI Japanese Editorの使い方を中心に、TEI/XMLの編集環境の一例を紹介しました。使いにくい点が多々ある状態ですが、参考になりましたら幸いです。

VSCodeを使用することで、Scholarly XMLやGitHub Copilot、さらには共同編集を可能にするLive Shareなど、既存の多くの便利な拡張機能と組み合わせて使用できる点が魅力です。

各プロジェクトで使用するタグセットやそのスタイルを共有しながらTEI/XMLの編集作業を進めることにより、限定されたタグを使用しつつ、プレビューで表示結果を確認することで、タグ入力の障壁を軽減できればと思います。

なお、https://github.dev/ など、web版のVSCodeを使用することで、各ユーザが環境のセットアップを行う必要がなくなり、より簡便に編集環境を用意することができそうです。ただし、2023年1月時点ではScholarly XMLなどの拡張機能がweb版に非対応となっており、現時点でこのような環境を使用することは難しいです。これらの課題が解決された際には、改めて記事にしたいと思います。