このブログを iOS デバイスに、とくに iPad に対応させようと試行錯誤を始めたのが 8 月の下旬。そろそろ一ヶ月になるが、ようやく iPad を中心に一群の iOS デバイスに対応させる作業が完了した。新しい iPod touch (→ 第4世代になるらしい)でも確認したから Retina ディスプレイを備えた世代のモノでも大丈夫だ。
デバイスを切り替える方法の調査から、スタイルシートを Blogger の外部に置く方法の調査やら考察に進み、Google App Engine (以下、GAE) を使う方法に気付く。さらには GAE アプリでスタイルシートを切り替える方法を採り、今に至っている。
細かなことになるが、Google Font API を試したことや、iPhone シミュレータを使って iOS デバイスでの見た目を確認することを思い付いたり、Redmine でプライベートな問題追跡を始めたのも、この作業の中でのこと。
ま、一番の苦労は、Blogger の(複雑な)テンプレートとの格闘だったけどな。ちなみに、そこでは Safari の「開発」メニューから起動できる「Web インスペクタ」が大活躍だった。これなくして、Blogger のテンプレートから生成される HTML の解析は困難だったろう。ましてやスタイルの定義は不可能だったに違いない。CSS によるスタイルの定義が、どう適用されているかの表示は、Blogger のスタイルを上書きするために、なくてはならないものだった。Safari、バンザイ ヽ(｀д´)ノ。
もっとも、Firefox にしろ、Chrome にしろ、最近のブラウザでは似たような機能は利用できるみたいだけどね。
スタイル定義における基本方針
多少、ブレたりもしたが、最終的には以下の方針に落ち着いた。
- iOS デバイスに対応する
- iPad (横向き)を基本サイズにする
- iPad (縦向き) はサイドバーを表示しない
- iPhone は向きに関係なくサイドバーを表示しない
- Mac 以外のデバイスでは通信量を考慮に入れる
作業を始めた当初は、iPhone の横向き 480px を、iPad の縦向き時のメイン領域にして、サイドバーも表示させようと考えていた。しかし、これだと iPad の向きを変えたときに、一行に表示されている文字数が変化してしまい、見づらいことがわかった。これを避けるため、縦向き時と横向き時のメイン領域の横幅を同じにしたい。かといって、サイドバーがあまり細くなっては、これまた中身が見づらい。悩んだ末、縦向き時にはサイドバーの表示をあきらめた。結果として、サイドバーが見たければ向きを変えるというユーザ体験を導入したことになった。
デバイスの向きを変えるとメニューの類が表示されるというユーザ体験は、iPad 標準アプリの「メール」や「メモ」などのものに少し似ている。
メイン領域
iPad で縦向き時にはサイドバーを表示させないので、画面幅 768px はすべてメイン領域の表示に使う。そして、横幅 768px をこのブログでの基本幅とし、Mac 向けのスタイルでもそのまま適用する。
一方、iPhone に最適化する際は横向き 480px での表示を基本とし、縦向きでの見た目は最低限の調整に留めた。なので、iPhone でこのブログを見るときには、なるべく横向きにして見てほしい。
サイドバー
メイン領域が 768px だから、サイドバーは iPad の横向き時の幅からメイン領域を除いた部分に表示する。つまり、1024 - 768 = 256 で 256px になる。
メイン領域と同じく、サイドバーの幅 256px も Mac 向けスタイルにもそのまま適用する。
Mac 向けのレイアウト
iPad の横向き時と同じレイアウトになる。縮尺は正確ではないけれど、27 インチ iMac で表示させた場合、横幅 768px + 256px は、だいたい左図のようになる。
ちなみに、Mac 上の Safari で 1024px のウェブページを表示させるにはウィンドウのサイズを 1040px にすると良い(→ AppleScript を使って URL を Safari のタブで開く)。余分な 16px はスクロールバーの分だ。
通信量に対する考慮
大した量じゃないという気もするのだが、Google Font API を使うのは Mac のみとした。
そもそも、iPhone の場合で、common と iphone の 2つ CSS ファイルで約 18 KB ある。通信量のことを気にするなら、これ自体も十分ムダだよな。
まとめ
Retina ディスプレイ搭載の iPhone 4、iPod touch (4G) への対応に少し不満が残っているものの、ほぼ満足行くスタイルに仕上がった。iPad や Mac で見たときはもちろん、iPhone で見ても、コンテンツを見る分には十分だ。
サイドバーをふくめたナビゲーション全般で改良の余地はあるけれど、HTML と CSS でやれる範囲はここまでだろう。この先は、JavaScript の活躍する領域になる。ただ、Blogger のテンプレートとの格闘には良い加減疲れたので、これ以上手を加えることはないと思う。スタイルのバグ修正や、ちょっとした新スタイルの追加はするけれど。
むしろ、Blogger は記事の投稿だけに使って、記事を見るには別のアプリやウェブアプリを使う方が良いんじゃないか、と思い始めている。先のナビゲーションの改良なんかもやりやすい。特定のブログを表示するためだけの iPhone アプリがあっても良いじゃないか。ブログシステム全体を作るのは大変でも、見るだけに特化するなら HTML + CSS でやることの延長として考えられる。
関連リンク
- iPod touch (Wikipedia:ja)
0 件のコメント:
コメントを投稿