各ストアビューア向けのEPUB制作で、画面サイズに対して%で画像表示サイズを指定することは長らくできておらず、悩ましい問題です。これは2014年頃にEPUB組版表現の対応状況を調査し始めてから状況がずっと変わっていません。特にKindleでは、PaperWhiteなどの電子ペーパー専用端末とAndroid版では％指定が効くものの、iOS版Kindleアプリで効かないという状況が続いており（参考／項目7-9）、このために画像を画面内の特定のサイズで表示させるために「余白部分込み」で画像化するというまるでWebの初期のようなTipsを使用せざるを得ませんでした。
　これをやってしまいますと、ビューア側の設定で背景色を変えた際に余白部分が白く表示されて見えてしまうので可能ならば避けた方が良いのですが、サイズ指定が効かないよりはマシということで使われてきたわけです。
　ただ、最近JAGATの研究会活動の一環として改めて挙動をチェックしてみたところ、％指定が効かなかったiOS版Kindleでもどうやら単位にvw/vh^※1を用いたサイズ指定なら効くことがわかりました。であるならば、もしかしたら%とvw/vhを同じ値で指定してやることでKindleの全プラットフォーム共通のサイズ指定ができるかもしれません。ということで試してみよう、というのが今回の趣旨です。

　ということでひとまず目的は達しました。とはいえ％でのサイズ指定が効かないのはKindleだけではなく、Mac版iBooks（もうApple Booksですが）でも同様だったりしますので、出来るなら将来的にはメディアクエリは外したいところです。各電書ストアビューアの表示対応を期待します。

※1 vwは表示中の画面（ビューポート）の横幅に対しての%指定、vhは高さに対しての%指定の意味。参考記事はこちら。
※2 電書協EPUB3制作ガイドのCSS記述を参考にしている。
※3 中の人に報告上げてブログ記事作る間に該当のビューアで修正がかかった模様。対応が早くてありがたい。とはいえ不具合が出るビューアが1社だけとは限らないので記事としては残しておく。
※4 参考：http://epubsecrets.com/media-queries-for-kindle-devices.php

おまけ
EPUBで電書協ガイドの規定クラスに追記するには以下の形になるはず。book-style.cssの作品別カスタマイズ領域に書けばよい。

CSS

/* iOS版Kindleでのサイズ指定反映対策（vh/vw追加指定） */ @media amzn-kf8 { .height-010per { height: 10vh; } .height-020per { height: 20vh; } .height-025per { height: 25vh; } .height-030per { height: 30vh; } .height-033per { height: 33vh; } .height-040per { height: 40vh; } .height-050per { height: 50vh; } .height-060per { height: 60vh; } .height-067per { height: 67vh; } .height-070per { height: 70vh; } .height-075per { height: 75vh; } .height-080per { height: 80vh; } .height-090per { height: 90vh; } .height-100per { height: 100vh; } .width-010per { width: 10vw; } .width-020per { width: 20vw; } .width-025per { width: 25vw; } .width-030per { width: 30vw; } .width-033per { width: 33vw; } .width-040per { width: 40vw; } .width-050per { width: 50vw; } .width-060per { width: 60vw; } .width-067per { width: 67vw; } .width-070per { width: 70vw; } .width-075per { width: 75vw; } .width-080per { width: 80vw; } .width-090per { width: 90vw; } .width-100per { width: 100vw; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

/* iOS版Kindleでのサイズ指定反映対策（vh/vw追加指定） */ @media amzn-kf8 { .height-010per { height:  10vh; } .height-020per { height:  20vh; } .height-025per { height:  25vh; } .height-030per { height:  30vh; } .height-033per { height:  33vh; } .height-040per { height:  40vh; } .height-050per { height:  50vh; } .height-060per { height:  60vh; } .height-067per { height:  67vh; } .height-070per { height:  70vh; } .height-075per { height:  75vh; } .height-080per { height:  80vh; } .height-090per { height:  90vh; } .height-100per { height: 100vh; } .width-010per { width:  10vw; } .width-020per { width:  20vw; } .width-025per { width:  25vw; } .width-030per { width:  30vw; } .width-033per { width:  33vw; } .width-040per { width:  40vw; } .width-050per { width:  50vw; } .width-060per { width:  60vw; } .width-067per { width:  67vw; } .width-070per { width:  70vw; } .width-075per { width:  75vw; } .width-080per { width:  80vw; } .width-090per { width:  90vw; } .width-100per { width: 100vw; } }

（2018.10.1）

　先日、特定ページのみを固定レイアウトに設定したEPUB3サンプルを作成し、ブログにアップしたのですが、どうも挙動を観察した限りではkobo touchはEPUB3 Fixed Layoutに対応しておらず、コンテンツはリフローで表示されているようです。指定ページでフォントサイズを変更できてしまうことからそれがわかります。また、iPadのkoboアプリもどうやらページごとの固定レイアウト指定には対応していない様子で、全体の指定がリフローか固定レイアウトかのみを見て表示を切り替えるため、こちらも全体がリフロー表示されていました。
　データをReadiumで開きますと固定レイアウトのページの周囲のみに枠が表示されるため、きちんと一部ページ固定レイアウトの指定はできているようなのですが、まだまだビューア側のEPUB3固定レイアウト対応は不十分といったところでしょうか。
　ただ、このkobo touchの固定レイアウト非対応という仕様を逆手に取れば、「iPadのkoboアプリやiBooksでは固定レイアウトで表示され、kobo touchではリフロー表示される」ちょっと面白い仕様のEPUB3ファイルが作成できそうかなと考えましたので、挑戦してみました。

1　メディアクエリを設定してEPUBをパッケージ化

ヘッダ行にメディアクエリを記述

　前回同様にまずこちらの手順で作成したXHTMLデータを流し込み、FUSEeβで固定レイアウトEPUBパッケージを書き出しますが、今回は異なるデバイスでそれぞれに最適化させた表示をさせるためにCSS3のメディアクエリを利用しました。メディアクエリ（Media Queries）というのは表示環境ごとに異なったCSSを適用するための設定で、画面の縦横のピクセル数などを検知して、適用するCSSを切り替えることができます。メディアクエリの設定についてはこちらなどが参考になります。
　今回はkobo touchとkoboアプリ／iBooksでCSSを切り替えて最適な表示をさせるために、これを利用します。
　kobo touchの横幅ピクセル数は600pxですので、これを境にCSSを切り替えることとし、XHTMLのヘッダー行に以下のように記述しました。

<link href="../style/kobotouch.css" rel="stylesheet" type="text/css" media="only screen and (max-width:600px)" />
<link href="../style/koboapp_ibooks.css" rel="stylesheet" type="text/css" media="only screen and (min-width:601px)" />

　これで横幅600ピクセルを境として「kobotouch.css」と「koboapp_ibooks.css」が切り替わります。

2　FUSEeβで固定レイアウトEPUBとして書き出す

固定レイアウトEPUB3パッケージを書き出す

　前回同様、必要なファイルの登録を済ませた後、とりあえずEPUB3パッケージとして書き出してしまいます。前回の経験でkobo touchがEPUB3固定レイアウトに対応していないことがわかりましたので、今回は固定レイアウトに対応しているiPadのkoboアプリ及びiBooksに合わせて、幅768px、高さ1024pxの固定レイアウトEPUBとして書き出しました。iBooksに対応させるため、今回は「iBooksを有効にする」のチェックボックスをオンにしました。

　なお、第3世代iPadの解像度は幅1536px、高さ2048pxですが、ここの指定（viewportの指定値）は幅768px、高さ1024pxで問題ないようです。iPhone版でも全体がそのまま縮小表示されるところを見ると、どうも縦横比だけを見ているのではないかと思われるのですが、そのあたりは専門ではないので深くは突っ込みません^※1。

4　「fixed-layout.css」へのリンクを削除する

fixed-layout.cssへのリンクを削除

　各XHTMLファイルにFUSEeβが自動挿入する「fixed-layout.css」へのリンクの記述を削除します。この自動挿入される「fixed-layout.css」の内容は<body>タグのwidthとheightの指定ですが、これが原因で解像度の異なるkobo touchで表示が崩れますのでリンクを削除し、メディアクエリで振り分けられる固定レイアウト用のCSSファイル「koboapp_ibooks.css」にこちらの記述を追記します。さらに「fixed-layout.css」ファイルそのものも削除します。

5　opfファイルを編集する

opfファイルを編集する

　ファイルが存在していないのにopfファイル内に登録が残っていますとバリデートチェックでエラーが出ますので、パッケージファイル「content.opf」をテキストエディタで開き、さきほど削除した「fixed-layout.css」ファイルの登録行を削除します。

<item id="style.fixed-layout.css" href="style/fixed-layout.css" media-type="text/css" />

　上記の行をまるごと消します。なお今回はファイル全体を固定レイアウト指定しましたので、前回行った固定レイアウト指定関連の修正は行っていません。

6　iBooks用表示指定ファイルを修正する

iBooks用表示設定ファイルを編集する

　EPUB3パッケージデータ内「META-INF」フォルダ内の「com.apple.ibooks.display-options.xml」をテキストエディタで開いて修正します。このファイルはiBooks用の表示指定ファイルです。ここに「<option name="fixed-layout">true</option>」とあるのがEPUBファイル全体の固定レイアウト指定の指示で、パラメータがtrueかfalseかでiBooksでファイルを開いた際のリフロー表示／固定レイアウト表示が切り替わります。
　今回は2行目の「<option name="open-to-spread">true</option>」の「true」を「false」に修正しました。この設定は最初にファイルを開いた際にページを見開きで表示するか、1ページを拡大して表示するかの切り替え設定です。今回は1ページを拡大して表示させる設定にしました。こちらの参考ページを見る限りではデバイスの画面の向きをロックすることなども可能なようですが、今回は設定しませんでした。また、EPUBファイル内にjavascriptを埋め込み、iBooks内で動作させる場合などは、ここで「interactive」の設定を「true」にしておく必要があるようです。

7　CSSの記述・修正

iBooksでのサンプル表示

　CSSの調整を行います。今回は2種類のCSSをメディアクエリで分岐適用しますので、それぞれの画面サイズごとに設定を順次追い込んでいきます。今回はDreamweaverを利用してデバイスをシミュレーションしながら設定し、最終的な調整はパッケージングしたEPUB3ファイルを各デバイスで開いて表示を確認しながら行いました。
　なお今回は、koboアプリ／iBooksでは2段組で一部の写真を裁ち落とし的に配置して雑誌風のレイアウトを狙い、kobo touchでは画面横幅一杯に写真が表示されるようにしています。

◇

　以下から今回作成したサンプルデータをダウンロードしていただけます。kobo touch（リフロー表示）、iPad版kobo App（フィックス表示）、iBooks（フィックス表示）のほか、Mac版およびWindows版のReadiumで表示を確認しています。ただしフォントサイズは固定で大きくすることができず、Readiumには画面拡大の機能はないため個人的にはおすすめしません。おそらく文字が小さすぎるものと思います。Macで読む場合にはフィックス表示には対応していませんがMurasakiが比較的読みやすいようです（ただし文字を拡大するとレイアウトが崩れます）。
　また、iPhone版のkobo App／iBooksでも閲覧は可能ですが、やはり文字が小さすぎますので、固定レイアウト関連の記述のみを削除したiPhone用バージョンを作成しました。画面の横幅に合わせてリフローで表示されます。きちんと表示をCSSでコントロールするようにしておけば、こうした複数デバイス向けの展開も比較的簡単に行えます。

＞＞TravelogueVietNum ダウンロードはこちら

※ダウンロード先を私の所属する会社のホームページ内ダウンロードコーナーに移動しました。内容の改訂等は行っていません。

※1　viewportの指定値に関しては参考ページに、横738px、高さ985pxでの指定例があるなど、今ひとつ最適な値がわからない感があります。いずれより詳しい情報が手に入ったら別エントリで報告できるかもしれません。

（2012.9.10）

EPUBパッケージ内のIDPFのバリデータを通らない記述を修正しました。

（2012.10.29追記）

ダウンロード先を私の所属する会社のホームページ内ダウンロードコーナーに移動しました。内容の改訂等は行っていません。

（2012.12.25追記）