Visual Studio Code（VSCode）でVersioning Machine（VM5.0）を使用する

概要

Versioning Machine（VM5.0）は、校異情報の可視化を行うアプリケーションです。

http://v-machine.org/

ここでは、Visual Studio Code（VSCode）を用いて、自身が作成したTEI/XMLファイルを本アプリケーションで表示する方法について説明します。

なお、表示対象となるTEI/XMLファイルは、以下のように、<listWit>タグで校異情報が記述されているものです。

<TEI xmlns="http://www.tei-c.org/ns/1.0">
  <teiHeader>
    <fileDesc>
      <titleStmt>
      ...
      </titleStmt>
      <publicationStmt>
      ...
      </publicationStmt>
    <sourceDesc>
      <listWit>
        <witness xml:id="WA">
          <title xml:lang="ja">ヴァイマル版ゲーテ全集（略称WA）</title>
          <title xml:lang="de">Goethes Werke. herausgegeben im Auftrage der Großherzogin Sophie von Sachsen</title>
        </witness>
        <witness xml:id="UTL">
          <title xml:lang="ja">東京大学総合図書館所蔵のゲーテ自署付書簡</title>
          <title xml:lang="de">Der Brief von Goethe an Ludwig Wilhelm Cramer vom 29. Dezember 1822 im Besitz der Universitätsbibliothek Tokio</title>
        </witness>
      </listWit>
      <msDesc sameAs="#UTL">
	...

後述しますが、本記事では以下で公開されている、東京大学総合図書館所蔵のゲーテ自署付書簡のテキストデータを使用します。

https://utda.github.io/goethe/data/xml/goethe.xml

ソースコードのダウンロード

以下のページにアクセスします。

http://v-machine.org/download/

そして、以下の「Click here」をクリックします。

Click here to download the latest or earlier versions of the Versioning Machine.

以下のように、Google Googleフォームが表示されるため、必要事項を入力して送信します。

以下のページが表示されます。

上記ページのリンクをクリックすると、さらに以下のページに遷移し、zipファイルがダウンロードできるリンクが表示されます。

Visual Studio Code

ダウンロードしたzipファイルを展開します。そして、Visual Sudio Codeを開き、画面左の「エクスプローラー」アイコンを押し、「フォルダーを開く」ボタンを押す。

以下のように、Versioning MachineのフォルダをVSCodeで開くことができました。

拡張機能「Live Server」のインストール

本記事では、VSCodeの拡張機能「Live Server」を用いて、ローカルサーバを起動します。

画面左の「拡張機能」のアイコンをクリックして、検索フォームに「live server」などと入力します。

本拡張機能をインストールすると、画面の右下に「Go Live」という文字列が表示されます。

上記をクリックすると、 http://127.0.0.1:5500/index.html のようなURLでブラウザが起動します。

Versioning Machine

以下のように、Versioning Machineが起動します。

メニュー欄にある「Sample Texts」から、表示例をご確認いただけます。例えば、以下のリンクをクリックすると、

http://127.0.0.1:5500/samples/prophecy_of_merlin.xml のようなURLで、以下のページが開きます。

上記は、samplesフォルダ内のprophecy_of_merlin.xmlファイルを表示している例です。このようなサンプルファイルを参考に、自身が作成したファイルをVersioning Machineで可視化することができます。

自身が作成したファイルを使う

ここでは以下で公開されている、東京大学総合図書館所蔵のゲーテ自署付書簡のテキストデータを使用します。

https://utda.github.io/goethe/data/xml/goethe.xml

本ファイルをダウンロードして、先のsamplesフォルダに格納します。

そして、<?xml-stylesheet href="../src/vmachine.xsl" type="text/xsl" ?>という行を追記します。

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="../src/vmachine.xsl" type="text/xsl" ?>
<?xml-model href="http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_all.rng" type="application/xml" schematypens="http://purl.oclc.org/dsdl/schematron"?>
<?xml-model href="tei_all_ja_450.rnc" type="application/relax-ng-compact-syntax"?>
<TEI xmlns="http://www.tei-c.org/ns/1.0">
   <teiHeader>
      <fileDesc>
         <titleStmt>
            <title xml:lang="ja">東京大学総合図書館所蔵のゲーテ自署付書簡 [Letter] Weimar, 29. Dcbr. 1822 [to L. W. Cramer]（WA IV-36, S. 249対応） </title>
 ...

結果、以下のようなURLにアクセスすることで、自身が作成したTEI/XMLを可視化することができました。

http://127.0.0.1:5500/samples/goethe.xml

その他

先の画面では、いくつかの画像へのリンク切れが発生しています。

これに対応するために、src/vmachine.xslのファイルについて、以下に挙げた文字列の置換を行います。

変換元の文字列	変換先の文字列
vmachine-Dateien/menuArrowUp.htm	../vm-images/arrowup.png
vmachine-Dateien/menuArrowDown.htm	../vm-images/arrowdown.png
vmachine-Dateien/closePanelButton.htm	../vm-images/closePanel.png

結果、以下のように、リンク切れなく、正しく表示されます。

まとめ

今回作成したフォルダをサーバにアップロードすることで、外部公開を行うことも可能です。

Versioning Machineの利用にあたり、参考になりましたら幸いです。

またVersioning Machineを提供してくださっている方々に感謝いたします。