はじめに

こんにちは。R&D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌(@kzms2)と申します。
最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。
なので、今回はちまたで大人気のHTML5について書きます。
若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。
HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。
- なぜこれからHTML5なのか
- HTML4との違いがわからない
- HTML5を使う利点がわからない
など疑問に思っている方はぜひ見ていただければと思います。
HTML5といえば?
HTML5と聞いて何を思い浮かべるでしょうか
- 何でも出来る凄い技術
- ウェブのまったく新しい形
- Flashが必要なくなる技術
上の様な先入観を持っている方もいるかもしれません。
ですが何でも出来る凄いもの。というよりはもう少し現実的なものと思っていただけると良いと思います。
自分なりに解釈して、HTML5を一言でいうなれば以下の様な感じになります。
今まで複雑だった処理が簡単に出来て、HTMLをより構造的にスッキリ書ける
これだけを聞くとちょっと残念な印象を受けてしまいそうですが、そんなことはありません。
その詳細をこれから説明します。
HTML5で出来ること
1.今まで難しかった事が簡単に出来る
動画や音声、グラフィックの描画が可能になる
目的 | HTML5での実装方法 |
---|---|
動画を用いたい | video要素を用いる
|
音声を用いたい | audio要素を用いる
|
グラフィックの描画 | canvas要素を用いる
|
- 利点
- プラグインを必要とせず、ブラウザ自体で動画や音声、グラフの描写などが可能
※ただし、複雑な表現でない場合に限る
- プラグインを必要とせず、ブラウザ自体で動画や音声、グラフの描写などが可能
HTML4では実現するのが困難だった機能が、容易に実装できる
目的 | HTML5での実装方法 |
---|---|
位置を取得したい | geolocationをJavaScriptで用いる
|
大量のデータをクライアント側に保持させたい | LocalStorageをJavascrptで用いる
|
- 利点
- 簡単なJavaScriptを書くだけで位置情報がわかる
- Cookieよりも簡単に、また大量のデータをクライアント側に保持させることが出来る
フォーム周りの機能が強化されている
目的 | HTML5での実装方法 |
---|---|
入力した値の書式をチェックしたい | input要素の属性、「typeの値」を書き換えるだけ
|
入力項目を必須にしたい | input要素の属性に「require」を加えるだけ
|
非フォーカス時にinputに文字を表示させたい | input要素の属性に「placeholder」を加えるだけ
|
- 利点
- JavaScriptを書かずに簡単に実装できる
- CSS3を用いることで視覚的にもわかりやすくできる
参考:HTML5 Form Demo※要Webkitブラウザ
2.綺麗なHTMLがスッキリ書ける
長かった記述がスッキリする
目的 | HTML5での実装方法 |
---|---|
よく使用する要素の属性の見直し | doctype,metaの一部,link.style,scriptなどの記述が簡素化される
|
- 利点
- 要素に対しての必要な属性などが省略されることでつづり間違えが起こりにくくなる
- ソースが見渡しやすくなる
要素の定義の見直しや追加が行われている
目的 | HTML5での実装方法 |
---|---|
よく使用する要素の属性の見直し | hr,small,strong,i,b要素などの扱いが見直されている
|
文章構造化がより強化 | section,article,aside,nav,hgroup,header,footerなどを用いてアウトラインが整えられる
|
- 利点
- よりセマンティックになることで、機械的にページを理解しやすくなる
注意しておきたいこと
ちなみに、HTML5に追加された新しい機能などはここに記載されている以外にもまだたくさんあります。
これまでの例はHTML5で説明しやすいものや重要なものを記載しています。
また、HTML5に関して2点ほど注意したい点があります。
- 1.HTML5はまだ草案(まだ正式に仕様が固まっていない状態)であること
- まだ仕様として固まっていないので、仕様が変わる可能性がある
- 2.HTML5はブラウザごとに実装状況が異なる (参考:HTML5 & CSS3 Support, Web Design Tools & Support)
- IE6・IE7ではHTML5がほぼ対応していない
- 同じブラウザでも、バージョンごとに対応の有無がある
草案であるということについては、各主要ブラウザがHTML5を積極的に取り入れているのでこれは大きな問題ではないと思います。
しかし、HTML5に対応していないブラウザがある事は問題があります。
つまりは、 パソコン向けのページに使うのはまだ早い ということです。
ですが主要なスマートフォンで搭載されているブラウザのほとんどがHTML5をサポートしているため、
HTML5は新しいブラウザを搭載しているスマートフォンで使うのが現実的 となるわけです。
※ただし、対応ブラウザを理解した上でパソコン向けのページに使うのであればその限りではありません。
まとめ
これまでの流れを見ていただいたとおり、HTML5とはつまり
- 今まで制作する側が苦労していたところの改善点や、よく使う機能などを盛り込んだもの
- プラグインであったり機能としてバラバラに提供されていたものをAPIとして導入したもの
というものなのです。
今まで複雑だった処理が簡単に出来て、HTMLをより構造的にスッキリ書ける
というのはかなり乱暴な言い回しですが、なぜ冒頭でこのような表現をしたのかを理解していただけたのなら幸いです。
もっと丁寧にきちんとHTML5について知りたい! という方は参考リンクと合わせて一言コメントを記載しておくので、そちらを参照してみるとより理解が深まるかと思います。
中でも「HTML5, きちんと。」を見たことがない方は一見の価値ありなので、見てみてください。
早くHTML5が気兼ねなく使える時代が来て欲しいものですね。
※このエントリーに書かれている内容は、今後HTML5の仕様の変更により推奨される記述方法が変わる可能性があります。
また、Web application(Geo Locationなど)はW3CのHTML5仕様から抜けて、独立した仕様として定義されている物もありますが、実装されているブラウザが多いので取り上げています。
参考リンク
- HTML5の基本を抑えたい方向け
- HTML5, きちんと。
→歴史から概要、実装例や今後のことまでひととおり書いてあります。この記事だけでも読んでおけば理解度はかなり違うかと思います。 - HTML5 における HTML4 からの変更点
→W3Cの原文を日本語訳した文。W3Cの意図や変更点などが明確に書かれています。
- HTML5, きちんと。
- 実務でHTML5をマークアップしたい方向け
- 今からハジメるHTML5マークアップ
→上のスライドよりもより、実際にコーディングする場合の例などが多数あります。 - HTML5についてのおさらい - W3G Blog Studies
→HTML5の骨組みから、文章構造について詳細が書いてあります。 - HTML5.JP - 次世代HTML標準 HTML5情報サイト
→各要素の説明や実例がサンプル付きで掲載されています。逆引きなどに便利です。 - HTML5サンプル集 - 株式会社あゆた
→主にHTML5のWeb applicationを中心に簡単なサンプルがあります。 - HTML5 Demos and Examples
→英語ですがHTML5のWeb applicationについて対応ブラウザも含めて簡単なサンプルが多数あります。
- 今からハジメるHTML5マークアップ
- その他
- HTML5 Gallery |A showcase of sites using HTML5 markup
→HTML5を用いたサイトを一覧できる。実際にどの様に使われているかのリサーチなどに使うのがよさそうです。
- HTML5 Gallery |A showcase of sites using HTML5 markup
Yahoo! JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。