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. セキュリティ

    KADOKAWAらの事例に学ぶ、2024年サイバー攻撃の傾向と対策

  2. セキュリティ

    MDMのよくある“12の悩み”を解決!Apple製品のMDMに「Jamf」を選ぶべき理由を教えます

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

    生成AIをビジネスにどう活かす?基礎理解から活用事例までを網羅した実践ガイド

  4. セキュリティ

    セキュリティ担当者に贈る、従業員のリテラシーが測れる「情報セキュリティ理解度チェックテスト」

  5. セキュリティ

    「100人100通りの働き方」を目指すサイボウズが、従業員選択制のもとでMacを導入する真の価値

ZDNET Japan クイックポール

所属する組織のデータ活用状況はどの段階にありますか?

NEWSLETTERS

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

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

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