Get Started. It's Free
or sign up with your email address
Rocket clouds
HTML5 by Mind Map: HTML5

1. HTML5

1.1. 宣言

1.1.1. <!DOCTYPE html>

1.1.1.1. ブラウザに対して「最も最先端の仕様に基づき」パースやレンダリングを行うよう指示する

1.2. フォーム要素

1.2.1. inputタグ

1.2.1.1. 属性

1.2.1.1.1. type属性

1.2.1.1.2. 入力値の検証の属性

1.2.1.1.3. placeholder

1.2.1.1.4. autofocus

1.2.1.1.5. autocomplete

1.3. グラフィック要素

1.3.1. canvasタグ

1.3.1.1. グラフィックの描画領域

1.3.1.1.1. 幅、高さを指定

1.3.1.2. JavaScriptにて矩形・円・画像などを描画

1.3.1.2.1. 矩形や円、線、テキスト、画像などを描画するメソッドを持つほか、回転や変形などの変換操作を行うこともできる

1.3.1.3. タグ内には、canvasをサポートしていないブラウザで閲覧された際に表示する代替コンテンツを記述することができる

1.3.1.4. キャンバスを配置しただけで何も表示されない

1.3.1.4.1. グラフィックを描画するには、canvasのDOMオブジェクトが持つgetContext()メソッドを呼び出し、描画コンテキストを取得する必要がある

1.3.1.5. 特徴

1.3.1.5.1. 描いてしまった図を個別に認識できない

1.3.1.5.2. canvasの枠組だけでは、ボタンなどを認識できない

1.4. メディア要素

1.4.1. videoタグ

1.4.1.1. 動画の埋め込み

1.4.1.1.1. src="h.mov"

1.4.2. audioタグ

1.4.2.1. 音声の埋め込み

1.4.2.1.1. src="h.mp3"

1.4.3. (既存)

1.4.3.1. imageタグ

1.4.3.1.1. 同じジャンル

1.4.3.1.2. src属性

1.4.4. JavaScriptでの再生・停止などが可能

1.4.5. sourceタグ

1.4.5.1. リソースのURLやMIMEタイプを指定

1.4.5.2. メディアデータのMIMEタイプやコーデック方法を細かく指定することができる

1.4.5.3. 複数指定することが許されていて、ブラウザは記述された順序通りに評価し、ブラウザ自身が取り扱うことのできるメディアデータを自動で判別してくれる

1.4.5.4. 属性

1.4.5.4.1. src

1.4.5.4.2. type

1.4.5.4.3. media

1.4.6. タグの内部に記述したコンテンツは、video/audioタグをサポートしていないブラウザにとっての代替コンテンツとして利用できる

1.4.7. 属性

1.4.7.1. src

1.4.7.1.1. データのURL

1.4.7.2. poster

1.4.7.2.1. データを利用できない場合に、代わりに使用する画像のURLを指定(videoのみ)

1.4.7.3. autobuffer

1.4.7.3.1. データのバッファリングを自動で開始するかをbooleanで指定

1.4.7.4. autoplay

1.4.7.4.1. 再生を自動で行うかをbooleanで指定

1.4.7.5. loop

1.4.7.5.1. ループ再生を自動で行うかをbooleanで指定

1.4.7.6. controls

1.4.7.6.1. ブラウザ固有のコントロールUIを表示するかどうか

1.4.7.7. width

1.4.7.7.1. 動画の幅(videoのみ)

1.4.7.8. height

1.4.7.8.1. 動画の高さ(videoのみ)

1.5. 文書要素

1.5.1. セクション

1.5.1.1. articleタグ

1.5.1.1.1. 記事を表すセクション要素

1.5.1.1.2. ブログサイトにおける個々のエントリのように、内容が単体で完結しているセクションを表す

1.5.1.1.3. 入れ子になっている場合、内側のarticleは外側のarticleと本質的に関連しているものだと考える

1.5.1.2. asideタグ

1.5.1.2.1. 補助的な情報を表すセクション要素

1.5.1.2.2. このタグが記述された部分の外側の要素に対する、補足的な説明を表す

1.5.1.3. navタグ

1.5.1.3.1. ナビゲーションリングを表すセクション要素

1.5.1.3.2. Webサイトのナビゲーションリンクを配置するためのセクション

1.5.1.3.3. サイト内のページの中でも、とくに主要なページへのリンクを含めるのが適切

1.5.1.4. sectionタグ

1.5.1.4.1. 他のどれにも属さない汎用的なセクション要素

1.5.1.4.2. 文書で言えば「章」や「節」、Webアプリケーションで言えばタブで分割されたUIやダイアログなどを表すのに適切

1.5.1.4.3. CSSを用いたスタイルの適用を目的とした「コンテナ」的な用途にこの要素を用いるのは適切ではない

1.5.1.4.4. 目安としてはWebサイトの「アウトライン」を考えたときに、そこに含まれるかどうかでsectionとdivを使い分ければよい

1.5.1.5. body、blockquote、td、datagrid、figureといったタグもセクションを生成する

1.5.1.5.1. これらのタグは「セクションのルート」と呼ばれる

1.5.1.5.2. これらのタグの内部で構成されたセクション構造は、外側のセクション構造に影響を与えない

1.5.2. セクション内

1.5.2.1. セクションの論理構造や付加情報を表す

1.5.2.2. headerタグ

1.5.2.2.1. セクションのヘッダ

1.5.2.3. footerタグ

1.5.2.3.1. セクションのフッタ

1.5.2.4. address

1.5.2.4.1. article/bodyに関する問合せ先アドレス

1.5.3. セクションの見出し

1.5.3.1. h1...h6

1.5.3.2. hgroupタグ

1.5.3.2.1. 見出し要素(h1...h6)をまとめる要素

1.5.4. figureタグ

1.5.4.1. キャプション付きのフロー要素

1.5.4.2. 図表などの埋め込みが主な用途

1.6. メニュー要素

1.6.1. menuタグ

1.6.1.1. ツールバーや右クリック時などのメニューを表す要素

1.6.2. commandタグ

1.6.2.1. ユーザによって呼び出させるコマンドボタン

1.7. ルビ要素

1.7.1. ruby

1.7.2. rt

1.7.3. rp

1.8. オブジェクト埋め込み要素

1.8.1. embed

1.9. 出力要素

1.9.1. outputタグ

1.9.1.1. 出力フォーム

1.9.1.2. 可視状態のhidden

1.10. その他

1.10.1. progress要素

1.10.2. meter要素

1.10.3. details

1.10.3.1. ユーザが必要に応じて参照可能な詳細情報を表す要素

1.10.4. dialog

1.10.4.1. 対話形式のテキストを表す

1.10.4.2. dtタグとddタグを用いて、発言者と発言内容を表す

1.10.5. time

1.10.5.1. 日付を表す要素

1.10.6. mark

1.10.6.1. 他の部分から参照されている、という意味合いが強いテキストの強調

1.10.7. accesskey

1.11. 廃止

1.11.1. * acronym

1.11.2. * applet

1.11.3. * basefont

1.11.4. * bgsound

1.11.5. * big

1.11.6. * blink

1.11.7. * center

1.11.8. * dir

1.11.9. * font

1.11.10. * frame

1.11.11. * frameset

1.11.12. * isindex

1.11.13. * listing

1.11.14. * marquee

1.11.15. * nobr

1.11.16. * noembed

1.11.17. * noframes

1.11.18. * plaintext

1.11.19. * s

1.11.20. * spacer

1.11.21. * strike

1.11.22. * tt

1.11.23. * u

1.11.24. * wbr

1.11.25. * xmp

2. The Web Sockets API

2.1. サーバーサイドのプロセスとの双方向通信の仕組み

2.1.1. HTTPを利用しない為、効率的な通信が実現可能

3. Web Workers

3.1. バックグラウンドで動作するJavaScriptスレッド

3.2. メインページのJavaScriptとワーカ(もしくはワーカ同士)が、JavaScriptオブジェクトをメッセージとして送受信

3.3. メリット

3.3.1. JavaScriptのロジック処理も含めることで画面の動作を軽快に見せることができる

3.4. 仕様策定中

3.4.1. Shared Worker

3.4.1.1. 複数のウィンドウ間で共有される

3.4.2. Persistent Worker

3.4.2.1. ウィンドウを閉じても動作を続ける

3.5. 特徴

3.5.1. 「スレッド」とは厳密な意味で異なり、変数を共有できない

3.5.2. window document といった変数も不可

3.5.3. workerからDOMを触ることはできない

3.5.4. 直接ログを吐き出せない

3.5.4.1. UIスレッドにメッセージを送ってログを吐き出すことで対応

4. クライアントの データ永続化機構

4.1. Web Storage

4.1.1. Key/Value形式で永続化

4.1.1.1. Key/Valueは共に、文字列

4.1.2. localStorage

4.1.2.1. ドメインごとに保存

4.1.2.1.1. 永続化期間、無制限

4.1.3. sessionStorage

4.1.3.1. ウィンドウごとに保存

4.1.3.1.1. 永続化期間、ウィンドウが閉じるまで

4.2. Web SQL Database

4.2.1. SQLでアクセス可能な永続化

4.2.2. 非同期API

4.2.2.1. 扱いにくいが、バックグラウンド処理

4.2.3. 同期API

4.2.4. 2010/01/08現在、 仕様が行き詰まっている

4.2.4.1. SQLLiteの実装に依存しているため

4.3. Indexed Database API

5. File API

5.1. ファイルを読み取るにはFileReaderオブジェクトを用いる

5.2. ファイル選択ダイアログでユーザが選択したファイルにアクセスし、内容を読み取るSample

5.2.1. // ファイルアップロード要素のDOMを取得 var fileElem = $("input[type='file']")[0]; // ユーザが選択したファイル(複数の可能性があるため、FileList型) var files = fileElem.files; // ファイル読み込みを行うオブジェクト var reader = new FileReader(); // 読み込み完了時のイベントを補足 reader.onload = function(event) { // ファイルの内容を文字列で取得(FileReader.resultが内容を保持) var fileContent = reader.result; ... // ファイルの内容を処理 }; for (var i = 0; i < files.length; i++) { var file = files[i]; // ファイルの内容を読み取る reader.readAsText(file, "UTF-8"); }