ついに正式勧告--「HTML5」を使いこなすには何が必要か

中島俊治
2014-11-10 06:00:00
  • このエントリーをはてなブックマークに追加

1. HTML5って何?

 こんにちは、HTML5アカデミック認定校「東京アプリ・ワークショップ」の中島です。私は、認定校のほか、放送大学や都内のPCスクールでHTML5の授業を行っています。すると、必ずこのような質問があります。「HTML5って何ですか? 今までと何が違うんですか?何をすることができるのですか?」

「HTML5って何ですか?」

 返答に困りました。今までのHTMLでしたらウェブページを作るための言語と言えますが、HTML5はさまざまなことができので、一言で言い表せません。そこで、このように例え話で説明しています。

 「ウェブページは何のためにある? お客様に商品のイメージを表示し、機能を表示し、買ってもらうためにある。例えるとショッピングウインドウのとてもきれいなマネキン。じゃ、そのマネキンに朝“おはよう”と声を掛けると“おはよう”と返事してくれたり、“今日も暑いね”と言ってくれたり、ゲームの相手になったり、毎日の体重を記録したりするとどうかな? マネキンというよりロボットかも。ウェブアプリケーションになります。それがHTML5。ウェブのアプリケーションを作るための言語。しかもグラフィックが得意、図形を買いたり画像や写真、アニメーションもお手のもの。どう面白いでしょ?

 さあ、皆さんもHTML5でウェブアプリケーションを作ってみましょう。

「HTMLと何が違うの?」

 現行のHTML 4.01はCSSと一緒にウェブページを作ります。しかし、HTML 4.01は十数年経過、その間にデザインはCSSで実装するのが普通になり、使われないタグも増えてきました。またよりセマンティックなタグも必要になってきました。そのため、5回目の大幅な改定が行われることになり、HTML5が生まれました。このHTML5を狭義のHTML5といいます。

 現行のCSS2もCSS3となって、より豊かなデザインや視覚的効果を実現できるようになりました。


 さらにJavaScriptというウェブ上で動くプログラムの仕組みで、ブラウザのコンテンツを自由自在に操作できるようになりました。

 狭義のHTML5とCSS3、そしてJavaScriptを総合して広い意味(=広義)でのHTML5となりました。

 広義のHTML5には、その他に位置情報やセンサ情報を取得する機能、データを保存する機能、通信する機能、マルチメディア、図形描画などさまざまな機能も備わり、それら機能は日々進化、追加されています。

「HTML5はいつから使っていいの?」

 今からです。HTML5を標準とする正式なW3C勧告が10月28日に行われました。しかし、数年前から大手スマートフォンのブラウザではHTML5の実装は随時進んでおり、PCのブラウザでも実装は行われていますので、勧告される前からHTML5は活用されています。次に活用例をご紹介します。

a. スマホとHTML5

 現在メジャーなスマホは、AndroidスマートフォンとiPhoneでしょう。インターネットを閲覧するためのブラウザとして、Androidには、標準ブラウザ、最近ではChromeが、そしてiPhoneにはSafariが、それぞれインストールされています。それらのブラウザは、どれもHTML5を取り入れており、スマホのブラウザ上に表示するウェブサイトやウェブアプリではHTML5は事実上標準となっています。

 ストアで販売できるスマホアプリは一つのアプリをつくるときでも、JavaやObjective-Cといった言語を学ばなくては作ることができませんでした。最近では、HTML5でスマホアプリが作られるようになってきました。これをハイブリッドアプリといいます。アイデアがひらめいたら即アプリ、そんなことができるのがHTML5です。

b. ウェブサイトとHTML5

 ウェブサイトトップのアニメーションなど従来Flashが担っていた画像や写真のアニメーションなどは、HTML5で作ることが可能になります。しかも標準ですから、作るためのソフトやプラグインの手間もかかりません。トップ画像はユーザーとコンタクトするときの最も大事なもの。ぜひ印象に残るアニメーションを作りましょう。

c. 業務システムとHTML5

 スマホにはさまざまな機能があります。それらを活用した業務システムを作るときにHTML5は役立つでしょう。

d. その他

 面白いところではGoogle。たまにロゴが変わっていることに気がつかれるでしょう。ロゴのデザインが変わる以外に、インタラクティブなゲームに出会ったことがありせんか?それらの多くにはHTML5の機能が使われています。

 また、映画のプロモーションサイトでもHTML5が使われています。3次元でしかもインタラクティブなコントロールできるこのサイト、ぜひ楽しんでください。

  • 新着記事
  • 特集
  • ブログ