HTML5とは
HTML
- HTML(HyperText Markup Language)
- テキストで記述される
- HTMLドキュメントがブラウザに読み込まれるとWebページが表示される
- ハイパーリンクが特徴
タグを入れてテキストをマークアップ(意味づけ)する
<html> <head> <title>ページタイトル</title><!--ページタイトル--> </head> <body> <h1>見出し</h1><!--見出し(headline)--> <p>本文本文<!--段落(paragraph)--> <a href="link.html">リンク</a><!--ハイパーリンク--> 本文本文</p> </body> </html>
広義のHTML5
- いままでより高度な機能をもつWebページ
- 特定のOSやブラウザに依存しない
- CSS3やECMAScript5を含む
狭義のHTML5
- HTML4.0に続く5番目のHTML
CSSとJavaScript
- CSS(Cascading Style Sheets)とJavaScript
- ページにデザイン性(修飾)とインタラクティブ性(動き・応答性)を与える
- HTMLの標準化
- JavaScriptの標準化(ECMAScript)
ブラウザの非依存
- HTML5の仕様は、2つ以上のブラウザに実装されたときに完成す
ブラウザ依存によって起きる問題
- 寡占状態を生み出す
- 新しいブラウザへの乗り換えができない
- ブラウザ自体の進化が止まる
- 古い環境に囚われIT設備ができなくなる
WHATWG
- WHATWG(Web Hypertext Application Technology Working Group)が仕様策定
- HTML4.0までの策定をしてきたW3C(World Wide Web Consortium)も参加しています。
Webアプリケーションとは
- 単に情報を表示するだけではなく、ユーザーの操作に応じて結果を返すWebページ
初期のWebアプリケーションの仕組み
- HTMLのフォームを利用してユーザーが入力したデータをWebサーバーに送り、Webサーバー内のプログラムがデーターを解析して結果のHTMLを返すという仕組み
- 問題点は1つの操作のたびにWebページをサーバーから読み込むことになるので、レスポンスが遅くなる
Ajaxによるレスポンスの高速化
- Ajax(Asynchronous JavaScript+XHTML)
- WEbページ全体をロードすることなく、JavaScriptを使ってWebサーバーと通信する
- 通信中にも処理を行えるので、ユーザーを待たせないWebアプリケーションを開発できる
- たとえば、GoogleMap
HTML5が目指すWebアプリケーション
HTML5によって実現するもの
- Webアプリケーション中心で作業を行うこと:クラウドコンピューティング
- Webページ内のデータをプログラムで処理しやすくする:セマンティック
- ユーザーインターフェイスをより使いやすく、表現力を豊かにする:CSS3
- 自由にグラフィックを描画し、音楽や動画を再生する:Canvas2D・Audio&Video・SVG
- GPSなどから現在地情報を取得する:Geolocation
- より柔軟に他のドメインやローカル環境にアクセスできるようにする:Web Storage・FileAPI・WebSocket・WebMessaging
- インターネットに接続していない状況でもWebアプリケーションを実行可能にする:OfflineWebApplication
- 複雑な計算処理を並列処理によって高速化する:WebWorers
ウェブストアでWebアプリケーションを販売する
HTML5ならではの機能
- Canvas:JavaScriptを使ってグラフィックを描く機能
- CSS3:CSS3 Animation
非対応ブラウザへの対応
- 閲覧させない
- 最低限閲覧できるようにする
- 同じように閲覧できるページを用意する