Windows 7上に構築したRe:VIEW環境をVisual Studio Codeから利用する

背景

技術系同人誌 Advent Calendar 2017 7日目に「TeXとRubyだけでWindowsにRe:VIEW環境を構築した話」という題目で，Windows 7にRe:VIEW環境を構築する方法を書きました．W32TeXとRubyのインストーラをダウンロードしてそれぞれを個別にインストールし，コマンドプロンプトからgemでRe:VIEWをインストールする方法でした．

本記事では，Visual Studio CodeからRe:VIEWを利用する方法を説明します．WindowsでRe:VIEW環境を構築する話は色々と見つかりますが，一方で執筆環境を整える話は全く見当たりません¹ので，書く価値はあると考えています．
なお，本記事では先述の方法でRe:VIEWをインストールしていることを前提としています．

Re:VIEW執筆環境の構築

Visual Studio Code

Visual Studio Code（以降ではVSCodeと略します）はMicrosoft社が公開しているオープンソースのエディタです．拡張機能を利用することで様々な言語に対応し，コンパイルやデバッグを行うことも可能です．

インストールは簡単です．Microsoft社の公式ページからインストーラをダウンロードし，それを実行するだけです．ダウンロードに時間がかかるかもしれません．

Re:VIEW拡張機能のインストール

VSCodeを起動すると，画面横にサイドバーが表示されます．サイドバーの拡張機能のアイコンをクリックすると，拡張機能の検索ボックスが表示されます．検索ボックスにreviewと入力して検索すると，いくつか候補が出てきます²．このうち，atsushienoさんが作成しているRe:VIEW language support for Visual Studio Codeをインストールします．インストールが完了すれば環境構築は終了です．

執筆とPDF出力

Re:VIEWドキュメントフォルダの読込

本Advent Calendar 2017 7日目の記事では，コマンドプロンプトで

review-init reviewSample

を実行してreviewSampleというドキュメントを作成しました．ドキュメントの本体はreviewSample.reなので，これをVSCodeにドラッグ＆ドロップして編集すればよいのですが，複数のファイルに分けて編集したい時など，いちいちドラッグドロップしなければならないのは煩わしいのです．Re:VIEWでは複数ファイルをまとめるためにcatalog.ymlを編集しますし，文書のタイトルや著者などの変更はconfig.ymlを編集します．加えて，Windows 7でW32TeXを使う場合は，config.ymlのdvioptionsを編集しなければなりません．

Re:VIEWではドキュメントが一つのフォルダにまとめられているので，これをVSCodeで開きます．サイドバーからエクスプローラを選択すると，フォルダーを開くというボタンが表示されます．これをクリックして，reviewSampleフォルダを開きます．

そうするとフォルダの中身が全て読み込まれます．ここまでできたら，ファイル→名前を付けてワークスペースを保存を選択して保存しておきましょう．

何らかのプログラミングに関係する同人誌を執筆する場合，VSCodeに当該プログラミング言語のコンパイル・デバッグ環境を整えておけば，Re:VIEWドキュメントのフォルダにサンプルコードを置くことで，サンプルコードの編集と原稿の執筆をシームレスに切り替えられるようになるかもしれません．

執筆とプレビュー

読み込まれたフォルダの中からreviewSample.reをシングルクリックすると編集ウィンドウが開きます．試みに，テストという名前の章タイトルを追加してみました．

この状態で，編集ウィンドウ右上にあるShow previewをクリックすると，編集画面が2分割され，仕上がり結果が表示されます．

あくまでプレビューなので，Re:VIEWの処理系を通してPDFとして出力した場合とは見た目が異なりますが，入力した命令が正しいかどうかや所望の文書構造になっているかの確認は十分に可能です．

PDFの出力

ある程度文章が書けたら，PDFファイルに出力してできばえを確認します．Re:VIEWで文書pdfを作成するには，review-pdfmakerコマンドを使います．コマンドを実行するためにいちいちコマンドプロンプトを起動する必要はありません．VSCodeの統合ターミナルを利用してコマンドを実行できます．

表示→統合ターミナルをクリックすると，ウィンドウ下部にターミナルが現れます．開いているディレクトリがカレントディレクトリになるのでそのままコマンドを実行できます．

review-pdfmaker config.yml

を実行してください．

コンパイルが実行され，エラーがなければbook.pdfというPDFファイルが出力されます³．

ここでreview-pdfmakerが認識されない場合は，

C:\Ruby24-x64\bin\setrbvars.cmd

を実行すると，Ruby用の環境変数が設定され，実行できるようになります⁴．

Windowsでは，コマンドの代わりにファイル名を入力して実行するとそのファイルを開くことができるので，コンパイルが成功したら，

book.pdf

を実行してみてください．PDFファイルに関連づけられたアプリケーションが起動し，book.pdfが読み込まれます．著者の環境では，book.pdfが読み込まれた状態でAdobe Acrobatが起動します．

補足

PDFファイルをVSCodeで開いておき，review-pdfmakerを実行する度に再読込してくれるとよいのですが，今のところはできないようです⁵．

Re:VIEW language support for Visual Studio Codeはまだ完璧ではありません．私が使った範囲では，異なるファイルの章や節を参照しようとしても認識できませんでした．LaTeXの数式を埋め込む命令@<m>{}も未対応のためかTODO:と表示されます．

まとめ

Windows 7上に構築したRe:VIEW環境をVisual Studio Codeから利用して，執筆からPDF出力するまでの流れを説明しました．

1. Visual Studio CodeにRe:VIEW拡張機能をインストールし，
2. ドキュメントフォルダを開いてワークスペースを作り，
3. 統合ターミナルからreview-pdfmakerを実行します．

できあがったPDFファイルは，そのままファイル名をターミナルに入力することで，関連づけられたアプリケーションで開くことができます．

Windowsのアプリケーションはコマンドが絡むとどうしてもコマンドプロンプトと行き来しなければならなくなるのですが，Visual Studio Codeはそれがなく，Visual Studio Codeだけで作業を完結できるのがいいところです．

本記事の手順を詳細に解説し，さらに解像度の異なる画像への切り替えとそれに伴うターミナルの使い方，Visual Studio Codeでの注意点をまとめて，親方Projectさんの新刊に寄稿しています⁶, ⁷．

アウトプット環境を整えてよいプログラミングライフを！

1. Re:VIEW環境が構築できたらあとはよしなに，ということでしょうか． ↩

2. reviewという単語は（特に技術系では）一般的であるため覚えやすいのですが，検索には向いていないように感じます． ↩

3. 出力ファイル名を指定しない時の標準のファイル名です．
   ↩

4. ディレクトリ名Ruby24-x64はインストールしたRubyのバージョンによって変化する可能性があるので，適宜読み替えてください． ↩

5. LaTeX用の拡張機能であるLaTeX Workshopでは，ファイルを保存すると裏でコンパイルをしてくれたり，Visual Studio Code内で作成したPDFファイルを確認したりできます． ↩

6. 親方Project編，ワンストップ！技術同人誌を書こう，コミックマーケット93，1st day-東3-カ41b，親方Project，2017． ↩

7. 親方Project編，ワンストップ！技術同人誌を書こう，コミックマーケット93，3rd day-東4-リ05b，Clear-mint，2017． ↩