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で閲覧しやすいレイアウトで表示される。iPhone向けにカスタマイズされている「iGoogle」このような「iPhone専用ページ」は、WebページがCSSを使って適切にデザインされていれば、比較的簡単に作ることができる。そこで最後に、既存のWebページをCSSやJavaScriptのカスタマイズだけで「iPhone専用ページ」にする例を紹介しておこう。サイトごとに「好ましい」ユーザーインターフェイスはもちろん異なるため、以下で示しているサイトデザイン例がすべてのサイトで当てはまるとは限らない。参考として見てほしい。・iPhoneで表示した場合のみ特定のCSSファイル/JavaScriptファイルを読み込むようにする既存のWebサイトをiPhoneに最適化させる場合、HTMLファイルは既存のものをそのまま使い、iPhone版Safariでアクセスした場合のみ特定のCSSファイルやJavaScriptファイルを読み込ませる、というのがもっとも簡単な方法だろう。iPhoneでアクセスした場合にのみ特定のCSSを読み込ませるには、HTMLファイルのheadタグ内で、次のように読み込ませるCSSファイルを指定すればよい。rel=stylesheet>また、iPhoneでアクセスした場合とそれ以外で使用するJavaScriptファイルを切り替えるには、headタグ内で次のように指定すればよい。--></script>・複数段組のレイアウトから1段組のレイアウトにする現在の多くのWebサイトは、2段もしくは3段組のレイアウトになっている。スラッシュドット・ジャパンでは、ページ上部にタイトルや各種機能へのリンクが用意されており、ページ左側にはサイト内の各ページに遷移できるナビゲーションリンクが、ページ右側にはサイト内のコンテンツや外部サイトの更新情報が表示されるようになっている。このような複数段を使ったレイアウトは、ウィンドウの横幅が大きいPCでは有用だが、iPhoneのような表示領域が狭いデバイスの場合、これによってメインコンテンツの表示面積が著しく小さくなってしまう。そこで、まずこのような複数段を使ったレイアウトを、1段組のレイアウトに修正する。同時に、横幅もiPhoneの表示サイズに合わせて320ピクセルに設定する(図2)。・多用しないナビゲーションリンクや項目は隠す複数段レイアウトのWebページを1段組に変更すると、それに伴ってページの最初/最後に大量のナビゲーションリンクが表示されるようになることが多い。これではメインコンテンツにたどり着くまでに多くのスクロールが必要になり、ユーザビリティが悪い。そこで、ナビゲーションリンクは階層構造にして、タップで表示/非表示を切り替えられるようにする(図3)。開閉可能なナビゲーションリンク。見出しをクリックするとリンク一覧が表示される・メインコンテンツが長い場合は適切に分割するメインコンテンツが長い場合、多量のスクロールを行わなくても目的のコンテンツにたどり着けるようなユーザーインターフェイスが望ましい。ブログやニュースサイトなど、記事ごとにタイトル+本文がついているようなサイトの場合、タイトルクリックで本文部分の表示/非表示が切り替えられる、といったインターフェイスが考えられる(図4)。デフォルトでは本文は表示されず、記事タイトルをクリックすると本文がせり出してくるインターフェイス・ユーザーインターフェイスをアニメーションさせるFirefoxやIEといったWebブラウザでアニメーションするドロップダウンツールバーやメニューなどを表示させるには、JavaScriptを駆使する必要がある。Safariでは指定した要素をアニメーションさせながら変形させる「transition」機能を独自実装している。transition機能は、CSSで「-webkit-transition-」で始まるプロパティを指定することで利用できる。この機能を利用すれば、複雑なJavaScriptコードを用意しなくても、簡単にアニメーションする要素を作成できる。次の例(図5)はTransition機能を使ってアニメーションを実装した例だ。グレーの矩形領域にマウスポインタを重ねると、Firefoxなどでは一瞬で矩形の色と大きさが変化するが、Safariでは0.5秒間でゆっくりとアニメーションしながら色と大きさが変化する。Transitionを使うと、アニメーションしながら形や色が変化する要素を簡単に作成できるこのアニメーションは、下記のような単純なCSSだけで実現できる。この例では、:hover疑似クラスを用いて要素を変形させているが、この「アニメーションしながらの変形」はJavaScriptでエレメントのプロパティを変更した際にも反映される。JavaScriptで要素のheight値を変更するようなコードを記述するだけで、要素の高さが変形するアニメーション表示を実現できる。以上のようなiPhone向けのデザイン/動作を実装したサンプルページ(iPhone向け)を用意したので、興味のある方は各自動作やコードを確認していただきたい。このサンプルページはiPhone版Safariでアクセスした場合のみiPhone向けの表示を行うが、ほかのWebブラウザでアクセスした際もiPhone版Safariでアクセスした場合と同様に表示するサンプルも用意した。このサンプルではSafariでしか利用できない「transition」機能を利用しているので、Safari以外では一部のアニメーションが表示できない点に注意して欲しい。DevCenter」だ。閲覧には登録(無料)が必要だが、ここにiPhone版Safari向け開発に必要となる情報がほぼすべてそろっていると言っても過言ではない。チェックしておくべきドキュメントは、下記の2つだ。Applications:フォントサイズや画面遷移など、iPhoneに向けたユーザーインターフェイスを構築するための事項を解説また、アニメーションや図形/テキストなどの変形といったより高度な表現を利用したい場合は、下記の文書が参考になる。