kochiko000(GoogleSite)

HTML5

04.memo

「HTML5＋CSS3次世代Webコーディングの超・最新動向」（http://www.mdn.co.jp/di/articles/2432/）よりのまとめ
○todo・jQuery UI Datepicker（カレンダー）簡単サンプル　：http://www.northwind.mydns.jp/samples/datepicker_sample1.php・種別日時曜日内容備考１　○オープンWebテクノロジー・01オープン系とは…複数のコンピュータで構築するシステム（クライアント・サーバーシステム）「閉じた世界」の反意としてオープン系　ハードやソフトのメーカに拘らない自由な構成でシステムを構築すること　クライアントサーバ型のシステムもオープン系のひとつの形態　Web系はオープン系の中でも特にWebを利用したシステムを指すchrome【1】、Safari【2】、Opera【3】はブラウザの拡張機能をHTML、JavaScript、CSSだけで開発できる環境を提供している。Opera は、ウィジェットと呼ばれるデスクトップ・アプリケーションとして動作するミニアプリケーションの開発環境Google chrome OS：パソコンのデスクトップそのものがWeb ブラウザとなり、その上で動作するアプリケーションはすべてWebアプリケーションとなる・02マークアップ　数値を選択するためのスライダーや、日時を選択するデート・ピッカー【1】、特定の範囲の数値を選択するスライダー【2】、色を選択するカラー・ピッカー【3】など、数多くのフォーム・コントロールCSS3Transitions とCSS3 Animations　ブロックの角を丸くしたり、背景にグラデーションを入れたり、文字などにシャドウを入れるなどの表現。変形やアニメーションといった動き。マルチメディア　ビデオを再生するvideo要素とオーディオを再生するaudio 要素Canvas　ビットマップ・グラフィックスSVG ベクター・グラフィックス。形式のマークアップによる描画テクノロジー。Internet Explorer 9にSVGが実装。OpenGL　OpenGLは3Dグラフィックスに必要な機能が盛り込まれている。Server-Sent Events　サーバ・プッシュを実現するためのAPI　サーバ・プッシュ：イベントをサーバがクライアントに送信し、クライアントはそれを待ち受けるWebSocket　WebSocketは、一度クライアントがサーバとコネクションを確立すれば、それ以降のデータ送受信にかかるオーバーヘッドは最小限に抑えられるよう設計されている。データ受信の遅延が最小限に抑えられる。Application cache API　オフライン時にも動作するために必要なファイルをキャッシュさせる仕組み。・03Web Storage　値（データ）にキーを結び付けて保存するストレージAPI。保存されたデータは、JavaScriptからキーを使って読み出したり削除したりすることができる。このストレージのサイズは、どのブラウザでもサイト単位で5MBがデフォルト。Web StorageはInternet Explorer 8から実装。Indexed Database API　Web Storageはキーと値という組み合わせでしかデータが保存できないが、もう少し複雑な構造にも対応できるようにしたのがIndexed Database API。File API　fileタイプのinput要素に選択されたファイル、またはデスクトップからWebページ上にドロップされたファイルのデータを読み取るメカニズムを提供する。このAPIを使うことで、サーバに送信せずとも、JavaScriptから対象のファイルをバイナリ形式、Data URL形式、テキスト形式で扱うことができる。Geolocation API　JavaScriptから位置情報を取得するメカニズム。GPS を搭載した端末であれば、緯度と経度だけでなく、GPS 高度、移動速度、移動方向まで JavaScriptから検知することができる。Internet Explorer 9を含めたメジャーブラウザはGeolocation APIを実装している。Web Workers　ブラウザのシングルスレッドにおける限界を解決する。Web Workers は所定の処理をバックグラウンドで実行する。正確にはスレッドではないが、実質的に別のスレッドで処理が実行されたかのように振る舞う。将来の新技術　現在W3Cが策定を進めている仕様　HTML Media Capture　Media Capture API・04section要素　一般的な章や節を表す。見出しと、それに付随するコンテンツのセットをくくるために使う。aside要素　ページのサイドバーや補足記事、イメージ図などnav要素　ページ内の主要なナビゲーションを表す。通常は各リンクを、ul 要素を使ってリストとしてマークアップすることが多いhgroup要素　セクションの見出しと副題を表す。この要素にはh1 ～h6要素しか入れることはできない。header要素　ページ最上段に掲載する領域に使う要素。サイト名、サイトロゴ、サイト概要、サイトナビゲーションなど。footer要素　通常はページ最下段に掲載する領域に使う要素。著作権表記、フッター用ナビゲーションリンクなど。

05.一般

06.WebSocket

IE10で動くHTML5アプリ実装例　「Node.jsとSocket.IOを使用したリアルタイムアプ

04.memo

05.一般

06.WebSocket

07.HTML5＋CSS3次世代Webコーディングの超・最新動向