Lesson 02 スマートフォンサイトの制作をはじめる前に - HTML5＋CSS3 次世代Webコーディングの超・最新動向・Smartphone編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

Smartphone編

	Lesson 2			スマートフォンサイトの 制作をはじめる前に
	制作・文			山田 敬美（ネイバージャパン株式会社）

スマートフォンサイトの制作では、いくつか注意しておきたいことがある。制作に関わる人すべてがこれらを共通認識とし、必要なことは事前に取り決めておくことで、プロジェクトを円滑に進められるだろう。

PC用に作られたページをそのままスマートフォンで見ると、文字は小さくて読みづらく、ボタンやリンクも指で押すには小さくて使いづらい。

また、PC用サイトは画像やファイルのサイズが大きいため、3G回線では表示するのに時間がかかってしまう。

スマートフォン向けにサイトを最適化すると、このような不便さを解消できる。

ただし、スマートフォンに最適化することで逆に不便になることもある。

画面サイズが小さいため、PCサイトと比べて情報量は減ってしまう。PCサイトの操作に慣れている人にとっては、スマートフォンサイトのUIをまた学習し直さなければならない。

そのため、スマートフォンに最適化する場合でも、PC サイトへのリンクもつけて、ユーザーがどちらで見るかを選択できるようにしておくとよいだろう【1】【2】。


【1】AmazonのiPhoneサイト。左上のPCサイトへのボタンから、通常のPC向けサイトを表示できる



【2】情報量はPCサイトの方が格段に多いが、文字は拡大しないと読めない。ど ちらで閲覧するかはユーザーに選択させたい

そのサイトがスマートフォンから頻繁に使われるものかどうかを考えてみよう。たとえば、ニュースサイトを最適化すれば、3G回線でもサクサク読めるようになるのでストレスが減るだろう。

ショッピングサイトが最適化されてい れば、カートに入れるボタンが押しやすくなり、購入ステップのたびに画面を拡大する手間もなくなり、売上アップにつながるかもしれない。

また、別の使い方としてネイティブアプリケーションにHTMLを組み込むこともある。ネイティブアプリケーションはWebViewという機能を使って、アプリ内にHTMLのページを表示できる。

更新性のある部分のみにWebView を使えば、HTMLがわかる人であれば誰でも アプリ内の更新作業ができるようになる。

既Webサイトをスマートフォン向けに最適化する場合、大きく分けて二つのパタ ーンがある。

一つは、スマートフォンサイト専用に HTMLを分けて制作する方法で、もう一 つは、PCサイトのHTMLをそのまま使っ て、CSSだけで最適化する方法だ。

どちらがよいかは一長一短なので、サイ トの特性や想定工数によって判断しよう【3】


【3】スマートフォン最適化の方法とメリット・デメリット

iPhone は「Safari（Mobile Safari）」、Androidは「ブラウザ（Chrome Lite）」という名称のブラウザがデフォルトで搭載されているが、どちらもベースとなるレ ンダリングエンジンはWebKitである。

まったく別物というほどではないが、ブラウザの仕様はそれぞれ異なるので注意が必要だ【4】。


【4】iPhoneとAndroidのブラウザの比較

iPhoneの場合、iOS 3.1の割合は徐々に減ってきてはいるが、人数にするとかなりの数になるため、iOS 3.1とiOS 4.0以降の両方を推奨環境とした方がよいだろう【5】。

一方Androidの場合は、日本で発売されているほとんどの機種はAndroid 1.6 以降のため、1.5以下はまず対象外としても問題ない※01。

一般的にはAndroid 1.6 以降を推奨環境としているサイトが多いが、最近ではAndroid 2.1以降のみを対応としているサイトもある【6】【7】※02。

どこまでを対象とするかは、サイトの特性や予算によって判断が必要だ。

※01
HT-03Aはデフォルトでは1.5だが、1.6にバージョンアップ可能。

※02
GREEでは、Android 2.1以降しか対応していない。
https://help.gree.jp/app/answers/detail/a_id/3104/~/スマートフォン版greeの対象機種を教えてください。


【5】iOSのバージョン別シェア



【6】Androidのバージョン別シェア
http://insights.chitika.com/2011/61-of-ipads-already-running-ios-4-january-ios-and-android-os-breakdown/



【7】Androidのバージョンの推移
http://developer.android.com/resources/dashboard/platform-versions.html

いきなり実機で確認すると手間がかかるため、以下のようなフローで表示確認とデバッグを行うとよいだろう。

はじめに、PCのSafariでおおまかな確認をする。PC のSafari では、ユーザーエージェントを簡単に切り替えられる※03。

Mobile Safariを選択すれば、iPhone だ と偽ってスマートフォンサイトを表示できる。

次に、手順でPCに入れたエミュレータを通して確認する（エミュレータの導入方法は、後に解説する「LESSON 09　スマートフォンサイトのデバッグ環境構築」を参照）。

最終的に実機でチェックして問題なければ完成となる。

実機でしか確認できないこともあるため、iPhoneとAndroidそれぞれ、最低でも手元に1台は置いておきたい。

※03
Safariの環境設定で [メニューバーに"開発"メニューを表示] にチェックを入れ、[開発] - [ユーザエージェント] でMobile Safariを選択。

実機で表示確認をするには、Webサーバでサイトが見られる状態にする必要がある。

テスト用のWebサーバが用意できる場合はそちらを使い、できない場合は自分のPCを使えばよい。

ただし自分のPCを使う場合は、スマートフォンとPCが同じネットワーク上にあることが条件となる。

Macの場合はOSデフォルトの「Web共有」機能を、Windowsの場合は「XAMPP（http://www.apachefriends.org/jp/xampp-windows.html）」を使えば、自分のPCをWebサーバとして使うことができる。

iOSの場合はiPhone 3G/iPhone 3GS/iPhone 4 の3 種類しかないが、Android の場合は、キャリアもメーカーもたくさんの種類があるため、すべての機種とすべてのOSの検証を行うのは現実的ではない。

特定の機種のみで不具合報告があった場合、専門の検証業者もいるので、そういったものの利用も検討するとよいだろう。