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のサイトもご覧ください。
 はてなブックマークのページからリンクを抽出するブックマークレット
 うまく動くといいな。ひどいオチ。

コメント