HTML5のスマホ対応の基礎知識とハマリどころ3選：スマホ向けサイト制作で泣かないための秘伝ノウハウ（2）（1/3 ページ）
スマートフォン向けWebサイト構築支援ツールを開発・販売するため、国内すべてのケータイ・スマートフォン・タブレットを所有している企業に勤める筆者が、サイト構築のハマリどころとも言えるノウハウを紹介する連載。今回は、HTML5についておさらいし、OSごとの対応状況や、iPhone／Androidなどで表示する際のハマリどころを紹介
こんにちは。KSK「フレックスファームビジネスユニット」の渡辺です。前回の「スマホ向けサイト制作3手法の基礎知識と課題、OS／機種依存のハマリどころ3選」では、スマートフォン向けサイト制作についての注意点や、代表的なOS／機種依存を紹介しました。
今回は、KSKの製品「x-fit（クロスフィット）の開発・販売や、実機での検証サービス事業で蓄積したノウハウから、HTML5に関するハマリどころを紹介します。
「HTML5」を、もう一度整理する
まず、HTML5について簡単に整理してみることにしましょう。
HTML5登場以前
HTML5より前のHTMLは、記述言語としての側面が強いマークアップ言語でした。プログラミング言語のように、実装方法がプログラマの数だけ存在するわけではなく、基本的には、タグで挟むというシンプルな方法でコンテンツを記述します。
逆にいえば「それ以外にはやりようがない」ということでもありました。タグには、意味を示すタグ（<h>タグ・<body>タグ）や、見た目を示すタグ（<center>タグ・<b>タグなど）が混在しているような状態でした。
HTML5登場後
2008年にHTML5が登場してから、HTMLの方向性は大きく変貌しました。HTMLタグだけではなく、各種APIを備えた「WebサイトおよびWebアプリケーション構築プラットフォーム」としての側面が強くなりました。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
この方向性の変化は、Webブラウザのあり方を大きく変えました。それまでのHTMLは、HTMLタグそのものはほとんど進化せず、Webブラウザのプラグインを使ってできることを増やしていく進化を続けていました。
しかし、HTML5が登場し、こうしたプロプライエタリなプラグインを置き換えるような各種APIが用意されたことや、アップルの故スティーブ・ジョブズ氏が「HTML5を支持し、iPhoneとiPadではFlashに対応しない」という姿勢を貫いたことが大きく影響し、特にスマートフォンではHTML5への転換が進みつつあります。
HTML5に対する各OS陣営の違い
HTML5そのものは、W3Cが策定を進める仕様群です。HTML5全体の仕様は2014年の正式勧告を目指すとしていて、その仕様をどの程度サポートするか、その仕様をどのように表現するかについては、各ブラウザベンダや、ブラウザアプリケーション開発者にゆだねられているのが現状です。
特にAndroidでは、OSレベルではサポートしていても、スマートフォンのハードウェアメーカーがOSに手を入れています。そのため、同じAndroidのバージョンのWebブラウザといえども、機種によっては動作が異なる事象も多々確認されています。
モバイル向けのWebブラウザがHTML5をどの程度サポートしているのかについては、「Mobile HTML5」で確認できます。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ここからは各陣営のサポート状況についてまとめます。なお、このまとめは筆者の主観が多分に反映されています。各陣営の公式な見解でもありませんので、その点はご了承ください。
変更がドラスティックなiOS
iOSは、HTML5の機能に対するサポートは比較的早い印象です。サポートしているiOSバージョンも広く、iPhoneやiPadをターゲットとしてWebサイトを作成する場合は、HTML5の機能についてiOSバージョンで実装を分けることも少なくなると思われます。
ただ、前回Safariの標準フォントの事例を挙げましたが、iOSのバージョン間で、Safariの仕様変更がたびたび発生し、Webサイトの見え方や使い勝手にドラスティックな変更が突然加わることがあります。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
機種ごとの挙動の差が激しいAndroid
AndroidもiOSと同様、HTML5に対するサポートは、早い印象です。ただ、なぜか<input>タグの新しい属性だけはサポートが芳しくありません。また、HTML5の新規要素全般についていうと、Android 2.1以下の場合はほとんどサポートされていません。
Androidは端末バリエーションが多岐にわたり、端末スペックも機種によって大きな差があるためか、2.0以上、3.0以上、4.0以上といった条件つきのサポートが多い状況です。より幅広いバージョンをターゲットとしてWebサイトを作成しようとした場合は、実装の切り分けをする必要が大きいと思われます。
Androidの場合、前述したOSへのカスタマイズがあるため、細かな機種依存も多く発生しており、慎重な対応が必要です。
スタンスが大きく異なるWindows Phone
Windows Phone 8の国内での発売が現時点では見送られたため、Windows Phone 7についての状況になりますが、サポートとしては一番消極的な印象です。記事「IE 9がHTML5の機能の一部を実装しない理由」で「IE 9では“Same Markup”を掲げる」という見解が紹介されているので、この姿勢が大きく変わることはないかもしれません。
Windows Phone 8についての詳細は分かりませんが、Windows 8をベースにするようなことがあると、また大きくスタンスが変わる可能性はあるかもしれません。
Copyright © ITmedia, Inc. All Rights Reserved.