2012年10月24日

作って学ぶ!Kindle Paperwhite向けに青空文庫で縦書き電子書籍を作ってみる

Kindle Paperwhite、Touchであれば、PDF・画像ファイルで無くとも縦書きができます。

僕はずーっとKindle 4 NT(ノンタッチ版)を使っていたので、どうしても縦書きは出来なかったのですが、Kindle Paperwhiteを手に入れた今、縦書き電子書籍の作成方法(出来るだけ簡単な手順で)を整理してみたいと思います。

books

縦書きの簡単な仕組み


Kindleで縦書き表示する方法は至って簡単でWebページと同様、スタイルシート(CSS3)で定義が可能なんです。

Kindle(Paperwhite, Touch)でもこの仕様に基づいて電子書籍の描画が可能になっている、という訳ですね。

ということで、まずは縦書きに対応したCSSファイルを用意する必要があるのですが、これは、epub cafeさんのページからbasic_vertical.cssファイルをダウンロード(バージョン1への直リンク)するのが簡単。

ちなみに中身はこんな感じ。

@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;
    -epub-text-emphasis-style: sesame;
}
span.tcy
{
    text-combine: horizontal;
    -webkit-text-combine: horizontal;
    -epub-text-combine: horizontal;
}

*-writing-mode: vertical-rlで縦書き、*-text-emphasis-styleで文字の強調、*-text-combineで縦中横(縦書き行中での横書き表記)を定義しているんですね。

このCSSファイルを変換したいHTMLファイルに組み込めばそのページは縦書き表示されるという訳です。

思ったより簡単ですよね。


青空文庫を縦書きのWebページにCSSを使って変換する


さあ、準備に取り掛かりましょう、まずは、WebブラウザとしてGoogle Chromeを用意することをお勧めします。

これには、変換対象のWebページ(HTML)をより詳細な情報としてローカルに保存してくれる、WebKitベースなのでブラウザを使って縦書きイメージ確認できる、という2つの理由があります。

ブラウザの用意が出来たら、欲しい青空文庫の本をブラウザ(XHTML版)で表示します。僕は夏目漱石の”こころ”を使って縦書きに挑戦してみますね。

kokoro

ブラウザで作品を表示したらメニューから右クリック・メニューからを”名前を付けて保存”を選んでページ全体をパソコンにダウンロードします。

kokoro2

すると、htmlファイルと*_filesというフォルダがパソコン上に作成・保存されます。

kokoro4

この内、htmlファイルを適当なエディタ(ここではベーシックにメモ帳で)で開き、スタイルシート定義を先ほどダウンロードしたbasic_vertical.cssに置き換えます。

通常はaozora.cssになっているので(*_filesフォルダの中にある*.cssというファイル名で確認可能)、これをbasic_vertical.cssに置換します。

kokoro5


続いて、作品に目次(見出し)が付いている場合にはページ内リンクも置換します。
(IEで青空文庫のWebページを保存した場合にはこの情報は保存されません)

kokoro8

”こころ”では、”http://www.aozora.gr.jp/cards/000148/files/773_14560.html#midashi***”というリンクが見出として複数埋め込まれているので、http://〜/*.htmlまでを空文字(””)に一括置換し、#midashi***のみにします。

kokoro6

最後に、charset=Shift_JISをUTF-8に置換しておしまい。

kokoro9

文字コードをUTF-8にして上書き保存・終了しましょう。

kokoro10

さあ、これで準備が出来ました。先程ダウンロードしたbasic_vertical.cssを*_filesフォルダにコピーしてから、

kokoro11

Chromeでhtmlファイルを開いてみましょう。

kokoro12

縦書きになってますね!。ちなみに、IEだとこんな風に90°回転して表示されます。

kokoro13


縦書き対応したHTMLファイルをKindleフォーマットに変換する


Kindle形式に変換する方法にはいくつか方法がありますが、ここでは最も簡単であろうKindle Previewerを使って変換してみます。

ダウンロードしたKindle Previewerをインストール後、プログラム・メニュー > Amazon > Kindle Previewerと進んで起動。

kpv1

こんな画面が表示されるので、ファイル > 本を開くと進み、先ほど縦書き表示に変更したhtmlファイルを開きます。

kpv2


すると、mobiフォーマットへの変換が始まって・・・、

kpv3

しばらくすると変換が終わりプレビューが表示(変換時の警告はjavascriptタグが無視される為で問題は無い)。

kpv4

縦書きになってますね!

kpv5


このmobiファイル(Compiled-*というフォルダの中に作成されます)をKindle(僕のはPaperwhite)で見てみると・・・。


screenshot_2012_10_24T18_44_53+0901


screenshot_2012_10_24T11_08_31+0901


はい、無事出来ました。

HTML形式で文書を書いておくと後で簡単に電子書籍になりますねー。


それでは、より良いKindleライフを。

 


Posted by netbuffalo at 18:55│Comments(0)TrackBack(0)kindle | モバイルデバイス


この記事へのトラックバックURL

http://trackback.blogsys.jp/livedoor/netbuffalo/4241501

コメントする

名前
URL
 
  絵文字