vimを使ってRe:VIEWで書き始めるための環境設定をやってみた

はじめに

デジタル出版ツールのRe:VIEWを使ってvimに関する本を書いてみようかと思い立ち、まずは編集環境をと調べてみましたが、検索で見つかるものや書籍で取り上げられている環境は大体以下のエディタが中心でした。

• Atom
• VSCode

Vimの本を書くためにAtomやVSCodeに触るのはなんだかなーと思いましたが、Vimにも次のプラグインがありました。

Re:VIEWのインストールと合わせて、導入までの手続きを書いてみました。

Re:VIEWのインストール

今回利用したRubyのバージョンはrbenv install --listにて表示されたうちの新しめのバージョンとしています。

% rbenv install 2.7.1
Downloading openssl-1.1.1g.tar.gz...
-> https://dqw8nmjcqpjn7.cloudfront.net/ddb04774f1e32f0c49751e21b67216ac87852ceb056b75209af2443400636d46
Installing openssl-1.1.1g...
Installed openssl-1.1.1g to /path/to/.anyenv/envs/rbenv/versions/2.7.1

Downloading ruby-2.7.1.tar.bz2...
-> https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.1.tar.bz2
Installing ruby-2.7.1...
ruby-build: using readline from homebrew
Installed ruby-2.7.1 to /path/to/.anyenv/envs/rbenv/versions/2.7.1

% rbenv local 2.7.1
% gem install review

vim-reviewのインストール

vim向けに作成されたRe:VIRW用プラグインを追加します。

[[plugins]]
repo = 'tokorom/vim-review'

プレビュー用ライブラリのインストール

動的にプレビューする方法は幾つもありそうですが、今回はvim-reviewで上がっているものにしてみました。

brew install fswatch
npm install -g browser-sync

プレビュー用プロセスの開始

試しに適当なプロジェクトを作成してみます。

review-init sample
cd sample

次に、生成処理とプレビュー処理を実行していきます。Terminal上で窓を追加で2つほど開くか、バックグラウンドで実行させましょう。

生成処理

fswatch *.re | xargs -n1 -I{} bundle exec review-compile --target=html && browser-sync reload

上記コマンド実行後にsample.reを編集保存します。するとsample.htmlが生成されます。

プレビュー処理

生成が確認できたら以下のコマンドを実行します。

browser-sync start --server --files *.html

ブラウザが表示されますが、ページが出てこない場合はhttp://localhost:3000/sample.htmlでアクセスします。

その後はreファイルを編集するたびに更新が行われます。

あとがき

技術書典9に向けて書いてみようかなと思いつつも、どうやればいいのかサッパリだったところ、以下のオンラインイベントにて概要がわかり、色々と調査したところでした。

RedPenを使った文章校正等もあるみたいですが、順番に整えていこうと思います。

尚、初めてのサークル参加座学会は7/30 19:00〜20:00にも予定されています。逃していた方はこちらをどうぞ。

参考リンク

• Vimで技術書を執筆する環境 with Re:VIEW + RedPen + prh
• tokorom/vim-review
• Re:VIEW 技術(書|者)のための電子・紙書籍制作ツール