« 1000人ウクレレ at Aloha Yokohama 2010 | トップページ | DCPRG活動再開!! »

2010年7月20日 (火曜日)

WebアプリをiPhone対応にするためにやった8項目

 iPhoneはURLのコピペがめんどくさい。

 ということで、はてブやニュースまとめに使えるWebアプリというかWebサービス「linclip」を作る際には、iPhoneでもしっかり使えるようにしたい、というのが目標としてあった。

 ページからリンクを抽出してHTMLコードまで出力すれば、タイトルの選択とかURLのコピーとかそのへんが自動化できるので、iPhoneならではの面倒さがなくなるはずという考えからだ。

 iPhone対応のために行ったことをここでまとめておく。たぶん、すぐ忘れるから。で、こんな感じ。

  • Safariによる動作確認
  • 表示幅の設定(viewport)
  • iPhoneエミュレーターによる動作確認
  • ドメインの取得
  • チェックボックスの周りに空間を
  • リンクを誤ってクリックしないように空きを作る
  • 無駄な空間を削除
  • Webクリップブックマークアイコンを作る

 以下、詳細。

Safariによる動作確認

 iPhoneのiOSのブラウザはSafari。まずはWindows版のSafariで動作確認すればいい線までいくはず。今回、UIまわりに使用したJavaScriptライブラリのjQueryはクロスプラットフォーム環境も考慮してあるので、わりと楽。一部、おかしな動作があった(選択してない記事がHTMLコードに出力される)というのもあったけど、IE専用として作ってあったコードをSafariでも使ったら問題なくなった。よく見るとFirefoxだけが違う挙動になっていたことがわかった(というか、最初はFirefox+firebugで確認しながら作ってました)。 
 このほか、テキストボックスにフォーカスが移ったときに全選択する動作がSafariだけうまくいかなかったので、「Safari / Chrome でテキストエリアをフォーカス時にテキストを全選択する – 情報と音楽」を参考に修正。

表示幅の設定(viewport)

 iPhoneでは自動的に縮小表示されるのが初期状態。で、その縮小率はmetaタグで指定が可能と知る。文字中心のサイトなので、文字が見えないと話にならないので、まずはそれがOKになる範囲で。iPhoneは縦方向が長くなってもスクロールはさほど面倒ではないので、横方向のスクロールが不要になるように。実際のiPhoneで大きさを確認して決定。

 <meta name="viewport" content="width=480" />

 とかそんな書き方でheadに挿入。

iPhoneエミュレーターによる動作確認

 動作に関しては、エミュレーターでも確認。iBBDemoというアプリケーションを使用。Windows版のSafariがインストールされていないと動作しない。まあ、動作についてはSafariでOKならOKということになるんだけど、しっかりiPhoneと同じサイズで表示された状態でも確認。Windowsでもエミュレーターが使えるのはすごく楽。

 「iPhoneブラウザの表示をシミュレートする -iBBDemo | コリス」
 iBBDemo – Blackbaud iPhone Browser Simulator

 現在のバージョンでは、起動時はiPadモードで動作するので、「?」となったんだけど、Ctrl+2キーでiPhoneモードに。またCtrl+カーソルキー左右で横倒しなども可能。「_blank」で新規ウィンドウを開くと別ウィンドウになってしまうとか、ブックマークの動作が確認できないとか、そのへんは実機で試すしかないんだけども。

ドメインの取得

 linclipの動作を確認するには、まず、linclipのサイトに行かなくてはならない。ブックマークレットの登録もまずはそこからだ。で、iPhoneでURLを開くには直接文字入力することになるのだけど、慣れてないと、ちょっと長いURLを入力するだけでもひと苦労。ドメインは短いほうがいいだろう。さらにホスト名もいらないだろう。ということで「linclip.com」だけにする。「www.」なんてのは不要。

チェックボックスの周りに空間を

 エミュレーターでのテストではまったく気づかないのが、iPhoneは指で操作するため、細かい選択がむずかしいということ。formのチェックボックスを押すのがひどく面倒。ねらいが定まらない。その隣にリンクがあったりすると、誤ってそっちをクリックしてページ移動しちゃったりする。

 そんなわけで、チェックボックスのまわりに空間を作る。上下左右にリンクがない状態にするわけだ。指でクリックするのと、マウスカーソルを使うのではまったく違うということを思い知らされた。あと、ON/OFFをグラフィックで表示するjQuery用プラグインも考えたんだけど、デスクトップPC版とあまり違うのもどうかと思い保留。

リンクを誤ってクリックしないように空きを作る

 これも上記と同じ理由。テキストのみのリンクも空間が必要だ。目的のリンクの上下の行にリンクがあると、やっぱり間違って押す危険がある。行間を空けて対処。

 具体的には、ブラウザを判別してiPhoneおよびiPod touchのときのみ、専用のスタイルシート(CSS)でリンクまわりの部分を上書きするという手法。最初はjQueryでやってたんだけど、保守が面倒そうなので、途中で路線を変更した。

 ということで、チェックボックスと行間の変更結果の画面。まずはデスクトップPC用。
 Linclipiphone1

 で、iPhone用に調整した結果がこれ。
 Linclipiphone2

 iPhone用のRSSリーダーを参考に、borderも指定してみたり。

無駄な空間を削除

 上記のような対処を行うと、1画面に収まる文字数が極端に減る。そのため、デスクトップPC版にもともとあった空間を減らすことで対処する(CSSのpaddingやmarginなど)。見やすさと使い勝手を天秤にかけながら微調整。上の画面はすでにこの項目を施した状態。

Webクリップブックマークアイコンを作る

 faviconよりも大きなアイコンが使える、メニューに登録できる、ということなので、こちらを参考に。
 「iPod touch用Webclipアイコンの作り方 - builder by ZDNet Japan」

 iPhone 4やiPadなど高解像度モデルにも対処できるよう大きめで作成。このへんの参考サイトは失念。

 と、ここまで書いてきましたが、途中から実機でのテストができてません。なぜならiPhone 4(白モデル)がまだ買えてないから。

 とくに、Webクリップまわりは実機がなくまったくテストできてないので、ほんとに意図したとおりに動いてるか、不安です。テスト結果を教えていただけると幸いです。

 linclipの機能については、以下から。

 はてブに登録した記事をブログでカンタンに紹介する - linclip使い方
 はてブ やニュースまとめにも! ページからリンクを抽出してコピペしたい linclip

 また、ブックマークレットも用意してあります。登録方法については、linclipのサイトもご覧ください。
 はてなブックマークのページからリンクを抽出するブックマークレット

 うまく動くといいな。ひどいオチ。


|

« 1000人ウクレレ at Aloha Yokohama 2010 | トップページ | DCPRG活動再開!! »

コメント

コメントを書く



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




トラックバック

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

この記事へのトラックバック一覧です: WebアプリをiPhone対応にするためにやった8項目:

« 1000人ウクレレ at Aloha Yokohama 2010 | トップページ | DCPRG活動再開!! »