iPhone

この投稿は6年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2011 年 1 月 13 日 2,353日前)
1,410文字 (読了時間3分)

SPONSORED LINK

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

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

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

特に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の最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2011 年 1 月 13 日にデザインの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

『ザナドゥへの道』と『フィネガンズ・ウェイク』との両方について言えるただ一つの特徴は、こういう本は一冊でたくさんだということだ。

— T・S・エリオット

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。