スマートフォンで電子書籍買えるようにするまでの顛末
まだ完全に検証を終えたわけではないのですが、スマートフォンで買えるようになったと思います。
特にiPhoneはiOS4.2からePubファイルをSafariで直接ダウンロードしてiBooksで開けるようになったので、これまでのようにパソコンからiTunes経由で同期しなくてもよくなりました。これは大きな進歩です。
やはり電子書籍というのは「欲しいと思ったときにすぐ買える」というのがポイントだと思うので。
WordPressでスマートフォン対応
今回は見映えもiPhoneっぽくして、パーツなども極力近づけました。かなりめんどくさかったです。
このサイトではiWPhoneというプラグインを使っています。これはiPhoneかiPod Touchでサイトを訪れたときにテーマを切り替えるだけなのですが、これをちょっとカスタマイズし、Androidケータイで来たときも切り替えるようにしました。いまのところXperiaを持っている知人に頼んで確認しただけですが、デフォルトブラウザを使っている限りは表示できると思います。
Androidのローテーション挙動でハマる
Androidに関してはほぼiPhoneと同じようなレイアウトを実現できた（CSS3をサポートしてるから）のですが、一点だけ困ったことがありました。それは、画面を横にしたときの挙動の違い。
iPhoneでは画面を横にしたとき、そのままの縮尺で拡大されます。また、内部的にも同じ画面幅を保つようです。
//ローテーションさせたときのイベントリスナー(MooTools)
window.addEvent('resize', function(e){
console.log(window.innerWidth);
//縦でも横でも320を出力
});
新しいレイアウトでは「目次」ボタンをクリックするとナビゲーションが左からゾロっと出てくるようにしてあるので、これは大変ありがたい仕様でした。
しかし、Androidの場合は横にしたとき画面のサイズが変わる様子。レイアウトが間延びしてしまうのはしょうがないとして、左に隠れているはずのナビゲーションがコンテンツにかぶってしまうのは困りました。
とりあえず、resizeイベントで一々サイズを調整することでかぶるのは回避。
一応Androidエミュレータはダウンロードしてあるんですが、なぜかネットにつながらないので、デバッグできません。やっぱAndroid端末買わないとダメですかね。
アプリケーションキャッシュ動かず
以前のエントリーで偉そうにアプリケーションキャッシュのやり方について書きましたが、なぜか上手くいかなかったので、外しました。上手く行っているときはメチャクチャ早いので、ぜひ導入したいのですが…
スマートフォン対応の雑感
というわけで、色々試行錯誤することとなりました。疲れました。アメリカではすでにAndroidのシェアがiPhoneを上回っていると聞きますし、結局、ブラウザ戦争と同じことが起きる可能性は100%ですね。僕はもう「早く戦争が起きないかしら」っていう気分ですよ。