fbpx

メニュー

iPhone対応顛末記

高橋文樹 高橋文樹

この投稿は 13年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

スマートフォンで電子書籍買えるようにするまでの顛末

新しいスマートフォン向け画面
新しいスマートフォン向け画面

まだ完全に検証を終えたわけではないのですが、スマートフォンで買えるようになったと思います。

特にiPhoneはiOS4.2からePubファイルをSafariで直接ダウンロードしてiBooksで開けるようになったので、これまでのようにパソコンからiTunes経由で同期しなくてもよくなりました。これは大きな進歩です。

やはり電子書籍というのは「欲しいと思ったときにすぐ買える」というのがポイントだと思うので。

WordPressでスマートフォン対応

iPhoneっぽいストライプ
iPhoneっぽいストライプ

今回は見映えもiPhoneっぽくして、パーツなども極力近づけました。かなりめんどくさかったです。

このサイトではiWPhoneというプラグインを使っています。これはiPhoneかiPod Touchでサイトを訪れたときにテーマを切り替えるだけなのですが、これをちょっとカスタマイズし、Androidケータイで来たときも切り替えるようにしました。いまのところXperiaを持っている知人に頼んで確認しただけですが、デフォルトブラウザを使っている限りは表示できると思います。

Androidのローテーション挙動でハマる

iPhoneで画面を横にしたとき
iPhoneは縮尺固定

Androidに関してはほぼiPhoneと同じようなレイアウトを実現できた(CSS3をサポートしてるから)のですが、一点だけ困ったことがありました。それは、画面を横にしたときの挙動の違い。

iPhoneでは画面を横にしたとき、そのままの縮尺で拡大されます。また、内部的にも同じ画面幅を保つようです。

//ローテーションさせたときのイベントリスナー(MooTools)
window.addEvent('resize', function(e){
	console.log(window.innerWidth);
	//縦でも横でも320を出力
});

新しいレイアウトでは「目次」ボタンをクリックするとナビゲーションが左からゾロっと出てくるようにしてあるので、これは大変ありがたい仕様でした。

Androidでナビゲーション
Androidでナビゲーションがかぶった

しかし、Androidの場合は横にしたとき画面のサイズが変わる様子。レイアウトが間延びしてしまうのはしょうがないとして、左に隠れているはずのナビゲーションがコンテンツにかぶってしまうのは困りました。

とりあえず、resizeイベントで一々サイズを調整することでかぶるのは回避。

一応Androidエミュレータはダウンロードしてあるんですが、なぜかネットにつながらないので、デバッグできません。やっぱAndroid端末買わないとダメですかね。

アプリケーションキャッシュ動かず

以前のエントリーで偉そうにアプリケーションキャッシュのやり方について書きましたが、なぜか上手くいかなかったので、外しました。上手く行っているときはメチャクチャ早いので、ぜひ導入したいのですが…

スマートフォン対応の雑感

というわけで、色々試行錯誤することとなりました。疲れました。アメリカではすでにAndroidのシェアがiPhoneを上回っていると聞きますし、結局、ブラウザ戦争と同じことが起きる可能性は100%ですね。僕はもう「早く戦争が起きないかしら」っていう気分ですよ。

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。