2014年03月07日

InDesignからmobi「進撃の巨人、ミスリードの謎」Kindleに申請せり

 「進撃の巨人、ミスリードの謎」の番外編を含めた記事をInDesignで電子書籍用にレイアウトしてepubに書き出した。epubをSigilで編集してKindle Previewerでmobiに変換し、Kindleダイレクト・パブリッシングに申請した。昨日の夜に申請したが、翌日の朝には公開されていた。

  InDesignで作成してepubを書き出し、あとはKindle Previewerで変換すれば簡単なずなので、まずは前回テストで気になったところをチェックしようとした。もっとも気になったのはインライン画像で、どうしても小さくなる。また書き出し時の設定はどれがいいのかはやってみなければわからない。

 InDesignが便利なのは、段落スタイルにオーバーライドして設定でも、スタイルシートを自動的に作成して書き出してくれるところだろう。たとえば縦中横は本文では

全<span class="char-style-override-2">26</span>話

というように記述されている。「26」の部分が縦中横である。このスタイルシートは

span.char-style-override-2 {
    -epub-text-combine:horizontal;
}


という記述が追加されていて、スタイルシートで縦中横が指定される。

140307-01.gif
*書き出された縦中横のスタイルシートでの指定。

 またYouTubeにリンクして文字スタイルを適用した箇所は

<a href="http://youtu.be/vKUUFYlQueA"><span class="movielink">穴を</span><ruby class="movielink">塞<rp>(</rp><rt>ふさ</rt><rp>)</rp></ruby><span class="movielink">ぐことができるのか?</span></a>

という記述になっていて、「movielink」というスタイルシートが指定されている。

span.movielink, ruby.movielink {
    color:#aa0013;
    font-family:"Hiragino Kaku Gothic ProN W6", sans-serif;
    font-style:normal;
    font-weight:600;
}

フォントの種類、テキストのカラーやウエイトがスタイルシートで指定されている。これらはInDesignで文字スタイルをオーバーライドし、ハイパーリンクを適用しただけなので、Sigil上での編集は一切不要なのである。もちろん、このままKindle Previewerで変換すると、そのままKindleに反映される。

140307-02.gif
*テキストをタップすると、

  ↓

140307-03.gif
*テキストリンクをタップすると、内部ブラウザでYouTubeが開く。iPhone5で表示したもの。

 さて、テスト時に少し気になったことに、インライン画像の書き出しがあった。関連画像をepubに配置するときは、InDesignではインライン画像にするしかない。テキストの上に配置すると、xhtmlファイルの最後に置かれるだけので、指定位置に挿入したい場合はあとでマニュアルで修正するしかない。インライン画像にするとテキスト内に配置されるので、その位置で画像が配置される。

 挿絵的に入れる場合は、段落の一つして配置することになる。そうなると画像の配置位置を指定したレイアウトはできない。どうしてもレイアウトして画像の位置を指定する場合はテーブルなどでテキストと画像を配置するしかないだろう。その場合、デバイスが異なると表示チェックが必要になる。ただしそれでも小さなデバイスでテキストサイズを大きくすると、レイアウトを意図通りに反映させるのは厳しい。段落と段落の間に挿入するのがリフローの基本だろう。

 作成したepubをKindle Previewerで表示させると、画像のサイズが思いの外小さい。ほとんどサムネイルサイズといっていい。理由はよくわからないが、InDesignでは画像にスタイルシートを適用して、表示サイズをスタイルシートで指定するように書き出されていた。xhtmlファイルで

<img alt="2-01.psd" class="frame-1" src="../Images/2-01_fmt.jpeg" />

と指定されている。「frame-1」というスタイルシートが指定されているので、スタイルシートを開いてみると、

img.frame-1 {
    height:71px;
    width:126px;
}

というスタイルが書き出されていた。つまりこの大きさで画像を表示しているので、大きく表示したいときは、ここを変更すればよい。「height:142px; width:252px;」にすると、倍の大きさで表示される。小さな画像でもタップやダブルタップでオリジナル画像を表示できるので、サムネイルで表示させたほうがいいかもしれない。

 あとは必要な所でxhtmlファイルを分割して表紙画像を取り込む。ここでの表紙画像は本の最初のページに表示されるもので、本当はなくてもいい。ブックを開いたときは、2ページ目を表示するので、戻らない限り表示されないのである。ただし画像を取り込んでカバー画像として指定しておかないと、アプリ内の本棚に並んだ時、サムネイルが表示されない。表紙画像の取り込みは必要だ。

 Kindleへの申請は簡単で、iOSアプリやiBookstoreのようにアップロード専用ツールは不要で、mobiファイルがあればWebサイトだけで完結するので作業はとても楽だった。


◆進撃の巨人、ミスリードの謎 [Kindle版]
http://amzn.to/1fc6uzS

 
posted by jink0222 at 10:54 | Comment(0) | TrackBack(0) | InDesign CS6からepub | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/390754272
※ブログオーナーが承認したトラックバックのみ表示されます。

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

この広告は1年以上新しい記事の投稿がないブログに表示されております。