タブレットのサイズにかかわりなくコンテンツサイズが自動調整される "PDF 電子書籍" とは違って、"ePub 電子書籍" の場合には、作り手はサイズの異なるタブレットそれぞれに向けてコンテンツを "再編集" しなければならない。ここでも、あの「デバイスにあわせたレイアウト」という課題が浮上するのである。
自分の場合、とりあえず現在、"iPad" と "iPhone4/iPod touch" とを当面のターゲット・タブレットとしている。したがって、コンテンツはひとつ作れば間に合う、というイージーなわけには行かない。それぞれのサイズに向けた再編集が必要と覚悟している。
さらに、"iPad" の場合には、"縦長" の "単一ページ" 表示と、"横長" の "二ページ見開き" 表示とが随時併用される構造のため、さらにそれを見越した調整までしておかなければならない。
ページ・レイアウトに無頓着な読み手に向けてならば、とにかく読めることは読めるわけだから良さそうな気がしないではない。しかし、そんな読み手ばかりではないわけで、まさに「デバイスにあわせたレイアウト」に関して、最大限、神経を使った方が無難だということになろう。
では、幾とおりものコンテンツを逐一用意しなければならないのだろうか。"Web スクリプト" も、書き方次第では大混乱を来すことにもなりかねない。自分も、以前には、かなりの混乱を招いていた覚えがある。
ただ、バカではないから(もちろん利口でもないが)、今ではできるだけ手の掛からない方法に辿り着いている。"XHTML & CSS" アプローチをフル活用する方法の事である。
以前、次のように書いたことがある。
＜ちなみに、自分は今のところ、"iPhone,iPod touch" サイズを仮の基準にしている。しかし、 "iPad" の画面サイズは、"9.7インチ／1,024 * 768" であり、"iPhone 4、iPod touch" のそれは "3.5インチ／960 * 640/480 * 320" であり、流用できる域を大幅に超えて異なっている。
柔軟にサイズを変えてくれる "PDF" の場合でさえ、読み易い "文字サイズ" という点を考慮するならば、やはり、ソース・ファイルとなる "Web ページ" などの作成に当たっては、"画面幅" などに神経を遣わざるを得ない。
まして、画面サイズ自体は事実上固定となる "ePub" の場合には、"画面幅" などのページ・レイアウトについてはソース・ファイル段階において計算済みとしておかなければならない。 ......
で、そうなるとやれることは一つ。こうした "サイズ" の "可変性" ということなれば、何と言っても、"Web ページ" の作成アプローチを "XHTML & CSS" という現時点での "デフォルト" 方式に切り替えることではないかと思っている。
この方式では、"Web ページ" は建築設計ではないが、 "構造部分" と "衣装部分" とに分けられて構成されているのだ。
"CSS" がその "衣装部分" ということになり、レイアウトの変更の大半はこの "CSS" の "変数" を変えることで達成されるのである。
この方式で "Web ページ" を仕上げていると、異なった画面サイズの "Book Reader" に向けた調整作業も、いわゆる "アレンジ" といった軽作業で済ませることが可能となるのである。＞（＜各種サイズの"BookReader"向けの"電子書籍(eBook)"制作には､"XHTML&CSS"が必須!（当日誌 2010.11.09）＞）
もう、"XHTML & CSS" アプローチを使うというこの点については "耳タコ" になっていると言われかねない。しかし、いざ、実作業で「デバイスにあわせたレイアウト」という課題に直面してみると、今更のように "XHTML & CSS" アプローチの便利さを実感することになるはずなのだ。
ところで、表示画面サイズで着目すべきは "横幅サイズ" だと言うべきだろう。
言うまでもなく "Web スクリプト" をベースとした "ePub 電子書籍" では、"フォント・サイズ" が変更され、仮に拡大されたりすると、文字が占めるスペースが不足するため、文字列が先送りされて "行" が増える。つまり、"縦方向" への文字の移動というかたちで埋め合わせがなされるわけである。
と言うことは、一応、タブレットの表示画面の "縦" サイズにについては柔軟に見ておいて差し支えないということだ。どっちみち、読み手によって"フォント・サイズ" が変更されたならば、初期設定の表示は崩れるからである。
ただ、"横幅サイズ" の想定が大きく異なっていると、一行で表示されるべき表題などが初期画面と異なって "行またぎ" をしてしまったり、画像がはみ出すという見っともなさが生じる。まさに素人っぽさを曝け出すことになってしまうわけだ......。
ここで、これらに関する経験上のコツを二、三並べておくことにする。あくまで、体験上での情報であり、自分なりに検証すべきであろう。
(1) 安全な表示画面 "横幅サイズ" →"iPad"：520px、"iPhone 4､iPod touch"：260px
前記箇所で＜"iPad" の画面サイズは、"9.7インチ／1,024 * 768" であり、"iPhone 4、iPod touch" のそれは "3.5インチ／960 * 640/480 * 320"＞と書いているが、 "表示可能サイズ" は一回り、二回り小さいことを実感させられている。
(2) "横幅サイズ" を "CSS" で設定する場合には、＜"width: 000px(or em)＞という "絶対値の指定" をすることになるが、この設定は、大前提となる "全体画面(ex. #wrapper etc.)" に関する幅設定にに止めておき、各要素ブロックについては、"無記入" にしておくか、＜"width: ---%＞という "相対値の指定" で賄うことが良さそうだ。自動調節をさせるためだ。
(3) 画像については別であり、表示可能サイズ内の＜width＞＜height＞を指定してやった上で、一ページ分を与えてやった方が無難である。文字部分と一緒にして "文字の回り込み" をさせようとすると却ってレイアウトの乱れが生じがちだ。
なお、用意する画像は、 "縦横比" が同じであれば、サイズ自体は近似値でＯＫ。
一ページ分を与えてやる件については、"Sigil" での "ePub 変換" の際に、"Chapter Break" 機能で "頭出し" を実行してやればうまく収まるはずである。
(参照：＜"ePub editor = Sigil"での"Chapter Break"機能は､各章"頭出し"に便利に使える! （当日誌 2010.11.07）＞)
こうした制作作業を進めるにあたっては、"iPad" 向け、"iPhone4/iPod touch" 向けといういわば "雛(ひな)型＝テンプレート" を自分なりに作り出しておくと便利であろう。 "XHTML" と "CSS" の双方についてである...... (2010.12.13）
コメントする