EN
ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
ホーム » Tags

VS Code

Visual Studio Codeエディタ

XSLTを使いながらTEI/XMLファイルを編集する

XSLTを使いながらTEI/XMLファイルを編集する

概要 XSLTを使いながらTEI/XMLファイルを編集する方法の一例を紹介します。 関連 以下の記事で、VSCodeの拡張機能を使いながら、XSLTの結果をプレビューする方法を紹介しました。 本記事では、上記の拡張機能を使用せず、より単純にXSLTを使いながらTEI/XMLファイルを編集する方法を紹介します。 拡張機能のインストール VSCodeで以下の拡張機能をインストールします。 Live Server https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Scholarly XML https://marketplace.visualstudio.com/items?itemName=raffazizzi.sxml Auto Close Tag https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag 加えて、以下の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 ファイルのダウンロードなど 以下のサンプルリポジトリを対象にします。 https://github.com/nakamura196/tei-xml-xslt-vscode 以下により、ファイルをダウンロードします。そして、VSCodeで開きます。 git clone https://github.com/nakamura196/tei-xml-xslt-vscode code tei-xml-xslt-vscode そして、画面右下のGo Liveをクリックします。 デフォルトでは、http://127.0.0.1:5500/がブラウザで開かれ、以下のフォルダが表示されます。 そして、teiフォルダ内のexample1.xmlを開くと、以下のように表示されます。 http://127.0.0.1:5500/tei/example1.xml TEI/XMLファイルの編集 VSCodeでTEI/XMLファイルを編集します。 そして、ブラウザで開いているページを更新すると、編集内容が反映されます。 これを繰り返し、TEI/XMLファイルを編集しながらプレビュー結果を確認します。 ファイルの変更 example1.xmlをコピーすることにより、新規のファイルを作成することができます。 またxslファイルは以下のように相対パスで指定されています。 <?xml-stylesheet type="text/xsl" href="../xsl/make-CETEIcean.xsl"?> 新規にxslファイルを作成し、上記の相対パスを変更することにより、他のxslファイルを用いたXSLTを実行できます。 参考 VSCodeでTEI/XMLファイルを編集する場合、Github Copilotなどを使って、AIによるサジェストを受けることができます。 またCursorを使って、AIによるアシストを受けることもできます。XSLファイルの編集にあたっては、AIによるアシストが特に便利でした。 縦書きにしたい。のような自然言語で指示することにより、xslファイルを編集できました。 まとめ 上記の手順はあくまで一例ですが、TEI/XMLファイルの編集にあたり、参考になりましたら幸いです。

2025年1月23日 · 更新: 2025年1月23日 · 1 分 · Nakamura
VSCodeとXSLTを用いたTEI/XMLのリアルタイムプレビュー

VSCodeとXSLTを用いたTEI/XMLのリアルタイムプレビュー

概要 VSCodeとXSLTを用いたTEI/XMLのリアルタイムプレビュー環境を試作したので、備忘録です。 挙動 動作例は以下です。TEI/XMLファイルを編集し、保存すると、ブラウザの表示内容が更新されます。 https://youtu.be/ZParCRUc5AY?si=-aHHi3bIZGWoJYnP 準備 以下の拡張機能をインストールします。 Live Server Trigger Task on Save TEI/XMLを保存した際に、Trigger Task on SaveによってXSLTを実行し、変換されたHTMLファイルをLive Serverで閲覧します。 リポジトリ サンプルコードを以下に格納しています。 https://github.com/nakamura196/tei-xml-xslt-vscode XSLTを行うにあたり、xslt3をインストールします。 git clone https://github.com/nakamura196/tei-xml-xslt-vscode cd tei-xml-xslt-vscode npm install settings.jsonとtasks.json .vscodeフォルダに、settings.jsonとtasks.jsonを格納しています。 tasks.jsonは以下です。xsl/make-CETEIcean.xslを用いて、XSLTを行うタスクを設定しています。 { "version": "2.0.0", "tasks": [ { "label": "Transform XML with XSLT", "type": "shell", "command": "npx", "args": [ "xslt3", "-xsl:xsl/make-CETEIcean.xsl", "-s:${file}", "-o:${fileDirname}/${fileBasenameNoExtension}.html" ], "presentation": { "reveal": "never", "close": true }, "group": { "kind": "build", "isDefault": true }, "problemMatcher": [] } ] } xsl/make-CETEIcean.xslは、CETEIceanで公開されているXSLファイルです。 https://github.com/TEIC/CETEIcean/blob/master/xslt/make-CETEIcean.xsl 次に、settings.jsonです。teiフォルダ以下のxmlファイルに対して、保存時に上記のタスクを実行します。 { "triggerTaskOnSave.tasks": { "Transform XML with XSLT": ["tei/*.xml"] } } これらの設定により、TEI/XMLファイルを保存時に、同フォルダにHTMLファイルが作成されます。 ...

2025年1月15日 · 更新: 2025年1月15日 · 3 分 · Nakamura
Visual Studio Live Shareを用いてTEI/XMLファイルを共同編集する（xmlでなくても可）

Visual Studio Live Shareを用いてTEI/XMLファイルを共同編集する（xmlでなくても可）

概要 Visual Studio Live Shareはリアルタイムの共同開発を可能にするVSCodeの拡張機能です。 https://visualstudio.microsoft.com/ja/services/live-share/ 今回は本拡張機能を使って、TEI/XMLファイルをリアルタイムに共同編集してみます。 デモ動画 共同編集の様子を動画にしました。 https://youtu.be/DzyuJAtzl90 画面右はローカル環境でVSCodeを使用しているユーザ（nakamura196）、画面左はVisual Studio Live Shareによって招待されたユーザ（Guest User）がオンラインのVSCode（vscode.dev）を用いて編集している例です。 1行目はローカルのユーザ（nakamura196）が編集し、1行目はオンラインの共同編集者（Guest User）が編集しています。以下で紹介したTEI/XMLのプレビュー画面も同期されています。 https://zenn.dev/nakamura196/articles/d2733cc49d1239 使い方 Visual Studio Live Shareの使い方は、以下のページを参考にしてください。とても簡単な操作で、共同編集環境を作成することができます。またユーザ毎に「閲覧のみ」「編集可」といった権限の設定ができるので、いろいろな使い方ができます。 https://learn.microsoft.com/en-us/visualstudio/liveshare/quickstart/share 簡単に使い方を紹介します。 招待する側 Visual Studio Live Shareをインストールし、以下のように、画面左のタブから「Live Share」を選択して、「Share」ボタンを押します。 「Invite participants」を押すと、以下のようなリンクがコピーされます。 https://prod.liveshare.vsengsaas.visualstudio.com/join?7D0781A4301C45E7669D4D32CCE870AEBE2B 招待される側 上記のURLにアクセスします。すると、以下のように、ユーザ設定に関するポップアップが右下に表示されます。匿名ユーザとして参加する、すでにアカウントをお持ちであればログインする、などを行います。 その後、以下のように、ホストの承認を待つステータスになります。 ホストが権限を設定することで、招待されたユーザが閲覧または共同編集できるようになります。 上記のデモでは、オンラインのユーザが拡張機能「TEI Japanese Editor」をインストールすることで、プレビュー画面も表示しています。 気づき 別の記事で以下のようなコメントを書きました。 なお、https://github.dev/ など、web版のVSCodeを使用することで、各ユーザが環境のセットアップを行う必要がなくなり、より簡便に編集環境を用意することができそうです。ただし、2023年1月時点ではScholarly XMLなどの拡張機能がweb版に非対応となっており、現時点でこのような環境を使用することは難しいです。 ただ今回の方法を用いると、ローカル環境のユーザ側ではScholarly XMLによるValidationを行うことができ、招待されたユーザはオンラインのVSCodeを使って簡単にセットアップができる、という形になったので、上記の課題を解決する一つの方法になり得るかもしれません。（もちろん、Scholarly XMLがweb版に対応すると解決しますが。） まとめ 今回はTEI/XMLを対象にしましたが、これに限るものではありません。 Visual Studio Live Shareはとても便利な拡張機能です。TEIの学習の際などにも有用な環境になると思います。 TEI/XMLなどの共同編集にあたり、参考になりましたら幸いです。

2023年1月19日 · 更新: 2023年1月19日 · 1 分 · Nakamura