電子雑誌トルタル

の作り方 - 技術編

2015年3月20日 JEPAセミナー資料

トルタルEPUB制作担当 小嶋智

トルタルの記事

その原稿

トルタルの記事数 > 20

  • いろんな著者
  • デザインもいろいろ
  • 原稿到着のタイミングもいろいろ

原稿が新しく来た!

ら、人間と機械が分担して作業します。

流れ

人間がやること

  1. 原稿をテキストにする
  2. マークアップする
  3. CSSを書く
  4. 設定ファイルに追加

機械がやること

  1. 更新を確認する
  2. XHTMLに変換する
  3. 束ねてEPUBにする
  4. epubcheckをかける

人間がやること

マークアップ

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

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

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

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

カスタムマークアップ

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

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

CSS

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

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

設定ファイル

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

機械に指示

指示する

[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)]$ 

この4文字だけ人間の指示

epubcheckも自動

XHTML

<figure class='logo-wrap'>
<img src='meshi_no_tane.png' alt='飯の種' />
</figure>
<div class='pgroup'>
<p class='pre'>4号に引き続き「タモリ倶楽部」みたいに生きている(ように見える)ライター古田さんにインタビューをする特別編。前回はいろいろな新事実からマインド傾向をうかがったが、今回はより具体的な事実へ掘り下げる。(持田泰)</p>
</div>
<h2 id='heading_index_1'>フリーライター台所事情</h2>
<p class='interviewer'>—突っ込んだ質問してしまうと26歳でライターになられた際の報酬っていかほどあったんですか? </p>
<p class='interviewee'>1ページのコラムが初仕事で報酬は多分6,000円だったかな。</p>
<p class='interviewer'>—ライター業の細かい台所事情って一般サラリーマンである僕なんか未知の世界ですので、この際いろいろ聞かせてもらえるとうれしいのですが、基本原稿に対してお金が出るということでいいんですよね。これは文字数計算なんですか? </p>
<p class='interviewee'>以前は、伝統的に文字数で表現していたようです。でも今は1記事とか1ページいくらってことが多くなりました。雑誌はたいていページ単位で、パンフレットとか広告媒体は1本いくらですね。単行本の編集協力も一緒で、1冊いくらです。著者になると印税ですが、この場合は制作費として契約します。</p>

EPUB

  -rw-r--r--     20087  28-Feb-2015  15:33:04  OEBPS/meshi-no-tane/meshi-no-tane-nora_001.xhtml
  -rw-r--r--       979  28-Feb-2015  15:33:04  OEBPS/meshi-no-tane/meshi.css
  -rw-r--r--     26548  28-Feb-2015  15:33:04  OEBPS/meshi-no-tane/meshi_no_tane.png
<item id="item_meshi_no_tane" href="meshi-no-tane/meshi_no_tane.png" media-type="image/png"/>
<item id="item_meshi" href="meshi-no-tane/meshi.css" media-type="text/css"/>
<item id="item_meshi-no-tane-nora_001" href="meshi-no-tane/meshi-no-tane-nora_001.xhtml" media-type="application/xhtml+xml"/>

ファイル

opf

<li>
  <a href="meshi-no-tane/meshi-no-tane-nora_001.xhtml">飯の種(特別編)</a>
</li>

navigation

できた

ここまでの道具

Ruby

プログラミング言語。トルタル制作の道具はほぼ全部Ruby。

Rake

Rubyで標準的なビルドツール。

NoraMark

必要に迫られて小嶋がつくった簡易マークアップ言語。

まだα版レベル。

gepub

小嶋が2010年から作っているEPUBライブラリ。

epubcheck

EPUBが正しいかチェックする重要なツール。IDPF提供

野望

  • ひとつのソースからシンプルレイアウトとリッチレイアウト
  • それどころかPDFや紙へ (Vivliostyle期待)
  • あるいはレスポンシブEPUB

電子雑誌『オトノハ』の例

2011年。デザイナーが作ったPDF(左)とEPUB。

手動で2種類作っています

リンク

making torutaru

By Kojima Satoshi