Group items tagged

先日発売されたiPod touchには、iPhone同様、ブラウザにSafari 3が採用された。そのため、先頃アップルが公開したドキュメントを参考にして、iPod touch向けにモバイルコンテンツを配信することが可能だ。本稿ではiPhoneサイト構築にあたり、知っておきたい5つのTipsを紹介する。

1. タブブラウジング 　iPhone、iPod touchでは厳密には「タブ」ではないが、複数のWebサイトを同時に開いてのブラウジングが可能だ。様々なページを見比べたり参照しながらブラウジングすることがストレスなく行える。利用者にとって便利といえるが、特定のページに居座るという可能性は低くなる。モバイルコンテンツには元々そういった部分はあったが、マルチタスクはさらにそれを加速させるだろう。

2. 柔軟なサイトデザインの実現 　他のブラウザではサポートしきれていないCSS 2.1および一部のCSS3がSafariでは利用できるのも、マークアップエンジニアの心を揺さぶる部分だ。 　CSSといえばWebサイトのレイアウトを組むときや装飾に役立つというイメージがあるが、iPhone/iPod touchではそれ以上の役割を果たしている。一部の携帯電話で利用可能なOperaにも実装されているが、SafariではCSS3のメディアクエリ（Media Queries）が利用できる。 　メディアクエリを利用すれば、デバイス、スクリーンサイズ、色に応じて異なるスタイルをページに継承させることが可能だ。パソコンで閲覧できるページをそのまま見られるのが強みではあるが、可能な限りストレスのない体験を提供したいところだ。その際、わざわざ専用ページを設けるのではなく、メディアクエリを利用してオールインワンソリューションを提供することができる。（注釈2） 注釈2 <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" /> 　メディアクエリはCSSファイル内に書き込むことが可能だが、上記のようにHTMLのlinkタグ内に記述することもできる。iPhone/iPod touchは横に傾けた際の幅が480pxなので、スクリーンサイズが最大480px（max-device-width: 480px）を想定したCSSファイルを用意しておくと良いだろう。