FUSEeで縦書き文書を作ろう!
猿未満でも出来る縦書きEPUB3

というわけで、HPで公開している「ショカツの恋」を使って試作品を作ってみました。
実際の作品は電子書籍販売サイト「文楽」にて無償公開しておりますので、ご覧ください。
さて、これから作ってみようと思っておられる方々へのちょっとした参考になるようなことを書いてみます。
まず、初めにFUSEeβ版およびEPUB3ビューワー「espur」をダウンロードしましょう。
どちらもwinXPで実行が可能です。
檜原のPCはwinXP home edition version2002 SP3ですが、無事に動きました。
ただ、FUSE networkのHPにも出ていたように、Microsoft VisualC++再頒布可能パッケージ(×86)なるものを再ダウンロードしなければなりませんでした。
いったん動くことが確認できれば、いよいよEPUB3の作成になります。
まず縦書きにするためには縦書き用CSS(カスケードスタイルシート)が必要です。
PC能力猿未満の檜原はこの概念が解らず、苦労いたしましたが、解ってしまえばなんということもありません。
CSSはいわば「脚注」もしくは「巻末注」みたいなもの。
アナログ本の文中に「脚注」とかあって、そこを見ると詳しい説明が出てる、というイメージでしょうか。
縦書き用CSSは「epubcafe」から入手できますが、以下にも貼り付けておきます。

@charset "utf-8";
html {
font-family: "HiraMinProN-W3", "@MS 明朝", serif, sans-serif;
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-epub-writing-mode: vertical-rl;
line-height: 1.75;
text-align: justify;
}
strong.sesame_dot {
font-weight: normal;
text-emphasis-style: sesame;
-webkit-text-emphasis-style: sesame;
-epubt-text-emphasis-style: sesame;
}
span.tcy {
text-combine: horizontal;
-webkit-text-combine: horizontal;
-epub-text-combine: horizontal;
}

/* --- --- */

p {
text-indent: 1em;
margin: 0;
}

img.sample {
float: left;
padding: 0 1.75em 1.5em 1.75em;
}

img.sample2 {
float: right;
padding: 0 1.75em 1.5em 1.75em;
}

H1 {
text-indent: 1em;
}

H2.author {
text-align: right;
padding-bottom: 1em;
}

H3 {
text-indent: 10%;
}

H4 {
text-indent: 10%;
}

span.sesami {
text-emphasis-style : sesame;
text-emphasis-color : #333333;
-epub-text-emphasis-style : sesame;
-epub-text-emphasis-color : #333333;
-webkit-text-emphasis-style : sesame;
-webkit-text-emphasis-color : #333333;
}

以上。
この中には「傍点をふる」といった、今ではもはや使われないであろう書式も入っておりますので、いらないかたは抜いてください。
檜原は猿未満なので、このまんま貼り付けましたけど(笑)。
さて、次に「FUSEe」を起動します。
まずは、EPUB制作の環境設定を行います。
ファイル→「環境設定」でカバー・目次をクリック。
特に「タイトルタグを目次に含める」にチェックが必要です。
電子書籍の場合は、おおまかにあたりをつけて本を開くことが出来ないので、インデックスが必須だからです。
これにチェックを入れることで、目次から各章の頭へと飛ぶことが出来ます。
縦書きの場合、「ページ」では言語を日本語に、そしてページ送りを「右から左」。
あとはまだ検証してませんが、今後便利な機能を発見すれば追加します。
「レイアウト」の固定ですが。
PCではうまく確認できませんでした。
ビューワがモニターのサイズに左右されるためのようです。
タブレット端末では機能するのだと推測しております。
さて、いよいよ新規作成です。
ファイル→「新規作成」をクリックすると、目次を作ってくれます。
まずはここで、縦書き用のCSSを追加します。
ツリービューの真ん中のアイコンをクリック。
「スタイルシートファイルを追加」を選びます。
するとツリーのstyleに新しいスタイルシートが追加されます。
それを選択して「コード編集」をクリック。
[EOF]の前に先ほどのCSSコードを貼り付けます。
そしてこのスタイルシートには「tategaki」とか「tate」とかなんとか任意の名前を付けます。
これでもう縦書き文書が出来るのです!
あとは、縦書きにしたい文書にこの名前を付けたCSSをリンクさせるだけです。
まず、その文書の読み込みです。
テキストスタイルとワード文書両方が読み込めます。
ファイル→読み込み→でどちらかを選びます。
檜原はテキストを読み込むようにしてます。
一度、ワードのドキュメントを読み込んで、コードビューを見たらえらいことになっていたので…。
これは檜原のドキュメントの設定が悪かったのかも知れません。
しかし以前、AMAZONのKINDLEで本をリリースしたときも、同じ現象が起きました。
KINDLEのフォーマットはMOBIで、EPUBと近いんですよね。
EPUBと.docの相性が悪いのか? と感じております。
さて、無事にファイルが読み込めたら、コード編集をクリック。
文章の頭のほう、<head>と<title>の間あたりにカーソルを置いて右クリック。
「タグ挿入」→「スタイルシート」を選ぶと、先ほど任意の名前を付けたスタイルシートが出てきます。
それをクリック! で終了!
「ビューワ」を開けば、縦書きになっていることが確認できます。
すごいぞ、FUSEe!
本当にこれだけなのですが、日本語の文章に特異的な書式を少し紹介しておきます。
@ルビ
これはFUSEeに備わっております。
コード編集で、ルビを振りたい文字を選択。
右クリックでウィンドウが開きます。
「タグ挿入」→「ルビ」でまた別ウィンドウが開き、選択した文字のルビを書き込みます。
A縦中横
「24時間」の「24」を縦書きで1文字の中に入れる書式ですね。
先ほど作ったCSSの以下の部分が「縦中横」です。
span.tcy {
text-combine: horizontal;
-webkit-text-combine: horizontal;
-epub-text-combine: horizontal;
}
データをコード編集にして、「縦中横」にしたい文字を以下のように囲みます。
<span class="tcy">24</span>
この"tcy"も任意の名前に置き換えられます。
ただ、「tatechuuyoko」では長いので、「tcy」になっているわけですね。

B画像の挿入
まずは、入れたい画像を追加します。
画像は基本「ウェブに最適保存」したものがよいでしょう。
「レイアウトの固定」がどんな機能なのか、未だ不明なので、サイズについては検討中です。
推奨端末がiPad,Galaxyなどでも違うと思います。
基本、KINDLE3のような7インチでは540×750、iPadやKINDLEDXのような10インチでは750×1120がいいとは思います。
これはAMAZON KDPでコミックをリリースするときに確認済みです。
KDPでは大きいサイズの画像をアップロードしてもジャストサイズにリサイズしてくれるので、逆に便利なのですがね…。
ツリービューの「ファイルを追加」→画像ファイル追加で、画像のあるフォルダを選び、追加したい画像をクリック。
これで「images」のフォルダに画像が追加されます。
本文の画像を入れたい場所にカーソルを置いて右クリック。
タグ挿入→イメージ→で、イメージフォルダにある画像の名前がすべて出てきます。
入れたい画像の名前をクリックで挿入されます。
画像を字が回り込むようにしたい場合は、CSSを使います。
画像が上付きの場合は
img.sample {
float: left;
padding: 0 1.75em 1.5em 1.75em;
}
を選びます。
画像を以下のようにコードで指示します。
<img class="sample" src="../images/画像名.jpg" width="***(任意の数字)" height="***(任意の数字)" />
画像を下付にしたい場合は、方向は「right」ですので、「sample2」を選びます。
できあがったら、「書き出し」→「EPUBに書き出し」。
すでにespurがダウンロードされていれば、書き出したファイルのアイコンは「espur」になっていますので、それをクリック。
表示された本棚に作ったばかりの本が置かれているはずです。
このとき「images」フォルダの中の好きな画像を表紙に設定しておけば、(画像を右クリックするとウィンドウが開きます)本棚にその表紙が並んでおります。
以上で、PCに関しては猿未満の檜原でも出来ましたので、ぜひ皆さま、縦書き電子書籍を作成しましょう!
追記:現在のところの問題点。
*ビューワーがモニタに左右されること。
タブレット端末で確かめていないので何とも言えないのですが、これではコミックを発表するのには二の足を踏みますね。
ただ、コミックの場合はDRMがかかせません。
今のところ、DRMはアイドック社の「bookend」方式がベストと檜原は考えてますが、このビューワーはかなり良いので、将来「bookend」がEPUB3に対応すればまずこの問題は解決できると考えております。
*電子書籍そのものについての進化論。
檜原は端末にダウンロードし、保存することばかりを考えていましたが、クロームなどクラウドコンピュータの進化は、もはやウェブ書庫に本を格納する方向なのかなとも思い始めています。
そうすれば端末に縛られることもありませんしね。
きっかけはポケットwifiを契約したことです。
いつでもオンライン状態に出来る。どらえもんのどこでもドア。
さらに電子書籍そのものも柔軟に考えるべきなのかな、とも。
たとえばCMです。
KINDLEの待ち受け画面にCMを入れ、廉価版を売り出す、といったやりかたを見ると、本にCM動画などを入れることで、企業からCM料をとり、DRMを安くかける、などの方法もありかなと。
企業としても、スポットで流れるTVCMより、手元の本に格納されたほうが、ユーザーが視聴する機会は多いと思うのです。
EPUB3は動画を組み込めますしね。
書籍がウェブ閲覧オンリーならクリックでHPに誘導できるし。
あと、簡易DRMという概念もどんどん進化していくのかなとも思います。
要するに、ファイルに買い手側のIDを組み込むことです。
違法にアップロードされたファイルのコードを開くと、違法アップロードした人間が特定できる、といったような。
私の猿以下の頭ではその程度しか想像できませんが、DRMについてはどんどん進化して欲しいものです。
*最後に。
いまだ、BLに嫌悪感を表明する人はたくさんおります。
特に電子書籍にBL本が多いことを嫌う方々も。
こうやってEPUB3のBLを発表することで、なんらかの危害を加えられることも予想していますが、しかし以前から書いているように、檜原はコミック作者にはもっと自由にかつ生活に困らずに創作できる環境を整えて欲しいと願っており、今回のEPUB3制作もその一環です。
BLをクソとののしる人には有名なスタージョンの法則を進呈したい。
「SFの90%はクズであります。しかし世の中の90%はクズであります」
もちろん檜原のBLは90%のほうなんですけどね。
以下に参考サイトを上げておきます。
@草枕を作ろう =縦書きHTML簡単作成ガイド=
http://www.epubcafe.jp/egls/kusamakura
A期待の電子書籍フォーマット『EPUB3.0』で電子書籍を作ってみよう
http://weekly.ascii.jp/elem/000/000/049/49724/
BEPUB3専用ビューワ「espur」
http://espur.jp/
CEPUB作成ツール「FUSEeβ版」
http://development.fusenetwork.co.jp/

追記です。

漫画の作成について。

ツリービューの真ん中のアイコン(ファイル追加)→「指定されたフォルダの画像でページ作成」で、1Pに一枚ずつの画像が自動的に貼り付けられます。
そのさい、すべてのページが目次に書き込まれますが、<title></title>で囲まれた数字を消せば、目次には表示されなくなります。
また、「画像指定による自動生成」ウィンドウで、比率のチェックを外します。
そうすると、元画像の大きさが反映されます。

レイアウトの固定について。

ビューワに左右されないウィンドウになります。いや、それは知ってるんですが、どういうときに有効かと考えつきました。
小説の場合、使い道が思いつかないのですが(笑)
コミックの場合に、画像と画像に挟まれたページに文を入れるときレイアウトを画像と同じサイズに固定すれば、間に余分な白紙のページが挿入されませんので、便利だと思います。
まだ試していませんが、コミックを販売する際には使ってみたい機能です。