電子雑誌トルタルのつくりかた（技術編）

2015年3月11日
posted by 小嶋 智

電子雑誌トルタルは、電子書籍の標準フォーマットEPUBを採用しています。

EPUBの制作環境はここ数年でずいぶんそろってきました。でんでんコンバーターやRomancerなど、無償で使えるのに高品質なものもあります。でも、トルタルではこういう便利なツールは使っていません。集めた記事のテキストをEPUBにまとめるためにRubyでプログラムを書いています。わざわざこんなことをしているのは、トルタルにはいろんな見た目の記事がたくさんあるからです。

トルタルの記事

トルタルのなかから、連載記事を4つ紹介します（「飯の種」「フランスのパン」「トルタルタルト」「the Room 1058」。クリックで拡大）。

　

　

記事ごとに、デザインが違います。

これらを含めて全部で20以上の、書き手もデザインも異なる記事がトルタルには詰め込まれています。制作するとき、一度に原稿がそろうことは当然ありません。順次作業しながら途中でEPUBにまとめて確認することになります。新しい記事が届いたとき、最後に追加することもあれば、どこか途中に差し込むこともあります。最終的な掲載順はリリース直前に編集長が決めます。

つまり記事ごとにばらばらにHTMLにしたりデザインしたり、順番を入れ替えたり、EPUBを作って確認したり、という作業が頻繁に発生します。これをすばやく間違いなくできるように、プログラムを書いてEPUBを組み立てる仕組みをつくっているのです。

トルタル制作の実際

トルタル制作で記事を追加する手順を「飯の種」を例にとって追ってみましょう。この作業をする前にRubyや制作のためのツールをインストールし、トルタル全体の設定ファイルを作るなどの初期設定は必要ですが、それは済ませている前提です。

1. 原稿のマークアップ

まず、受け取ったテキスト原稿にマークアップをしていきます。トルタル5号ではほぼすべての記事でNoraMarkというマークアップを使っています。

image.logo-wrap(meshi_no_tane.png, 飯の種):

p.pre: ４号に引き続き「タモリ倶楽部」みたいに生きている（ように見える）ライター古田さんにインタビューをする特別編。前回はいろいろな新事実からマインド傾向をうかがったが、今回はより具体的な事実へ掘り下げる。（持田泰）

h2: フリーライター台所事情

iv: —突っ込んだ質問してしまうと26歳でライターになられた際の報酬っていかほどあったんですか？
ie: １ページのコラムが初仕事で報酬は多分6,000円だったかな。
iv: —ライター業の細かい台所事情って一般サラリーマンである僕なんか未知の世界ですので、この際いろいろ聞かせてもらえるとうれしいのですが、基本原稿に対してお金が出るということでいいんですよね。これは文字数計算なんですか？

「飯の種」原稿の冒頭部分です。

タイトルロゴの画像を埋め込みにはimageマークアップを使っています。p.preとマークアップされているのは前書きです。HTMLの<p>タグにpreというclassがついたものに変換されます。見出しはh2とマークアップします。

それから、インタビューする人とされる人、それぞれの発言先頭にマークアップをしていきます。当然インタビュー記事にしか必要のないものです。NoraMarkでは、このような記事個別のマークアップを定義できるようになっています。

この記事では、iv:というマークアップはHTMLの<p class='interviewer'>に、ie:というマークアップはHTMLの<p class='interviewee'>にそれぞれ変換したいので、その指示を書いたファイルも作っておきます。

modify 'ie' do
  @node.name = 'p'
  @node.classes = ['interviewee']
end

modify 'iv' do
  @node.name = 'p'
  @node.classes = ['interviewer']
end

これはrubyのプログラムですが、設定ファイル的な記述になっている雰囲気は読み取っていただけると思います。

2. スタイルシート

記事専用のスタイルシートを書きます。今回は、インタビューする人・される人の発言が違って見えるようにスタイルを追加します。インタビューアは少し緑がかった薄い色に、インタビューされている人は黒で表示されます。

p.interviewer {
  color: #446644;
  margin-bottom: 1em;
}

p.interviewee {
  color: #000000;
  margin-bottom: 1em;
}

3. EPUBに追加する設定

EPUBの組み立て指示が書いてあるファイルに、記事を追加する設定を書き込みます。まず「飯の種」関係のファイルが入っているmeshi-no-taneというディレクトリに、resources.confというファイルを以下の内容で作ります。

file 'meshi_no_tane.png'
file 'meshi.css'
ordered {
  file 'meshi-no-tane-nora_001.xhtml'
  heading '飯の種(特別編)'
}

ここには、EPUBに追加するファイル（ロゴ画像、css、そして記事自体のXHTML）と目次での見出しを書いています。

それから、全体を束ねているRakefileに次の行を追加します。

      add_resource_dir 'meshi-no-tane'

これで、meshi-no-taneディレクトリの内容がトルタル5号のEPUBに追加される設定ができました。

4. EPUBを生成

確認のため、EPUBを実際に生成します。

トルタル5号のあれこれを入れているディレクトリでrakeと入力するだけで以下の処理が実行されます。

  1. 追加または更新された原稿やスタイルシートがあるか確認
  2. もしあれば原稿をXHTMLに変換
  3. EPUB生成
  4. epubcheckでチェック

epubcheckも通るので、誤ったEPUB（たとえば画像を参照しているのにその画像が追加されていないもの）を作ってしまってもすぐ気づくことができます。

以下、一行目のrake以外は自動的に出てくる表示です。

 [torutaru_5 (master)]$ rake
java -jar ../lib/epubcheck-3.0.1/epubcheck-3.0.1.jar torutaru_5_0228_1530.epub
Epubcheck Version 3.0.1

Validating against EPUB version 3.0
No errors or warnings detected.
[torutaru_5 (master)]$

日付と時間をファイル名に含んだEPUBを生成して、それにepubcheckをかけているのがわかります。ここでは変換のエラーは発生せず、epubcheckも無事通っています。

5. EPUBを確認

生成したEPUBを、iBooksやMurasakiなどのEPUBリーダで開いて確認します。必要に応じて原稿を修正したりEPUBを生成しなおしたりしながら作業をすすめていきます。

道具

ここまでに使った道具を紹介します。

Ruby

プログラミング言語。トルタル制作の道具はほぼ全部Rubyで書かれています。Rubyなくして今のトルタル制作環境は成り立ちません。

Rake

Rubyで標準的なビルドツール。トルタルのEPUB生成からepubcheckまでの手順・トルタルに含めるファイル・記事の順序などは、Rakeが処理するRakefileに書かれています。

NoraMark

必要に迫られて小嶋がつくった簡易マークアップ言語。まだα版レベルですが、トルタル制作には欠かせなくなりつつあります。この原稿も実はNoraMarkで書いています。

gepub

小嶋が2010年から作っているEPUBライブラリ。EPUB3の機能をフルサポートしています。

epubcheck

EPUBが正しいかチェックする重要なツール。EPUBの仕様を策定しているIDPFが提供しています。トルタル制作環境のなかで、これだけはJavaのプログラムです。

今後の野望

雑誌の電子書籍版はごく普通になってきました。Kindleでも買えますし、「dマガジン」のような読み放題サービスもあります。ただ今のところ、ほとんどの雑誌は紙版と同じレイアウトの画像を配置した固定レイアウトの電子書籍になっています。

トルタルは記事ごとにレイアウトしているとはいっても、それほどリッチなデザインではありません。iPhoneでも快適に読めるようにしたいですし、リッチなレイアウトにすると読めるEPUBリーダーが限られてしまう可能性もあるので、今はこれでよいと思っています。でも将来に渡って、電子雑誌が「画像を固定レイアウト」と「デザインはリッチではないけれどリフローでどこでも読める」の二択のままではないだろうと思っています。

小嶋は以前「オトノハ」という電子雑誌を作っていました（今は休止中です）。この雑誌ではリッチレイアウトな版とシンプルな版の二種類を用意しています。

「オトノハ」第3号から。 左: リッチ版 右: シンプル版

「リッチ版」はデザイナーが作ったPDFで「シンプル版」はEPUB（当時はまだEPUB 2）です。当時はこのように、画面サイズに応じて別々のファイルを準備するのがいちばんよい選択肢でした。いまでもそうかもしれません。でもEPUB 3が採用しているHTMLとCSS3の組み合わせは、本来このリッチ版くらいの表現力はあるフォーマットです。

ここ数年で、スマートフォンで見るときとパソコンで見るときでデザインが切り替わるWebページが増えてきました。「マガジン航」もそうですね。技術的にはサイズ・機種に応じて別のHTMLを用意する方法と、同じHTMLのまま画面サイズやデバイスに合わせてスタイルを切り替える方法（レスポンシブ Webデザイン）があります。EPUB 3は後者の機能は利用できる規格で、実際に多くのリーダーが対応しています。同一内容について複数のHTMLを用意する方法は現在EPUB Multiple-Rendition Publicationsとして提案されているので、遠からず使えるようになるかもしれません。

2015年は、デバイスの能力に応じて表示を切り替える電子書籍や電子雑誌がもっと出てくるだろうと考えています。その制作には、論理的なレイアウトから独立した構造を記述した原稿を適切なHTMLに変換する仕組みが必要です。Multiple-Renditionが広まったときには、同一内容複数ファイルを含むEPUBを組み立てる手段も必要になってきます。そう考えると、実はトルタルの制作環境は2015年的電子雑誌への準備がほとんどできているのではないか、と思えてきます。NoraMarkは原稿の論理的な構造を記述するための道具を目指しています。gepubはEPUBの仕様のほとんどをカバーしようとしています。

また、レスポンシブな電子書籍はただでさえ制作コストがかかる上に、既存の紙書籍向けのレイアウト情報の利用は難しいと思われます。でも最初からレスポンシブに作ったデータであれば、紙にレイアウトして出力する方法も2015年にはもっと出てくるのではないかとも期待しています。今でもXHTML + CSSはwkhtmltopdfや、AH FormatterのCSS組版機能で印刷向けにレイアウトにすることができます。最新のWeb技術・規格に対応しつつ美しい組版の実現を目指しているVivliostyleも2015年中にリリースされるはずです（情報開示: 小嶋はVivliostyleプロジェクトにボランティアとして参加しています）。

2015年は、スマートフォンから紙まで連続して対応できる電子書籍制作に、トルタルとして乗り込めるといいなあ、乗り込みたいなあ、と思っています。

【お知らせ】
※本稿の筆者である小嶋智さんを含む「電子雑誌」関係者が集まり、それぞれの「つくりかた」について話をする「第2回 電子雑誌サミット」が3月20日に開催されます。ぜひご参加ください（編集部）。

日時：3月20日(金)　15:00-17:30　(14:30受付開始)
出演：堀田純司（AiR）、古田 靖（トルタル）、小嶋 智（トルタル、オトノハ）、鷹野 凌（月刊群雛）
司会：仲俣暁生（マガジン航）

イベント詳細と参加申し込みはこちらから。
http://kokucheese.com/event/index/262337/

なお、鷹野凌さんによる「第1回 電子雑誌サミット」のレポート、「電子雑誌なんか簡単だ！」もウェブで公開されています。

■関連記事
・AiRがマルチ配信をやめてKDPに絞ったわけ
・同人雑誌「月刊群雛 (GunSu)」の作り方
・トルタルのつくりかた

執筆者紹介

小嶋 智
（ソフトウェアエンジニア）

タグ: , , , ,
カテゴリー: コラム | コメントは受け付けていません。

«
»