【書籍制作ワークフロー】ReVIEW 入門 #05 – ReVIEW 記法 (ブロック)

書籍制作ワークフロー

山田直樹

2013.12.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

前回までで ReVIEW 環境の構築と実際に ePUB と PDF を生成してみることで、全体の大まかな流れを攫ってみました。今回からは ReVIEW 記法について学んでみるとします。

ReVIEW 記法について

ReVIEW の記法は ASCII の EWB をベースにしており、そこに RD や Wiki のエッセンスを取り入れた独自の物となっております。慣れるまで多少戸惑うところもありますが、これといって複雑なところは無いので、Wiki や Markdown に触れたことのある方であれば、大した時間もかからずにすんなりと習得できるかと思います。

ここでは ReVIEW で記述されたテキストがどのような HTML に変換されるのかを並べて紹介します。

段落

ReVIEW

最初の段落です。
この行も同じ段落です。

次の段落です。

HTML

<p>最初の段落です。この行も同じ段落です。</p>
<p>次の段落です。</p>

章・節・項・段(見出し)

ReVIEW

= 章のキャプション

== 節のキャプション

=== 項のキャプション

==== 段のキャプション

===== 小段のキャプション

HTML

<h1><a id="h1"></a>第1章　章のキャプション</h1>

<h2><a id="h1-1"></a>1.1　節のキャプション</h2>

<h3><a id="h1-1-1"></a>項のキャプション</h3>

<h4><a id="h1-1-1-1"></a>段のキャプション</h4>

<h5><a id="h1-1-1-1-1"></a>小段のキャプション</h5>

リード文

ReVIEW

//lead{
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
//}

HTML

<div class="lead">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>

TeX式

ReVIEW

//texequation{
\sum_{i=1}^nf_n(x)
//}

HTML

<div class="equation">
<pre>\sum_{i=1}^nf_n(x)</pre>

コラム

ReVIEW

===[column] コンパイラコンパイラ

ここにコラムの内容を書きます。ここにコラムの内容を書きます。
ここにコラムの内容を書きます。

ここにコラムの内容を書きます。

===[/column]

HTML

<div class="column">
  <h3><a id="column-1"></a>コンパイラコンパイラ</h3>
  <p>ここにコラムの内容を書きます。ここにコラムの内容を書きます。ここにコラムの内容を書きます。</p>
  <p>ここにコラムの内容を書きます。</p>
</div>

用語リスト

ReVIEW

: Alpha
  DEC の作っていた RISC CPU。
  浮動小数点数演算が速い。
: POWER
  IBM とモトローラが共同製作した RISC CPU。
  派生として POWER PC がある。
: SPARC
  Sun が作っている RISC CPU。
  CPU 数を増やすのが得意。

HTML

<dl>
  <dt>Alpha</dt>
  <dd>DEC の作っていた RISC CPU。浮動小数点数演算が速い。</dd>
  <dt>POWER</dt>
  <dd>IBM とモトローラが共同製作した RISC CPU。派生として POWER PC がある。</dd>
  <dt>SPARC</dt>
  <dd>Sun が作っている RISC CPU。CPU 数を増やすのが得意。</dd>
</dl>

ソースコードリスト

キャプション付きのソースコードリストです。連番付きのモノと連番なしのモノがあります。

連番あり

ReVIEW

//list[list][リストのサンプル]{
int main(int argc, char **argv) {
  puts("OK");
  return 0;
}
//}

HTML

<div class="caption-code">
  <p class="caption">リスト1.1: リストのサンプル</p>
  <pre class="list">int main(int argc, char **argv) {
    puts(&quot;OK&quot;);
    return 0;
  }
  </pre>
</div>

連番なし

ReVIEW

//emlist{
printf("hello");
//}

HTML

<div class="emlist-code">
<pre class="emlist">printf(&quot;hello&quot;);
</pre>
</div>

ソースコード専用の引用

ファイル名を指定したソースコードリストは、以下のように記述します。

ReVIEW

//source[/sample/sample.rb]{
def hogehoge
  puts "Hello, world!"
end
//}

HTML

<div class="source-code">
<p class="caption">/sample/sample.rb</p>
<pre class="source">def hogehoge
  puts &quot;Hello, world!&quot;
end
</pre>
</div>

行番号付きソースコードリスト

ソースコードに行番号をつけることが出来ます。

連番あり

ReVIEW

//listnum[listnum][番号付きリストのサンプル]{
int main(int argc, char **argv) {
  puts("OK");
  return 0;
}
//}

HTML

<div class="code">
<p class="caption">リスト1.2: 番号付きリストのサンプル</p>
<pre class="list">
 1: int main(int argc, char **argv) {
 2:   puts(&quot;OK&quot;);
 3:   return 0;
 4: }
</pre>
</div>

連番なし

ReVIEW

//emlistnum{
 puts "hello world!"
//}

HTML

<div class="emlistnum-code">
<pre class="emlist">
 1:  puts &quot;hello world!&quot;
</pre>
</div>

段落中でのソースコード引用

ReVIEW

段落中でソースコード@<code>{p = obj.ref_cnt}を引用して記述します。

HTML

<p>段落中でソースコード<tt class="inline-code">p = obj.ref_cnt</tt>を引用して記述します。</p>

コマンドラインのキャプチャ

ReVIEW

//cmd{
$ bundle exec reveiw-epubmaker config.yml
//}

HTML

<div class="cmd-code">
  <pre class="cmd">$ bundle exec reveiw-epubmaker config.yml
  </pre>
</div>

画像（図）

画像は以下のように記述します。指定した画像ファイルが存在しない場合は、{}内の文字列が代わりに出力されます。

画像ファイルあり

ReVIEW

//image[imgsample][画像サンプル]{
  System V 系列
  +----------- SVr4 --> 各種商用UNIX（Solaris, AIX, HP-UX, ...）
//}

HTML

<div class="image">
<img src="images/sample-imgsample.jpg" alt="画像サンプル" />
<p class="caption">
図1.1: 画像サンプル
</p>
</div>

画像ファイルなし

ReVIEW

//image[unixhistory][UNIX系OSの簡単な系譜]{System V 系列
	      +----------- SVr4 --> 各種商用UNIX（Solaris, AIX, HP-UX, ...）
V1 --> V6 --|
	      +--------- 4.4BSD --> FreeBSD, NetBSD, OpenBSD, ...
	      BSD 系列

		    --------------> Linux
//}

HTML

<div class="image">
<pre class="dummyimage">
              System V 系列
              +----------- SVr4 --&gt; 各種商用UNIX（Solaris, AIX, HP-UX, ...）
V1 --&gt; V6 --|
              +--------- 4.4BSD --&gt; FreeBSD, NetBSD, OpenBSD, ...
              BSD 系列

                    --------------&gt; Linux
</pre>
<p class="caption">
図1.1: UNIX系OSの簡単な系譜
</p>
</div>

また、第三引数にscale=Xと指定することで、画像の倍率（X倍）を指定することが出来ます。

段落中での画像引用

ReVIEW

段落中で@<img>{imgsample}を指定します。

HTML

<p>段落中で図1.1を指定します。</p>

連番なし

ここまでのは図1.1といったように連番が付けられていましたが、以下のように記述することで連番なしにすることが出来ます。キャプションの省略も可能。

ReVIEW

//indepimage[imgsample]

HTML

<div class="image">
<img src="images/sample-imgsample.jpg" alt="" />
</div>

テーブル

カラムは任意のタブで区切ります。タブのサイズに決まりは無いようですが、SpaceよりもTabの方が上手く行きます。

ヘッダーとボディは--------で区切るわけですが、theadやtbody要素が使われるわけではなく、単純にthとtdで区分されるだけのようです。

ReVIEW

//table[envvars][重要な環境変数]{
名前          意味
-------------------------------------------------------------
PATH        コマンドの存在するディレクトリ
TERM        使っている端末の種類。linux・kterm・vt100など
LANG        ユーザのデフォルトロケール。日本語ならja_JP.eucJPやja_JP.utf8
LOGNAME     ユーザのログイン名
TEMP        一時ファイルを置くディレクトリ。/tmpなど
PAGER       manなどで起動するテキスト閲覧プログラム。lessなど
EDITOR      デフォルトエディタ。viやemacsなど
MANPATH     manのソースを置いているディレクトリ
DISPLAY     X Window Systemのデフォルトディスプレイ
//}

HTML

<div class="table">
<p class="caption">表2.1: 重要な環境変数</p>
<table>
<tr><th>名前</th><th>意味</th></tr>
<tr><td>PATH</td><td>コマンドの存在するディレクトリ</td></tr>
<tr><td>TERM</td><td>使っている端末の種類。linux・kterm・vt100など</td></tr>
<tr><td>LANG</td><td>ユーザのデフォルトロケール。日本語ならja_JP.eucJPやja_JP.utf8</td></tr>
<tr><td>LOGNAME</td><td>ユーザのログイン名</td></tr>
<tr><td>TEMP</td><td>一時ファイルを置くディレクトリ。/tmpなど</td></tr>
<tr><td>PAGER</td><td>manなどで起動するテキスト閲覧プログラム。lessなど</td></tr>
<tr><td>EDITOR</td><td>デフォルトエディタ。viやemacsなど</td></tr>
<tr><td>MANPATH</td><td>manのソースを置いているディレクトリ</td></tr>
<tr><td>DISPLAY</td><td>X Window Systemのデフォルトディスプレイ</td></tr>
</table>
</div>

段落中でのテーブル引用

ReVIEW

段落中で@<table>{envvars}を指定します。

HTML

<p>段落中で表2.1を指定します。</p>

引用

ReVIEW

//quote{
目覚めてみるとそこには誰の姿もなかった。
昨晩飲んだらしいウィスキーのグラスだけがテーブルの上に残っていた。僕はそれをビートルズ中期のジョン・レノンのような虚ろな目で眺めた。

誰も僕を責めるわけではないし、誰も僕を憎んでいるわけではない。
//}

HTML

<blockquote>
  <p>目覚めてみるとそこには誰の姿もなかった。昨晩飲んだらしいウィスキーのグラスだけがテーブルの上に残っていた。僕はそれをビートルズ中期のジョン・レノンのような虚ろな目で眺めた。</p>
  <p>誰も僕を責めるわけではないし、誰も僕を憎んでいるわけではない。</p>
</blockquote>

引用ブロックの中でも段落の切り替えは可能ですが、他のブロック構文を入れ子にすることは出来ないようです。

脚注

ReVIEW

@<href>{http://jquerymobile.com/, jQuery Mobile}を一度でも触ったことのある方なら、その用途は何となく理解できるのではないでしょうか@<fn>{note2}。

//footnote[note2][あまり知らないという方、より詳しく知りたいという方は、@<href>{http://www.html5.jp/tag/attributes/data.html, こちらのサイト}をご参照ください。]

HTML

<p><a href="http://jquerymobile.com/" class="link">jQuery Mobile</a>を一度でも触ったことのある方なら、その用途は何となく理解できるのではないでしょうか<a href="#fn-note2" class="noteref">*1</a>。</p>

<div class="footnote">
  <p class="footnote">[<a id="fn-note2">*1</a>] あまり知らないという方、より詳しく知りたいという方は、<a href="http://www.html5.jp/tag/attributes/data.html" class="link">こちらのサイト</a>をご参照ください。</p>
</div>

おわりに

結構なボリュームになりましたが、ReVIEW 記法のうちブロック要素のモノを羅列してみました。ここではまだ触れていないブロック要素もありますが、やや特殊な類なので、それについては次回以降解説するとします。

ePUB 形式は HTML をベースにしていることから、CSS でスタイルを組んでいくことになります。その際 HTML にどのようなクラスが付与されるのか把握しておく必要があるため、自分用の覚書としてここに書き記しておきました。

ReVIEW においては、独自のクラスを指定したり独自のレイアウトのためにdivを入れ子にするといったことが推奨されていない模様です ^*1。そのため、標準で生成される HTML 要素とクラスだけで組版をすることが求められます。技術書や小説といった文字主体の書籍なら問題ないでしょうが、雑誌や漫画に見られるような複雑な組版にしたい場合は、CSS で組んで ePUB 形式に出力するよりも LaTeX で組んで PDF 形式に出力することが推奨されています。

脚注

一応、手段は用意されています。 ↩

【書籍制作ワークフロー】ReVIEW 入門 #05 – ReVIEW 記法 (ブロック)

ReVIEW 記法について

段落

ReVIEW

HTML

章・節・項・段(見出し)

ReVIEW

HTML

リード文

ReVIEW

HTML

TeX式

ReVIEW

HTML

コラム

ReVIEW

HTML

リスト

番号なし

ReVIEW

HTML

番号あり

ReVIEW

HTML

用語リスト

ReVIEW

HTML

ソースコードリスト

連番あり

ReVIEW

HTML

連番なし

ReVIEW

HTML

ソースコード専用の引用

ReVIEW

HTML

行番号付きソースコードリスト

連番あり

ReVIEW

HTML

連番なし

ReVIEW

HTML

段落中でのソースコード引用

ReVIEW

HTML

コマンドラインのキャプチャ

ReVIEW

HTML

画像（図）

画像ファイルあり

ReVIEW

HTML

画像ファイルなし

ReVIEW

HTML

段落中での画像引用

ReVIEW

HTML

連番なし

ReVIEW

HTML

テーブル

ReVIEW

HTML

段落中でのテーブル引用

ReVIEW

HTML

引用

ReVIEW

HTML

脚注

ReVIEW

HTML

おわりに

脚注

イベント

EVENT【5/15（水）リモート】クラスメソッドの会社説明会を開催します

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会 〜フィンテック / リテール 業界案件特集〜 を開催します

EVENT【5/8リモート】クラスメソッドのフリーランスエンジニア会社説明会〜フィンテック / リテール業界案件特集〜を開催します

EVENT【5/10（金）名古屋】クラスメソッドグループの会社説明会を開催します！