iPhoneサイトを構築しよう--第1回:iPhoneサイト構築で知っておきたい5項目 - page2 - builder by ZDNet Japan - 0 views
-
先日発売された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ファイルを用意しておくと良いだろう。
- ...1 more annotation...
-
3. JavaScriptを利用したWebアプリケーション開発 CSS3と同様、Safariでは高いレベルでJavaScriptのサポートを実現している。詳しくはアップルが公開している「Web Kit DOMプログラミングトピックの紹介」を参照して欲しいが、様々なアニメーション効果やAjaxを利用することができるのだ。メディアクエリーを利用して最適化したサイトデザインを提供することができるが、JavaScriptを組み合わせてデバイスを回転したときに異なるレイアウトを提供するといったことも難しくない。 今までのWebサイト開発で慣れ親しんでいたJavaScriptをそのまま使っても動作するが、注意も必要だ。Safariは早いJavaScriptレンダリングを売りにしているものの、パソコン上で起動しているSafariに比べると大幅に遅くなる。iPhoneとMacBookを対象にしたレンダリングスピードのテストがブログ「John Murch the Self Proclaimed Geek Guru」で公開されているが、CPUの影響かiPhoneのほうが遅いのが分かる。パソコンと同等のJavaScriptが利用できるが、iPhone向けにJavaScriptを最適化するか、利用するJavaScriptの量を削る努力は惜しまないほうが良いだろう。(注釈3)