html5 web workersサンプル

html5からマルチスレッドAPIも提供しています、これはWeb Workersです。これを利用して、画面側で動的に内容表示や大量計算など処理はよりより実現可能になります。

サンプル：
http://html5next.appspot.com/webworkers.html

html5 form紹介

html5仕様からたくさんのformタグが追加されました、このトピックで紹介します。

まずは現時点で各ブラウザーのサポート状況をまとめておきます、下記のリストをご覧ください。

ブラウザー	説明
Chrome	5.0からemail,number,tel,url,search,rangeとバリデーション一部をサポート開始
Firefox	4.0からサポート予定
IE	9.0から？
Opera	ほとんどサポートしている
Safari	4.0からemail,number,tel,url,search,rangeとバリデーション一部を、サマートフォンのほうがさらによりよくサポートする

サンプル：
http://html5next.appspot.com/html5_form.html

HTML5 XMLHttpRequest Level 2 Sample

いろいろ試してみたんですが、やはりだめです…:'(

html5仕様によりHTML5 XMLHttpRequest Level 2 APIがサポートされるはずですが、自分で作ったサンプルはやはりだめだった。マルチドメインにアクセス処理は現時点でまだサポートされていないでしょうか？

下記のサンプルではGoogle或はYahooサイトを取得できるはずですが、何回も試したら、エラー０を戻されました、これはどんなエラーでしょうか？自分の勉強不足でエラーの原因が分かりません。;(

サンプル：
http://html5next.appspot.com/xmlhttprequest.html

ご存知の方はいらっしゃったら教えていただけませんでしょうか？

HTML5 XMLHttpRequest Level 2

HTML5仕様もAjax機能を増強しています、従来のAjax処理を実装するのはXMLHttpRequestオブジェクトを利用するのは一般ですけど、XMLHttpRequestオブジェクトは一つのドメインしかアクセスできないため、システム開発には不便だとよく言われています。XMLHttpRequest Level2からはマルチドメインにアクセスできることになりました、下記のイメージのようにアプリケーション仕組みを築くことも簡単に実装可能です。



なお、現在はXMLHttpRequest Level 2 APIをサポートしているブラウザーはわずかですが、将来はどんどん増えるでしょう。

ブラウザー	詳細
Chrome	2.0以上
Firefox	3.5以上
Microsoft IE	Not
Opera	Not
Safari	4.0以上

html5 Communication APIsを通じてドキュメント間の通信機能を実現

　この前はウェブページ間のデータ交換などの処理はほとんどURLパラメータや、openerなどの方式で実装されるんですが、HTML5から新しい通信APIが提供されました、これはCommunication APIsとなります。

サンプル：
http://html5next.appspot.com/postMessagePortal.html

このサンプルはホストページとIFrameページ間のデータ交換処理を示しています。

HTML5 Geolocation Sample紹介

このサンプルはHTML5 Geolocation APIを利用してクライアント位置情報を取得して、Google地図に表示するのです。（クライアント位置取得のはユーザー許可が必要です。）

サンプル：
http://html5next.appspot.com/geolocation1.html

HTML5 Geolocationの仕組み

html5仕様でクライアント位置を取得する機能も定められています、これはHTML5 Geolocation APIです、現時点ではGeolocation仕様グループもW3Cから分離されてたみたいです、詳細のことはまだ分かりません。

このトピックでHTML5 Geolocationの仕組みを紹介しようとします、まずは下記のイメージをご覧ください。


解説：
①ユーザーはブラウザーでロケーション機能のあるページにアクセスする
②ロケーション機能関数より、クライアント位置取得リクエストを実行する。この際に、ブラウザーから何かの提示が表示され、ユーザーに確認していただくのは普通です。（【はい】とします）
③ブラウザーはクライアント設備(iPhoneなど)から位置情報を収集する。(IPアドレス、GPS座標など)
④ブラウザーから収集した情報を信頼しているロケーションサービスに送信し、さらに詳しい位置情報を取得する。

html5 audio制御サンプル

html5でaudioタグを利用してオーディオファイルを再生することも可能です。

サンプル：
http://html5next.appspot.com/video2.html

html5 audio videoの基本

html4よりhtml5はマルチメディアへのサポートは強くなりました、現時点のhtml5仕様によりサポートするメディアファイルのフォーマットは下記のようにあります。

・ Audio Video Interleave (.avi)
・ Flash Video (.flv)
・ MPEG 4 (.mp4)
・ Matroska (.mkv)
・ Ogg (.ogv)

コーダー／デコーダー(coders/decoders)
オーディオ：
・ AAC
・ MPEG-3
・ Ogg Vorbis

ビデオ：
・ H.264
・ VP8
・ Ogg Theora

となります。

なお、html5サポートしていない機能も紹介します。
・ ストリームオーディオとビデオ(Flashオンライン放送などの機能)
・ クロースオリジン(cross-origin)リソースしか利用できない
・ フルスクリーンサポートしない（ブラウザー機能を利用すれば可能です）
・ 仕様の一部はまだ策定中

html5 canvas座標系の変換

html5 canvasのcontextオブジェクトのsave()とrestore()メソッドを使って座標系変換処理を示します。

使い関数：
context.save();
context.translate(100, 0);
...
context.restore();

サンプル：
http://html5next.appspot.com/canvas4.html

html5 image表示

html5で画像イメージを表示する方法を紹介します。

このサンプルではイメージリソースをロードしたら表示するようにするサンプルです。

サンプル：
http://html5next.appspot.com/image1.html

html5曲線の描画

html5で曲線を描画する方法を紹介します。

新しい知識はないので、ただCanvas描画APIの紹介です。

サンプル：
http://html5next.appspot.com/curves1.html

html5 web storage技術

html5仕様に定められるローカルストレージ技術は二種類に分かられます。

①localStorage
　cookieのように利用できるんですが、切り期限などは設定しません。データ保存量も従来のcookieより多いで、パフォーマンス面もよいです。
②sessionStorage
　ブラウザーを閉じるまで存在するローカル保存ストレージです。

サンプル：
http://html5next.appspot.com/storage1.html

html5 canvasタグ描画サンプル②

html5 canvasの基本利用方法②です、canvasタグのpathとstrokeを利用してイメージを描画する

サンプル：
http://html5next.appspot.com/canvas2.html

html5 video再生サンプル

現時点のHTML5仕様では二種類のビデオが再生可能となります。

	IE 8	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg		√	√	√
MPEG 4				√	√

MPEG4再生サンプル：（ChromeとSafariのみ見れます）
http://html5next.appspot.com/video1.html

html5 canvasタグ描画サンプル①

html5 canvasタグを利用して、簡単なイメージを描画する覚書です。

サンプル：
http://html5next.appspot.com/canvas1.html

ソース：
<canvas id="cvs01" height="250" width="250" style="border:1px solid black;">
</canvas>
<script type="text/javascript">
function drawCanvas()
{
 var objCanvas = document.getElementById("cvs01");
 var objContext = objCanvas.getContext("2d");

 // Create a path in absolute coordinates 
    objContext.beginPath(); 
    objContext.moveTo(70, 140); 
    objContext.lineTo(140, 70); 
 
    // Stroke the line onto the canvas
    objContext.strokeStyle = "red"; 
    objContext.stroke(); 
}
drawCanvas();
</script>

あなたのブラウザーはHTML5仕様をサポートしていますか？

下記のURLにアクセスして、判定してください。

http://html5next.appspot.com/checkbrowserttml5support.html

html5+javascriptの初体験

html5ドキュメント内容を処理するため、javascriptが必要不可欠です、このトピックでこの二つの技術の統合処理を紹介します。

サンプル：
http://html5next.appspot.com/html5js.html

html5 sectionサンプル

html5ページにセクションタグによりいつくかの部分を分けることができます。

例えば：
header,footer,section,article,aside,nav

サンプル：
http://html5next.appspot.com/section.html

html5コンテンツ分類

コンテンツ分類	説明
Embedded	文字以外のリソースをインポートする、例えば：audio,video,canvas,image
Flow	ページ内容記述用のタグ、例えば：form,h1,table,div
Heading	ヘッダー記述用、例えば:h1,hgroup
Interactive	利用者との交互用、例えば:input,button,textarea
Metadata	ページ行為などの記述用、例えば:meta,script,style,title
Phrasing	文字表示用、例えば：mark,sub,sup
Sectioning	ページ領域分割用、例えば：article,aside,title

全てのタグはCSSスタイルが通用できます。

html5ページ記述の変更点

ウェブページの【DOCTYPE】と【Character Set】の記述方法は分かりました。

【DOCTYPE】

html4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

html5:
<!DOCTYPE html>

【Character Set】

html4:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

html5:
<meta charset="utf-8">

html5の特徴

従来のhtml4よりhtml5スペックの特徴を紹介します。（現時点ではｈｔｍｌ５スペックはまだ策定中です）

html5の特徴：

• Canvas (2D and 3D)
• Channel messaging
• Cross-document messaging
• Geolocation
• MathML
• Microdata
• Server-Sent events
• Scalable Vector Graphics (SVG)
• WebSocket API and protocol
• Web origin concept
• Web storage
• Web SQL database
• Web Workers
• XMLHttpRequest Level 2

これから少しずつhtml5の奥義を探りたいと思います。

HTML5サンプル第一弾

簡単なHTML5サンプルをデモします。

http://html5next.appspot.com/

HTML5の面白さをちゃんと分かりました、今後勉強します。