SPONSORED LINK

この投稿は5年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。

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

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

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

特に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%ですね。僕はもう「早く戦争が起きないかしら」っていう気分ですよ。

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。