Cntlog > スキルアップ・ノウハウ > コーディング > 今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ

今更だけど押さえておきたい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”]

<datalist id="hogehoge">
<option value="サンプル回答1">
<option value="サンプル回答2">
<option value="サンプル回答3">
</datalist>

入力候補を登録します。
※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
再生する動画を指定します。
ブラウザごとに再生できる動画の形式が異なるため複数の動画を登録できます。

<video>
<source src="hogehoge.mp4" type="video/mp4">
<source src="hogehoge.ogv" type="video/ogg">
<source src="hogehoge.webm" type="video/webm">
このWebブラウザーは再生に対応していません。
</video>

上記は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と持ちつ持たれつしていきます。

関連記事

今更だけどretina対応を考えてみた そろそろiPadminiのretina対応が発表されて意識の高い気分の人たちが、「うむ、やはり時代はretinaだな」とか言うんじゃないかと睨んでます。 PC版であまりretinaディスプレイを意識して作った事はないのですが、スマホは別ですね。 まだまだ通信量を下...
日本語でわかるSketchの使い方と機能 実際私も英語は苦手ですが、Sketchは全然使えています。 ただ初めての方だとSketchの機能が全然わからないと思いますので、メニューを日本語でわかるようにしてみました。 メニュー  メニュー項目の紹介です。 ショートカットキーメモ ⌘…Command...
【サンプル有り】文字詰めが出来るCSS「font-feature-settings」を試してみた... TwitterでとてもCSSで文字詰めができるという興味深いCSSの記事があったので、自分でも気になったのでサンプルを作ってみました。 そのCSSは「font-feature-settings」というものです。 詳しい事は下記記事よりご確認ください。 文字詰めできるCSSのfont-f...
コーディング規約(HTML・CSS)を作ってみた(公開済)... WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。 作って見た規約はこちら。 WEB制作ガイドライン コーディング規約を作った理由 オレオレフレームワークやWordPres...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...
Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ... 最近「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語 」という本が出版されてSassがさらに注目されていますね。 個人的にはいよいよSass一択になってLESSが淘汰されていっちゃうのかなと心配しています。 そもそもLESSって何?って方もいるでし...