今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ

HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。

HTML5で追加された基本的なタグ

新しいタグの追加によって文章構造がより明確化できるようになりました。
HTMLの論理構造化はサイト構造の見通しを良くするのに加え、SEOの効果を見込めます。
ただし、現在HTML5で書かれているからといってSEOに有利ということは確認できていません。
しかしながら現在HTML5でマークアップすることが主流となりつつあります。
将来的なSEO効果は否定できないので、なるべくHTML5に沿ったマークアップがベターでしょう。

header

ヘッダーであることを示す。

fotter

フッターであることを示す。

article

単独で完結した記事であることを示す。

section

セクションを示すが特別な意味は持たない。
※今まで使われていたdivがすべてsectionに置き換わるわけではない。

aside

コンテンツの補足情報であることを示す。

nav

ナビゲーションであることを示す。

hgroup

セクションの見出しの副題を示す。
※この要素の中にはh1~h6要素しかいれることができない。

figure

画像やビデオ、プログラムコードなどのコンテンツを示す。
※figcaptionと一緒に使う事が多い。

figcaption

figure要素のコンテンツタイトルや説明文を示す。

フォーム機能で追加された代表的な属性

HTML5ではフォーム機能が強化されたので、これまでjavascriptで実装していたプレースホルダ・オートコンプリート・バリデーションなどの機能をネイティブで扱えるようになっており大変便利です。

まだブラウザ毎での実装に差がありますのでどのサイトでも使用できるものではありませんが、スマートフォンサイトでは実装できるものばかりですので、使わない手はありませんね。

[input placeholder=”〇〇”]

入力欄に入力されたら消えるテキストを表示します。
※Internet Explorer 8／9は実装されていません。

[input autocomplete=”on” list=”hogehoge”]

list=””で入力候補値のdatalist要素のIDを指定して入力候補を提示します。
※ダブルクリックするとリストが表示されます。
※type属性の値がpasswordの時は、list属性は指定できません。
※Internet Explore 8／9とSafari 5.1では実装されていません。

[datelist id=”hogehoge”]

[html]

[/html]
入力候補を登録します。
※Internet Explore 8／9とSafari 5.1では実装されていません。
※対応していないブラウザでは正しくプレビューされません。

[input type=”tel”]

電話番号入力用。入力モードが数字・記号になります。
※Internet Explore 8／9とSafari 5.1では実装されていません。

   

[input type=”email”]

メールアドレス入力用。入力モードが英字・記号になります。
multiple属性になると複数のメールアドレスが入力できます。
※Internet Explore 8／9とSafari 5.1では実装されていません。

[input type=”hogehoge” required]

必須入力にします。
※Internet Explore 8／9とSafari 5.1では実装されていません。

[input type=”date”]

日付入力用。専用の入力ウインドウが表示されます。
※Internet Explore 8／9とSafari 5.1、では実装されていません。

[input type=”number”]

番号入力用。入力モードは数字になります。
※Internet Explore 8／9とSafari 5.1、では実装されていません。

※IEを責めちゃいけないと思います。

動画や音楽を扱うタグ

audio、videoタグをサポートしているブラウザであれば再生に関して色々な表示ができるようになります。
これまでのようにembetタグ+プラグインで表示する必要はありません。

まだ古いブラウザでサポートしていないものもありますので声を大にして使っていこうとは言えない状況でしょうか。
またブラウザ毎に再生できるファイルの拡張子が異なるため複数再生ファイルを用意する手間があるせいか、PCサイトでは今でもFLASHを使ったものが多いです。
しかしスマートフォンはFLASHが再生できないものが主流ですので、スマートフォン向けのサイトであればどんどん使っていけますね。

※IE8を責めちゃいけないと思います。

[Video poster=”hogehoge.jpg”]

サムネイルの画像を表示します
※動画を再生できない場合でもサムネイルは表示されます。

[Video controls]

再生・停止などのインターフェイスを表示します。

[Video autoplay]

動画を自動再生します。

[Video loop]

動画をループ再生します。

[Video preload=”auto”]

動画の自動読み込みを管理します。
設定はauto、none、metadate、とあります。
デフォルトの設定はautoとなっています。
※metadateはメタデータ（サイズや長さなどの情報）だけを先読みするものです。

hogehoge

再生する動画を指定します。

[source src=”hogegoe.拡張子” type=”video/拡張子”]

ブラウザごとに再生できる動画の形式が異なるため複数の動画を登録できます。
[html]

[/html]

上記はVideoタグで紹介しましたが、audioタグも同様です。

ブラウザごとの動画形式対応表

動画形式編

Internet Explorer 9：H.264（mp4）
Safari 5.1：H.264（mp4）
Firefox 7：WebM、Ogg Theora
Google Chrome 14：WebM、Ogg Theora
Opera 11.5：WebM、Ogg Theora

音声形式編

Internet Explorer 9：MP3
Safari 5.1：MP3、 AAC
Firefox 7：Ogg
Chrome 14：MP3、Ogg、 AAC
Opera 11.5：Ogg

API関係

APIを使うことによって今まで複雑だった処理が便利に実装できるようになりました。
まだまだブラウザごとのサポートが異なるため今すぐ使えるというもので無いのが残念でなりませんが、HTML5でもっとも注目を集めているのがこのAPIなので放置しておいて良いものではないですね。
話題の多いAPIを調べてみました。

Canvas

JavaScriptを使って図形や画像を取り込んで加工することができます。
高速な描画ですのでスマートフォン向けのゲームなどで注目されています。

対応ブラウザ

IE9、Firefox 15、Chome22、Safari5.1、iOS3.2、Android2.1以上のバージョンで対応しています。

SVG

こちらもCanvas同様図形を描画するものですが、以下のような違いがあります。

・ベクター形式なので拡大しても綺麗な描画ができます。
・図形毎にDOMの一部になります。
・図形を書くためのHTMLタグがあります。
・SVG用に用意されたタグに対してCSSで設定することもできます。
※GoogleMapなどのサイトで利用されています。

対応ブラウザ

IE9、Firefox 15、Chome22、Safari5.1、iOS3.2、Android3.0以上のバージョンで対応しています。

ドラッグ＆ドロップAPI

これまでもドラッグ＆ドロップはJavaScriptで実現できていたものですが、HTML5でドラッグ＆ドロップのイベントに関する属性が追加されて使いやすくなりました。
注目されている点はブラウザ内だけではなく、デスクトップからもドラッグ＆ドロップできるという点です。
inputタグでアップロードしていたものがドラッグ＆ドロップできると考えると便利なシーンがいくつもありますね。

対応ブラウザ

IE7（7~9は部分的にサポートしています）、Firefox 15、Chome22、Safari5.1のバージョンで対応しています。

File Api

ローカル環境にあるファイルの情報を取得できるAPIです。
取得できるファイル情報は以下のようなものがあります。

・ファイルの名前
・ファイルのデータサイズ
・ファイルのMIMEタイプ
・テキストファイルの内容
・データのURLスキーム
・データのバイナリ

対応ブラウザ

IE10（部分的にサポートしています）、Firefox 15、Chome22、Safari5.1（部分的にサポートしています）、iOS6、Android3.0（部分的にサポートしています）以上のバージョンで対応しています。

Web Storage API

データを保存するAPIです。
Cookieと似た動作をするものですが、下記のような違いがあります。

・保存できるデータ量がCookieに比べて多い
・有効期限がないこと
・いちいちサーバーに送信しない

保存できるデータ量が多くサーバーへの負担も少ないので、何度もアクセスするようなWebアプリに注目されています。

対応ブラウザ

IE10（部分的にサポートしています）、Firefox 15、Chome22、Safari5.1（部分的にサポートしています）、iOS6、Android3.0（部分的にサポートしています）以上のバージョンで対応しています。

Application cache API

ブラウザがオフライン状態のときにでもWEBサイトやWEBアプリを使用出来るようにするAPIです。
サイトにアクセスした際にCacheとしてローカル環境に保存します。
ただし、オフラインで表示されると言ってもサーバーへのリクエストが必要な場合は表示できませんので注意が必要です。

こちらもWeb Storage API同様、WEBアプリで注目されています。
※サーバーにリクエストしないようなサイトに限る。

対応ブラウザ

IE10、Firefox 15、Chome22、Safari5.1、iOS3.2、Android2.1以上のバージョンで対応しています。

Indexed Database API

データベースをローカル環境に保存するAPIです。
JavaScriptで操作できるの特徴です。

Application cache APIと連携してデータベースも操作できるWEBアプリも作れる点に注目を集められています。
※スマートフォンの標準ブラウザでの実装が遅れています。

対応ブラウザ

IE10、Firefox 15、Chome22（部分的にサポート）以上のバージョンで対応しています。

Web Workers API

並列処理をするAPIです。
何かプログラムが処理されている間ブラウザが固まってしまうことがありますが、そういった場合でも処理ができるAPIです。

APIを複数利用したり、スペックに差がある端末などがありますので、HTML5が普及していけば行くほど注目されていくでしょう。

対応ブラウザ

IE10、Firefox 15、Chome22、Safari5.1、iOS5.0以上のバージョンで対応しています。

Geolocation API

ユーザーの位置情報を取得するAPIです。
ユーザーに許可を求めて位置情報を取得できます。
地域密着の広告や地図情報と連動するようなWEBアプリで注目されています。

取得できる情報は下記のようになります。

緯度、経度、高度、緯度・経度・高度の誤差、方角、速度

対応ブラウザ

IE9、Firefox 15、Chome22、Safari5.1、iOS3.2、Android2.1以上のバージョンで対応しています。

あとがき

ブラウザの対応状況を見るとまだまだ使えないように思えるかもしれませんが、スマートフォンサイトではかなり対応している状況です。

HTML5は未完成と言われたり、ブラウザ毎のサポートが異なる事で消極的に使用されている印象がありますが、使えるものはたくさんあります。
使えると思ったところから少しずつ使っていくことでHTML5の完成が早まる可能性はあるでしょう。

完成したものが素晴らしいのではなく、完成まで到達させることも十分魅力のあることだと思います。
使えるところから少しずつHTML5慣れしていく事は悪い事ではないので、今年もHTML5と持ちつ持たれつしていきます。