iPhoneサイトを構築しよう--第1回:iPhoneサイト構築で知っておきたい5項目 - (page 2)

長谷川恭久

2007-10-03 21:23

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ファイルを用意しておくと良いだろう。

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)

注釈3


addEventListener("load", function()
    {
        setTimeout(updateLayout, 0);
    }, false);

    var currentWidth = 0;
    
    function updateLayout()
    {
        if (window.innerWidth != currentWidth)
        {
            currentWidth = window.innerWidth;

            var orient = currentWidth == 320 ? "profile" : "landscape";
            document.body.setAttribute("orient", orient);
            setTimeout(function()
            {
                window.scrollTo(0, 1);
            }, 100);            
}
}
setInterval(updateLayout, 400);

 Joe Hewitt氏が作成した、横幅が変わったときにレイアウトを変えるスクリプト

ZDNET Japan 記事を毎朝メールでまとめ読み(登録無料)

ホワイトペーパー

新着

ランキング

  1. セキュリティ

    「デジタル・フォレンジック」から始まるセキュリティ災禍論--活用したいIT業界の防災マニュアル

  2. 運用管理

    「無線LANがつながらない」という問い合わせにAIで対応、トラブル解決の切り札とは

  3. 運用管理

    Oracle DatabaseのAzure移行時におけるポイント、移行前に確認しておきたい障害対策

  4. 運用管理

    Google Chrome ブラウザ がセキュリティを強化、ゼロトラスト移行で高まるブラウザの重要性

  5. ビジネスアプリケーション

    技術進化でさらに発展するデータサイエンス/アナリティクス、最新の6大トレンドを解説

ZDNET Japan クイックポール

自社にとって最大のセキュリティ脅威は何ですか

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNET Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]