iPhone対応Webサイト構築入門（後編）

松島浩道
シェア

　iPhoneに搭載されているWebブラウザ「Safari」は、WindowsやMac OS X向けのWebブラウザとほぼ同等の機能を備えている。そのため、PC向けに制作されたWebページはiPhoneでもPCで閲覧する場合とほぼ同じレイアウト・挙動で表示できる。しかし、iPhoneはPCに比べて画面サイズが小さいため、iPhone版Safariに向けた専用のレイアウト・機能を用意しておくと、iPhoneから利用した場合のユーザビリティが大幅に向上する。後編では、このような「iPhone専用ページ」の作成例を紹介する。

よりiPhoneでの閲覧に適したWebサイトを作る

　一般的なPC向けWebサイトでも、本記事前編で紹介したような修正を加えるだけでiPhoneからの閲覧がしやすいWebサイトになる。しかし、これはあくまでPC向けのWebページをiPhoneでも閲覧しやすくするだけのものである。いっぽう、Googleなどは、画面レイアウトや操作インターフェイスなどを変えて、さらにiPhoneで利用しやすいような専用ページを提供している。たとえば「iGoogle」では、iPhone版Safariで閲覧した場合は図1のような、iPhoneで閲覧しやすいレイアウトで表示される。

図1
図1 iPhone向けにカスタマイズされている「iGoogle」

　このような「iPhone専用ページ」は、WebページがCSSを使って適切にデザインされていれば、比較的簡単に作ることができる。そこで最後に、既存のWebページをCSSやJavaScriptのカスタマイズだけで「iPhone専用ページ」にする例を紹介しておこう。

　なお、サイトごとに「好ましい」ユーザーインターフェイスはもちろん異なるため、以下で示しているサイトデザイン例がすべてのサイトで当てはまるとは限らない。あくまで参考として見てほしい。

・iPhoneで表示した場合のみ特定のCSSファイル/JavaScriptファイルを読み込むようにする

　既存のWebサイトをiPhoneに最適化させる場合、HTMLファイルは既存のものをそのまま使い、iPhone版Safariでアクセスした場合のみ特定のCSSファイルやJavaScriptファイルを読み込ませる、というのがもっとも簡単な方法だろう。

　iPhoneでアクセスした場合にのみ特定のCSSを読み込ませるには、HTMLファイルのheadタグ内で、次のように読み込ませるCSSファイルを指定すればよい。

<link media="only screen and (max-device-width: 480px)"  href="<CSSファイル>" type=text/css rel=stylesheet>

　また、iPhoneでアクセスした場合とそれ以外で使用するJavaScriptファイルを切り替えるには、headタグ内で次のように指定すればよい。

<script type="text/javascript">
<!--
  if( (navigator.userAgent.indexOf('iPhone') != -1) ||
      (navigator.userAgent.indexOf('iPod') != -1) ) {
    document.write( "<script src=\"<iPhone向けのJavaScriptファイル>\" type=\"text/javascript\"><\/script>" );
  } else {
    document.write( "<script src=\"<非iPhone向けのJavaSciptファイル>\" type=\"text/javascript\"><\/script>" );
  }
// -->
</script>

・複数段組のレイアウトから1段組のレイアウトにする

　現在の多くのWebサイトは、2段もしくは3段組のレイアウトになっている。たとえばスラッシュドット・ジャパンでは、ページ上部にタイトルや各種機能へのリンクが用意されており、ページ左側にはサイト内の各ページに遷移できるナビゲーションリンクが、ページ右側にはサイト内のコンテンツや外部サイトの更新情報が表示されるようになっている。このような複数段を使ったレイアウトは、ウィンドウの横幅が大きいPCでは有用だが、iPhoneのような表示領域が狭いデバイスの場合、これによってメインコンテンツの表示面積が著しく小さくなってしまう。そこで、まずこのような複数段を使ったレイアウトを、1段組のレイアウトに修正する。同時に、横幅もiPhoneの表示サイズに合わせて320ピクセルに設定する（図2）。

図2
図2 Webページを1段落レイアウト、幅320ピクセルに変更した例

・多用しないナビゲーションリンクや項目は隠す

　複数段レイアウトのWebページを1段組に変更すると、それに伴ってページの最初/最後に大量のナビゲーションリンクが表示されるようになることが多い。これではメインコンテンツにたどり着くまでに多くのスクロールが必要になり、ユーザビリティが悪い。そこで、ナビゲーションリンクは階層構造にして、タップで表示/非表示を切り替えられるようにする（図3）。

図3-1 → 図3-2
図3 開閉可能なナビゲーションリンク。見出しをクリックするとリンク一覧が表示される

・メインコンテンツが長い場合は適切に分割する

　メインコンテンツが長い場合、多量のスクロールを行わなくても目的のコンテンツにたどり着けるようなユーザーインターフェイスが望ましい。たとえばブログやニュースサイトなど、記事ごとにタイトル＋本文がついているようなサイトの場合、タイトルクリックで本文部分の表示/非表示が切り替えられる、といったインターフェイスが考えられる（図4）。

図4-1 → 図4-2 → 図4-3
図4 デフォルトでは本文は表示されず、記事タイトルをクリックすると本文がせり出してくるインターフェイス

・ユーザーインターフェイスをアニメーションさせる

　FirefoxやIEといったWebブラウザでアニメーションするドロップダウンツールバーやメニューなどを表示させるには、JavaScriptを駆使する必要がある。いっぽう、Safariでは指定した要素をアニメーションさせながら変形させる「transition」機能を独自実装している。transition機能は、CSSで「-webkit-transition-」で始まるプロパティを指定することで利用できる。この機能を利用すれば、複雑なJavaScriptコードを用意しなくても、簡単にアニメーションする要素を作成できる。

　たとえば、次の例（図5）はTransition機能を使ってアニメーションを実装した例だ。グレーの矩形領域にマウスポインタを重ねると、Firefoxなどでは一瞬で矩形の色と大きさが変化するが、Safariでは0.5秒間でゆっくりとアニメーションしながら色と大きさが変化する。

図5-1 → 図5-2 → 図5-3
図5 Transitionを使うと、アニメーションしながら形や色が変化する要素を簡単に作成できる

　このアニメーションは、下記のような単純なCSSだけで実現できる。この例では、:hover疑似クラスを用いて要素を変形させているが、この「アニメーションしながらの変形」はJavaScriptでエレメントのプロパティを変更した際にも反映される。たとえば、JavaScriptで要素のheight値を変更するようなコードを記述するだけで、要素の高さが変形するアニメーション表示を実現できる。

<style type="text/css" media="screen">
div.transition {
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  width:100px;
  height:100px;
  background-color:#999;
  overflow: hidden;
  border: 1px solid;
}

div:hover.transition {
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  width:100px;
  height:200px;
  background-color:#FFF;
  overflow: hidden;
  border: 1px solid;
}
</style>
<div class="transition" >
This is transition sample.</div>

iPhone向けWebサイトの実装例

　以上のようなiPhone向けのデザイン/動作を実装したサンプルページ（iPhone向け）を用意したので、興味のある方は各自動作やコードを確認していただきたい。このサンプルページはiPhone版Safariでアクセスした場合のみiPhone向けの表示を行うが、ほかのWebブラウザでアクセスした際もiPhone版Safariでアクセスした場合と同様に表示するサンプルも用意した。なお、このサンプルではSafariでしか利用できない「transition」機能を利用しているので、Safari以外では一部のアニメーションが表示できない点に注意して欲しい。

Appleの開発者向け公式サイトは要チェック

　iPhone版Safariに向けたWebサイトを開発する場合に非常に参考になるのが、Appleの開発者向け情報サイト「Apple Developer Connection」の「Web Apps DevCenter」だ。閲覧には登録（無料）が必要だが、ここにiPhone版Safari向け開発に必要となる情報がほぼすべてそろっていると言っても過言ではない。特にチェックしておくべきドキュメントは、下記の2つだ。

　また、アニメーションや図形/テキストなどの変形といったより高度な表現を利用したい場合は、下記の文書が参考になる。