« 高木正勝の新譜2枚がiTunes Storeでランクイン | トップページ | Singleか? EPか? iTunes楽曲のタイトルづけの不思議 »

2011年10月 6日 (木曜日)

悩むWebアプリのiPhone対応-押し間違いをどうするか? iTunesリンク作成サービスをiPhone/iPad/Androidに最適化

 iTunes Storeの商品にリンクをはるサービス、「Sticky iTunes Link Maker」(詳細は、捗るiTunesリンク作成! 検索結果まとめて iPhoneアプリ&楽曲対応)を、iPhoneやiPad、Androidなどのデバイスで使いやすくなるよう、ちょっと修正作業中。

Emu iPhoneやAndroid。

 解像度が低い端末だと、ラジオボタンやチェックボックスが選択しにくい。

 という、話。

問題点 - 指だと間違って選択してしまう

 解像度の高いパソコンのブラウザで見る分にはいい。

 しかし、iPhoneやAndoroid(以下、低解像度デバイス)などでは指で操作することもあって、間違って選択してしまうことがあるのだ。

 解像度が高いiPadでも、見た目は問題ないけど、間違って選択することはある。

 まずは、パソコンのブラウザでの表示。

Ieold

 マウスならOKだけど、低解像度デバイスではちょっと厳しい。ということで、最初の対処としては、ブラウザ判定をして、iPhone、iPad、AndroidではCSSのline-heightで行間を空けることで対処していた。

Emuold

 以前書いたエントリでも触れた話だ。

 WebアプリをiPhone対応にするためにやった8項目はてなブックマーク - WebアプリをiPhone対応にするためにやった8項目: point of view point

 多少はましになる。しかし、同じ行内に複数のラジオボタンがあると、やっぱり厳しい。

 iPhoneならピンチで拡大が楽にできるので、ちょっとは手間が増えるがなんとかなる(だいたい、デフォルトの「標準」を使う分には選択しなくてもおいし)。Androidでもピンチで拡大できるGalaxy Sなら同様。しかし、より低解像度で拡大には画面上のボタンを押す必要がある(ピンチ操作で拡大できない)ZEN Touch 2だとかなり面倒。

ラジオボタン&チェックボックスをiPhone風にして対処

 ということで、だいぶ前にチェックしてあったjQueryとCSSで、iPhone風ラジオボタン・チェックボックスを試す。この記事を参考に。というか、丸パクリで。

 jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス | Webクリエイターボックスはてなブックマーク - jQueryとCSSで作るiPhone風ラジオボタン・チェックボックス | Webクリエイターボックス

 とっても便利。お世話になります。

 それでできあがったのがこれ。

Emunew

 見た目はOK。低解像度デバイスで操作してみたところ、指で押し間違うこともなさそう。

 ためしてみると、HTMLの編集はけっこう面倒。画像の配置にはfloatを使っているので、そのままでは配置がぐちゃぐちゃになる。チェックボックス&ラジオボタンのLABELの場所を変えなくてはならないからだ。

 さらに困ったのが、3個以上のラジオボタン。2個までならいいけど、それより多い場合は対応できないということが判明。そこはそのままですました。これくらいなら指操作でもなんとかなる。

 また、見た目が悪いので、適宜改行を入れるようにした。これもブラウザ判別で行なっている。

 このほか、選択肢が、on/offでoffが黒になるのはいいのだけど、小・中だと、中が黒になるのはちょっとあれかもしれない。画像を用意して対処することもできるけど、それは後回し。

パソコンのブラウザはどうするか?

 さて、このiPhone風のラジオボタンとチェックボックス。パソコンで見るとちょっと違和感がある。

Ienew_2

 原因は、やはり見た目が慣れないものからだ。

 それでも、色彩的に派手になったし、視認性も高まる。配置をちょっと工夫することで違和感を最小限にとどめる。それでもやはり元のままのほうがいいだろうか? という点で悩み中。どうですかね?

 とにかく、多少は使いやすくなってので、スマートフォンからのブログ更新時のお役に立てればと思います。

 あと、「jQuery Mobile使えよ」という話もあるかもしれませんが、PC用とスマートフォン用の両方をメンテするのが面倒そう、という理由で手を出してません。いや、覚えたら楽になりそうという気もするんですが。

その他の修正 - 「詳細」追加

 ついでに、ほかにもいろいろ修正した点とか。

 タイトル部分をテキストからグラフィックに。多少は見栄えがよくなった気がする(自己満足)。

 リンクの配置デザインも1種類新たに追加。掲載する情報を増やした「詳細」というやつを。

 詳しくはまた別のエントリで。


|

« 高木正勝の新譜2枚がiTunes Storeでランクイン | トップページ | Singleか? EPか? iTunes楽曲のタイトルづけの不思議 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35726/52923123

この記事へのトラックバック一覧です: 悩むWebアプリのiPhone対応-押し間違いをどうするか? iTunesリンク作成サービスをiPhone/iPad/Androidに最適化:

« 高木正勝の新譜2枚がiTunes Storeでランクイン | トップページ | Singleか? EPか? iTunes楽曲のタイトルづけの不思議 »