基本的な知識
2009-08-09 (日) 20:19:00 (213d)

lifebuoy.png iPhone/iPod touch向けサイト構築に関する基本的な知識の整理
lifebuoy.png 対応サイトを3種類に分類し構築方法を説明します。

iPhone対応サイトの種類 　

iPhone対応サイトとは 　

  • ここでは、「iPhone対応サイト」を、「iPhoneまたはiPod touchのMobileSafariに最適化されたWebサイト」と定義します。
  • iPhone対応サイトには、次の種類が存在すると考えられます。
    1. 既存サイトへのiPhone用CSSの適用により表示最適化を行ったサイト
    2. 既存サイトにてUA判定などにより、iPhone向けコンテンツまたはiPhone向けに最適化したWebページを表示するサイト
    3. 新規にiPhone向けに作られたサイト（レイアウトが崩れるがPCでの閲覧も可能）
  • 以下、順番に実現方法を見ていきます。

iPhone対応サイトの種類別構築方法 　

既存サイトとの共存方法 　

  • 既存サイトへのiPhone用CSSの適用により表示最適化を行うには、iPhone向けのCSSを用意し、htmlのヘッダにて指定することで行います。
  • PC用とiPhone用のスタイルシートを分けて記述するには、下記の様に対象ページのHEAD内に「min-device-width」を用いて記述すれば、ブラウザ側で判定した上でそれぞれ最適なCSS読み込みが行われます。
  • PC用は既存のCSSをそのまま用いることが出来ます。iPhone用CSSは、文字サイズ（16px～24px）などを適宜変更しましょう。
  • iPhone用CSS指定部分

    <link media="only screen and (max-device-width:480px)" href="iphone.css" type="text/css" rel="stylesheet"/>

  • PC用CSS指定部分

    <link media="screen and (min-device-width:481px)" href="pc.css" type="text/css" rel="stylesheet"/>

UA判定を行う方法 　

  • iPhone/iPod touchのMobileSafariは基本的にUserAgent偽装が出来ないため、UAを文字列判定することでphp/Java/Perlなどサイトの開発言語側で判定を行うことが可能です。※PCのブラウザによる偽装は、Webアプリでは判定できない。
  • 判定後は、次項で説明するiPhone向けに作られたサイトを参考に構築しましょう。

iPhone向けサイトの構築方法 　

  • Apple社から、公式ドキュメント類が出されています。単なる構築技法に留まらず、UIの考え方が整理されている大変重要なドキュメントですので、必ず一度は目を通すようにしましょう。
  • iPhone/iPod touch向けのサイトを構築する時に便利なフレームワークが多数開発され、公開されています。

ハイブリッドアプリについて 　

  • ハイブリッドアプリとは、HTMLとJavaScriptで実装したWebアプリケーションを、ある方法を使ってAppStoreに公開する方法です。
  • 開発を行うには、当然ですがMacとiPhone SDK、さらにはAppleデベロッパー登録が必要ですが、基本的にはごく一般的なUIWebView?を用いた上で、Webアプリーケションを動作させることにより、ネイティブアプリとして動作させるものです。
  • ライブラリとしては、一番古くから活動しているPhoneGap（GPSや傾きセンサーをサポート）のほかに、Big Five（加えてカメラ、写真アルバム、バイブレーション）などがあり、かなりのデバイスをサポートしています。※Big Fiveはデベロッパライセンス購入が必要になります。
  • 実際にこれらのライブラリを利用したアプリもAppStoreに登場しています。



スポンサード　リンク