皆様こんにちは、もしくはこんばんは。

今回、シノビガミリプレイ「イツワリノマイヒメ」が配信開始となりました。
このリプレイは今までの他の作品と趣向を変え、PDFとそれ以外の電子書籍フォーマットを一緒にしてあります。
同梱したフォーマットは次のとおり

FLASH
EPUB
HTML


です。
それぞれの利点や欠点などについては以前の記事「TRPG系同人誌の作り方(電子書籍化)」で紹介してあるとおり。
とはいえ、その時点では制作したことのないフォーマットもありましたので、今回、実作業を通しての利点、欠点。さらに面白さなども発見できればとやってみたわけです。

そんなわけでフォーマットごとのレポを開始。

作業環境:
Windows 7
InDesign CS5.5

■ FLASH
事前作業:
・複数ファイルを合体して出力できないので、InDesgin上で分割された内容を合体します。
・FLASH版はページめくりをマウスクリックで行います。上下左右のルーラーやPageUp/Downボタンは効きませんので、操作がわかりやすいよう左右の下にページ送りのマークを入れます。
・上下の余白を削って文章部分を大きく見れるように加工。

出力設定:
電子書籍3_1


電子書籍3_2


出力後の作業:
・スタートページのhtmlをダブルクリックして動作確認します。
・問題なければ表示されたページの左下をつまむかクリックすることでページがめくれます。文字の大きさ等、好みになるよう設定を調整していきます。

電子書籍3_3


感触:
InDesignでの作業がそのままダイレクトに影響しますので、「事前作業→出力したFLASHの確認」を延々と繰り返して仕上げていった感じです。FLASHアプリの作り方を知らずともなんとかなるので、結構面白いかも。また、CS5.5出力のFLASHをHTML5に変換するアプリがあるらしいので、将来的にそれを入れてiPhone、iPad対応とするのもよいかと。
TRPGリプレイなら本を読んでいるような感覚を「楽しむことができる」ので、悪くはありません。ただ、検索機能が付けられない等の欠点がありますので、ルールブックにはまったく向かないのが難点。


■ EPUB
事前作業:
・使用している段落、文字スタイルを簡略化し、名称は欧文に統一。正規表現スタイルは極力はずす。
・リンク画像の名称も欧文に変更。
・テキストの切りがよくなるよう、シーンごとにファイルを分割。このときファイル名を全て欧文化。
・表組部分やオブジェクトで組み合わせた箇所を画像化(*1)します。これは、文字と画像等がばらけてしまうためです。
・行間を空けたい箇所は「改行+スペース」に変更。個別にやると手間になるので、一行分入れたほうがよい。
・分割したファイルをブック機能を使って一括管理。これでファイルごとの区切りを入れつつ1つのEPUBファイルが作れます。

電子書籍3_4


*1 PDF化した本文の該当箇所をPhotoshopで読み込み画像化。解像度は300程度でグレースケール。

出力設定:
電子書籍3_5


電子書籍3_6


電子書籍3_7



出力後の作業:
・拡張子を「EPUB」から「zip」に変更(単に名称変更するだけでOK)して解凍、「OEBPS」フォルダ内にある「template.css」ファイルを取り出します。
・InDesignの段落スタイルに該当する箇所を探し、調整します。主にフォント、フォントサイズ、行送り、文字色を調整。

電子書籍3_9


・調整したcssファイルをzipファイル内に放り込み、そのままビューワで確認(Adobe Digital Editionはzipでも見れます)。好みの状態になるまでこれを繰り返します。
・次に画像が正しく表示されているか確認。表示されていない場合、該当箇所のhtmlファイルを取り出して画像のタグをチェックします。画像ファイル名が和文ですとEPUB出力時に壊れてしまいますので、ここを直せばOK。それでも出てこない場合は画像拡張子を変えたり(タグと画像ファイル両方合わせて)と、小手先技で出てくるまで調整。

画像タグ
電子書籍3_11


ビューワ上の画面
電子書籍3_8



感触:
なれない作業だったので、とにかく最初はつまづきまくりました。いろいろ試してからcssの調整で大半やれてしまうことに気づき、それを行うためのInDesign調整でまた時間がかかりました。方法を固めてしまえば何のことはないものなのですけど、セオリーがないフォーマットなので「書式の全てを自分で決める」部分が重要かなと。あと、インターネット黎明期のHTMLタグを経験していればすんなり入れますよ。EPUB3は縦書きができるので、そのうち挑戦。
InDesignが無いのでEPUBが生成できないという人は、ちょっとググってEPUBビルダーを探してみてください。今は結構出てきているかと。



■ HTML
事前作業:
・基本EPUBと同じ。EPUBの中身はXHTMLという形式なので、EPUB用に処理すればそのままHTMLに転用できます。

EPUBファイルの中身
電子書籍3_10


・フォント表示が端末依存なので、どのOSにも入っているフォントに統一する。今回はMS明朝とMSゴシックのみに絞っています。
・出力は一括でできないので、ブックから各ファイルを呼び出し、個別にHTML出力を行います。

出力設定:
EPUBと同じ。

出力後の作業:
・個別に出力したHTML内の

 〈style type="text/css" media="screen"〉〈!--
  ・
  ・
  ・
 --〉〈/style〉

を削除し、

 〈link href="template.css" rel="stylesheet" type="text/css"/〉

を入れます。
分割したHTMLは個別にスタイルを持っています。その部分を削除してEPUBで使ったスタイルシートに適用させ、ぱっと見EPUBに近くなるようにします。
・スタイルシート(cssファイル)を調整。まず、フォントをMS明朝とMSゴシックのみ使用するように書き換えます。EPUBとはビューワ等が違いますので、好みに合わせて変更していきます。
・トップのindex.htmlファイルを作成、そこからページ順に見ていけるようファイル毎にリンクを入れていきます。ここはHTMLタグの知識が若干必要になります。

感触:
EPUBとHTMLは共通部分があるので作業自体さほどかかりませんでした。表示フォント等の制限がありますが、IEやSafariなどのブラウザで見れるので汎用性を一番高く作れるのがよいですね。リプレイをBlog等で見てみると、表現は作り手の工夫次第かなという印象。
何にせよHTML(EPUB)は事前作業でクオリティや事後の作業に影響出るので、制作手順・設計が重要です。そして紙印刷用の作り方(組版ルール)はかなり削除しないといけません。実作業に携わらないと難しいところですね、ここは。


と、以上のとおり。ようやくここまで到達です。
電子書籍の触り部分ではありましたが、皆様いかがでしたでしょう?
少しでも創作に興味を持ってもらえばいいのですが(&私達が創作したリプレイ等にも興味を持ってもらえると、なお嬉しいですw)。
今回、電子書籍化する際に使用するソフトがちょっと高価なものなので、誰しもが手を出せるわけではありません。そこが悩ましいところですが、EPUBやHTMLはフリーソフトでも作れるので挑戦してはいかがでしょう。サンプルも結構ネットに落っこちています。

それでは、また何か、ネタが沸いてきたら記事にしたいと思います。
ここまで読んでいただき、ありがとうございました。