Vscode

概要 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で開きます。 g c i o t d e c l t o e n i e - x h m t l t - p x s s : l / t / - g v i s t c h o u d b e . c o m / n a k a m u r a 1 9 6 / t e i - x m l - x s l t - v s c o d e そして、画面右下のGo Liveをクリックします。 ...

概要 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をインストールします。 g c n i d p t m t c e i l i n o - s n x t e m a l l h - l t x t s p l s t : - / / s g c i o t d h e u b . c o m / n a k a m u r a 1 9 6 / t e i - x m l - x s l t - v s c o d e settings.jsonとtasks.json .vscodeフォルダに、settings.jsonとtasks.jsonを格納しています。 ...

概要 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などの共同編集にあたり、参考になりましたら幸いです。