読者です 読者をやめる 読者になる 読者になる

エンジニアをリングする

プログラをミングしたり。

my web site twitter

Re:VIEW導入 & Re:VIEW Live Reload作った

最近ちょっと書籍形式の文章を書く機会があり、良い機会なのでたびたび耳にしていたRe:VIEWというツールを触ってみました。

Re:VIEWとは

書籍を書くことに特化したマークアップ言語&ビルドツールという認識。
「れびゅー」と読むそうです。

触る前は何がいいのかあまりよくわかっていなかったのですが、以下の記事を読んで、触ってみたい!と思いました。
TypeScript in Definitelyland 発行

あとRe:VIEWそのものの説明のスライドがこちらにあります。
書籍制作フローを変える。「ReVIEW」という解。〜マークアップと自動組版と、時々、電子書籍〜

確かにテキスト管理はGitでしたいし、専用のソフトウェアがないと開けない、みたいなのは嫌だからこういう方針は素晴らしい。
でもマークダウンのほうがメジャーだし書き慣れてるしマークダウンでいいのでは・・・?という気持ちも。

ただ、実際に触ってみると、やはり書籍向けのテキストを書くならRe:VIEW記法で書いていったほうが便利だ、という実感を得ました。
最初から書籍にする原稿を執筆することを想定して作られたツールだと思うので、餅は餅屋と言った感じです。
具体的には

  • 見出しに自動で通し番号がふられていく
  • 別ディレクトリの画像を参照でき、ビルド時に自動で埋め込める。倍率を指定したりキャプションもつけられる
  • 画像やコード埋め込みに自動で番号をふれて、本文中からIDで参照できる
  • 脚注・コラムなどを扱える
  • 章ごとのファイルのほか、まえがき・あとがき・奥付にも対応している
  • まとめてePubで出力できる(簡単に電子書籍作れちゃう)

テキストベースのファイル+CLIツールというシンプルな構成なのに、なかなか高機能なのです。
特にePub出力は私がePub自体にあまり馴染みがなかったので簡単に生成できたことにちょっと感動しました。

というわけでRe:VIEWを使ってみようと思いました。
この形でそのまま入稿できるかは別なのですが、個人的にテキストを書いていく際にRe:VIEWの機能を使用してページのような見開きで文章をリアルタイムプレビューできたらそれだけでも有用だなぁと思ったので。(マークダウン+エディタのプレビュー機能だと縦にずらーっと出るだけであんまり本としてのイメージがわかなかったのです)

なので見開きリアルタイムプレビューできる環境を作ってみました。

Re:VIEW Live Reload

https://github.com/yoshiko-pg/review-live-reload

セットアップ方法はREADME.mdを参照してください。

これをcloneしてセットアップすると

  • Re:VIEW本体
  • ディレクトリ構成
  • サンプルファイル
  • ライブリロード環境

が手に入るので、さくさくとテキストを書き始めることができます。
(Re:VIEWの基礎知識は必要になってくると思うので公式のWikiのDocumentsに目を通すこともおすすめします。記法についてはこちら)

書いたRe:VIEWファイルはこんな感じで本っぽくプレビューできます。

f:id:yoshiko_pg:20150104033907p:plain

ライブリロードについてはこちらの記事&ソースを参考にさせていただきました。
md2review+ReVIEW+guard+livereloadで快適ドキュメントライティング - PILOG

Guardfileで久しぶりにRuby書いた。。楽しかった。

余談:cssについて

見開きっぽく見せるのにCSS3のcolumn-countを使いました。(使ってみたかった)
チョー簡単に段組が作れるCSS3、columnsプロパティ! [ホームページ作成] All About
カラムを要素で囲う必要がないので、HTMLマークアップに影響を出したくない今回のような場合にぴったりです。
ただ横2カラム固定で一定の高さに達したら下の段にまた2カラム作る、っていうのはできないので、やむを得ず横スクロールする形になっちゃいました。

各要素のfont-sizeはrem指定でhtmlのfont-sizeを基準にしています。なので全体的に大きくしたり小さくしたい場合はhtmlのfont-sizeを変更すれば大丈夫なはず。
各要素のfont-size以外のプロパティ(paddingとか)はem指定でその要素のfont-sizeを基準にしています。

あと見出しは適当に見出しっぽく装飾してみたけどh2とかちょっとダサい気がしますね・・・
こういうときデザインスキルあるといいなぁーって思います。。

その他、導入にあたって

シンタックスハイライト

vimであるか探したらありました。
moro/vim-review · GitHub

/ftplugin/review.vim のSurroundRegister呼んでるところでエラーが出たのでそこは消しちゃいました。(surround.vim使ってないし)
シンタックスハイライトないときついのでとても助かりました。

既にマークダウンでテキストを書いてる場合

私もRe:VIEWの導入を決めるまでマークダウンで書いていたので、以下のツールでRe:VIEW記法に変換しました。
takahashim/md2review · GitHub

gemでインストール。

gem install md2review

で、以下のコマンドで変換できます。

md2review text.md > text.re

(Re:VIEW記法のファイルの拡張子はなんでもいいみたいだけど、.reが定番のようです。)

といってもマークダウン内でもあんまり凝ったことしてなかったから、主なところは見出しとコード埋め込みぐらいです。
あとは画像を入れるってメモしてたところを手動で画像の表記に置換したりとかそれぐらいで済みました。

Re:VIEW 所感

最初に紹介したスライド(書籍制作フローを変える。「ReVIEW」という解。〜マークアップと自動組版と、時々、電子書籍〜)の最後に「いずれReVIEWが原稿標準フォーマットの地位に就く(予定)のでまずは使ってみるべき」って書いてあったのですが、実際そうなるのかもなぁって気がしました。少なくともエンジニアが書く技術書という分野では。
やっぱり原稿もGitで管理したいし、そうなるとファイルはプレーンなテキストの形式がいいし、そこからワンソースでHTML/ePub/PDF変換できちゃうなんて最高です。
そういった特性上、共同執筆者や編集者さんとのやりとりをGitHubベースで進行できる環境だと最大限威力を発揮できそうですね。プルリクで校正できるしCIでビルドできるし。
あと個人で自費出版する場合や電子書籍を刊行する場合もすごく強力なツールになりますね。
技術書執筆の未来を感じました。
きっとまだまだバージョンアップとかしていくのかもしれませんが、現時点でも脚注とかコラムとか書籍で表現したい基本的な内容はわりとカバーしてくれているし、書籍向けの文章を書く機会があった際には積極的に使っていきたいと思います。