KDPで使える！ 固定＆リフロー用ファイル作成方法

★第二章：固定レイアウトのコンテンツとは？

ここまで、リフローのコンテンツを作るためのツールを中心に、それ以外に動作確認に必要なものも含めてご紹介してきました。引き続き、固定レイアウトの(画像ベースの漫画のようなもの)コンテンツを作るためのツールを紹介していきます。

固定レイアウトのコンテンツは、リフローレイアウトのコンテンツよりも、難易度が高く、作ることが難しいもの・・だと思われてきました。僕自身、自分の作品を完全動作させることができませんでした。調べていきながら、いろいろな方々からご教示をいただきました。

１、「さっそくKindle用コミックを公開してみよう！」
http://www.clip-studio.com/clip_site/howto/library/page/view/sassoku_kindle_01_001

２、「鈴木みそ先生のブログ」
http://www.misokichi.com/chinge/2013/01/amazon04.html
記事のなかに、サンプルファイルがダウンロードできるリンクもあります。

端的にいえば、この２つのリンク先を参照すればほぼできてしまいます。サンプルファイルというものがあるのですが、そこに基本となるテンプレートが用意されていて、ダウンロードして展開し、内容を少しいじるだけでいいのです。鈴木みそ先生のブログのファイルのほうが、ページ数を多く作ってあるので親切かもしれません。

htmlというフォルダがあり、ここにはhtmlファイルがページ分(サンプルとしてあえてたくさん)入っています。使わない分は消せばいいです。あとはcontent.opfやcontent.ncxといった設定ファイル。opfはウェブでいうindex.htmlに近いものがあり、これが中心となるファイルです。ncxのほうは、目次を生成しているデータで、これもまた重要です。style.cssは、いわばスタイルシートで、全体のデザインについて書いてあります。

一番上だけ、cover.htmlとなっていますが、epubでは表紙の画像というものが特殊な位置づけになっていて、cover.jpgとかcover.pngみたいに名づけられるので、それに伴ってhtmlもcover.htmlになっています。その次のhtmlは２、３、となっていっていますね。

page0001.htmlについては、cover.htmlと同じなので、僕はあとで消して使っています。ただ、アマゾンのヘルプでは、表紙は中にもう一枚入っている(だぶっている)ほうが望ましいと書かれているので、皆さんでどちらかを選んでください。

この方法では、画像ファイルは自動化処理などはしません。意外と思うようにいかなかったりするので、逆に厄介かもしれません。なので、自分でツールなどを使って、あらかじめすぐ使える状態にしておきましょう。それをこのimagesフォルダに入れてください。７５８ｘ１０２４のpngファイルで僕は作りました。paperwhiteでの表示に最適化しようと思ってのことです。

表示されているのは自作ですが気にしないでください。こんな風にして、01.png、02.png、という風に連番でファイル名をつけていきます。この番号のとおりにページになるということです。pngにしたなら、後述するcontent.opfのなかで画像やhtmlを指定する際に、デフォルトでjpegとなっているところを全部pngになおさないといけません。previewerでエラーログが出るので忘れることはないでしょうが、書き間違えると当然正しい表示にならないので注意が必要です。一番下のほうにcover.pngもあります。

そのままではちょっと開けないファイルがあるので、テキストエディタを使います。terapadでも秀丸エディタでも、それ以外でも何でもいいです。これはkindleの手順ではないので割愛しますが、「窓の杜」みたいないわゆるソフトウェアライブラリからダウンロードするか、名前で検索してインストールしてください。

まず、<metadata>　</metadata>で囲われたエリアです。上の方にまず作品名と著者名があるので、変更します。コメントがついているので分かりやすいと思います。真ん中らへんに、<画像の表示解像度>という部分があるので、７５８ｘ１０２４とか、あるいは設定したいと思う数値に変更してください。

クリックして拡大していただければ分かると思いますが、ncx(目次)、CSS(デザインのスタイルシート)、画像、html、という風に、それぞれのカテゴリにおいてすべての登場人物が書かれていっています。この<manifest></manifest>で囲われた部分は「登場人物の紹介」なんです。だから見ての通り、サンプルファイルをダウンロードすると画像がjpegになってるんですが、今観ているのは僕の作品用で、pngになっています。ここは大変ですが手で書き変えてください。棒線が引かれてる部分は、表紙はこれだよって書いてありますので、このままで。画像をjpegで使う場合はjpegのままでいいです。

<spine></spine>で囲われた部分は、上の<manifest>で定義したものを実際に配置する部分です。

文庫本の表紙の次くらいの登場人物ってところに入ってないと、この実際の第一章では登場できない、そんな感じです。名前は同じじゃないとエラーになります。棒線が引いてあるところは、右開きの本だよ、って書いてあります。そのままで。

一番下の<guide>っていう部分は、どのページから最初に表示されるかってことです。ここ、今はpage02になってますが、coverのほうがいいのかもしれません。ひとまずこのままで。この設定だと２ページ目が最初に開いた時に表示されます。

次に、content.ncxです。ちなみにstyle.cssは変更不要です。

ちょっとサンプルファイルをダウンロードした状態だとここが乱れてますが、僕が張った画像みたいにして調整してください。目次を使う操作をした際に、ページが順番に、書かれているとおりに出てくるわけです。kindleの仕様で、「最初」、「最後」、っていうのがあるので、被らないようにするためには、２ページ目と、最後のページのひとつ前までを書けばいいです。

ただ、このままだと表紙(カバー)と最初が入れ替わるんですよね・・。上で書いたcontents.opfの<spine>内部の<guide>の設定だと思います。そこをcoverにしておけばいいのかもしれません。

タイトルの部分をまず変えます。そして、<navPoint ・・・>っていう部分が、それぞれのページに該当する目次の設定なので、htmlファイルの順番だけ、この項目をコピペして、３、４、５、と増やしていけばいいです。

すべてのメンバーは揃いましたね。

・content.opf
　webでいえばindex.htmlに相当する重要なファイル。基本的な設定の多くはここに書かれている。

・content.ncx
　補助的な設定ファイルだがこちらも重要。目次を生成するための設定ファイル。

・style.css
　全体のデザインを指定するための設定ファイル。いじらなくていいです。

・html
　htmlファイルが入っているフォルダ。中のhtmlファイルそれぞれを編集し、ページで呼び出すべき画像ファイルと対比させる。タイトル部分もその際に変えてください。ちょっと大変ですが、画像＝ページの分だけ、手作業で変えていきましょう。といってもやっていけばすぐ終わります。

・images
　画像が入っているフォルダ。01.jpg、02.jpg・・という風に、htmlファイルやcontent.opfで書かれている画像ファイル名とずれないようにしながら、ページ分の画像を入れます。フォルダはこのとおり「images」じゃないと駄目なので注意してください。

★ここから、epubファイルを生成していきます。

フォルダを開いて中身を表示した状態で、ここの「整理」っていうボタンを押します。後述しますが、フォルダ名は日本語ではなく、半角英数字にしてください。previewerでの変換でエラーが出てしまいます。