Kindle向け固定レイアウト本をAndroidのタブレットで横向きにしたら真っ白になる場合の製作者側の対処法

2013/2/21 11:17

この記事ではアフィリエイト広告を利用しています。

Kindle向け固定レイアウト写真集を作成した際にハマったことを色々と書き連ねていますが、そういえばまだありました。今回はAndroidのタブレット端末で遭遇した問題について。

今回の電子書籍「マフモコスナップ」は固定レイアウトで、端末を縦向きにしても横向きにしても大丈夫なように作成しました。

作成中の表示確認は、スマホのKindle for Androidでは確認していました。タブレットのAndroidにインストールされるKindleアプリも同じもののはずなので、タブレットもきっと大丈夫だろうと思って確認していなかったのですが、それがミスでした。

出版後にダウンロードした友人から「ARROWS Tabで真っ白になって見れない。ただし横向きにしたときだけ…」という報告があったのです。

ARROWS Tabを @taguchi から借りて確認してみると、確かに真っ白に。挙動を見る限り、画像のサイズをうまく計算できずに画面外にコンテンツが押し出されているかのような様子でした。

KF8の固定レイアウトでは、

<meta name="original-resolution" content="768x1024"/>

のように画像コンテンツのオリジナルのサイズを指定します。今回の写真集で用意した画像ファイルは 1050 x 1400 のサイズに調整していたので、original-resolutionも1050×1400に指定していました。

結論から言うとこの指定が原因でした。そして、この original-resolution を768×1024というよくある画像サイズに指定し直すと、うまく回転して横向きでも表示されました。

あわせてCSSのほうでも width:768px; height:1024px; に修正。これでとりあえずきちんと表示されます。

元々このサイズを指定していたのですが、iOS向けに試行錯誤している間にこのサイズに変更していて、それが結局裏目に出てしまいました。しかもiOS向けはそこが原因ではなかったっていう…。

これは、他の端末では1050×1400でも問題なく表示されていたので、Kindle for Android Tabletのバグではないかと思います。

ちなみにARROWS Tabのディスプレイは 1920×1128 という XLARGE サイズだったので、指定した画像サイズが大きすぎたということは考えにくい。単純に、メジャーな画像サイズではなかったからというのが理由でしょうか。。？時間がなかったので他のサイズ指定は試していないのですが。

ちなみにKindle Format 8のガイドラインには、固定レイアウト本における画像はCSSのbackground-imageを使用しましょうと書かれています。

しかし、画像の大きさをうまく調整しないと画面からはみ出してしまったり、iOS向けKindleアプリではそもそもbackground-imageが無視されたりと上手くいかないことが多いので、今回は公式サンプルでも採用されている img 要素に画像を指定する方法を採用して作成しました。

Webエンジニアやってます。最近はドットインストールの開発がお仕事です。その傍ら、個人で Meity や電車遅延なう、梅酒.in、 #グラドル自画撮り部の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。