Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

HTML5 by Mind Map: HTML5
4.5 stars - 2 reviews range from 0 to 5

HTML5

HTML5

宣言

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

フォーム要素

inputタグ, 属性, type属性, hidden, ユーザにとって不可視の隠しフィールド, text, 1行テキスト入力フィールド, search, textと同様(だが、ブラウザによっては見た目が代わったりなどの効果がある), tel, textと同様(だが、ブラウザによっては見た目が変わったりなどの効果がある), url, textと同様だが、URLとして正しい形式の文字列を入力する必要がある, e-mail, textと同様だが、メールアドレスとして正しい形式の文字列を入力する必要がある, password, パスワード入力フィールド, datetime, date, month, week, time, datetime-local, 日時を入力するフィールド, valueAsDate()メソッドを用いて、入力値をDate型として取得することも可能(datetime-localを除く), number, 数値を入力するフィールド, 見た目は普通のテキストフィールドと変わらないが、数値以外を入力することができない, range, 一定範囲内の数値を入力するためのフィールド, minとmaxという属性を持ち、最小値と最大値を設定することができる(省略時は0と100), color, 色選択フィールド, 選択された値は"#000000"という形式の文字列で取得することができる, checkbox, チェックボックス, radio, ラジオボタン, file, ファイルアップロードのフィールド, "multiple"属性を指定することにより、複数のファイルを一度に選択できるようになった, value属性はファイル名をカンマで区切った文字列となる, accept属性にMIMEタイプを指定することにより、選択できるファイルの種類を限定できる, submit, 送信ボタン, formmethod/formaction/formenctypeといった属性を用いて、formの属性をオーバーライドできる, image, 画像表示ボタン, formmethod/formaction/formenctypeといった属性を用いて、formの属性をオーバーライドできる, reset, リセットボタン, button, ボタン, 入力値の検証の属性, required, 入力必須, pattern, 入力値のパターン, 正規表現で指定, min/max, 最小値と最大値(数値型や日付型のフィールドのみ), step, 指定した数値で刻まれた値に合致するよう強制(数値型や日付型のフィールドのみ), その他, form要素やfieldset要素が持つ「checkValidity()」メソッドを呼べば、明示的にチェックを行うことも可能, placeholder, 未入力状態の入力フィールドに表示されるヒント情報, autofocus, 画面が表示された際、この属性を付与した入力フィールドに自動的にフォーカスが当たる, autocomplete, 入力補助, 何も指定しなかった場合は、ブラウザのデフォルト設定が用いられる, 補完候補として表示されるデータのリストを明示的に指定することも可能, datalistタグとlist属性

グラフィック要素

canvasタグ, グラフィックの描画領域, 幅、高さを指定, JavaScriptにて矩形・円・画像などを描画, 矩形や円、線、テキスト、画像などを描画するメソッドを持つほか、回転や変形などの変換操作を行うこともできる, タグ内には、canvasをサポートしていないブラウザで閲覧された際に表示する代替コンテンツを記述することができる, キャンバスを配置しただけで何も表示されない, グラフィックを描画するには、canvasのDOMオブジェクトが持つgetContext()メソッドを呼び出し、描画コンテキストを取得する必要がある, 特徴, 描いてしまった図を個別に認識できない, canvasの枠組だけでは、ボタンなどを認識できない, コントロール部分をhtmlで実現するか、ウィジット全体をSVGで描くなどの対応が必要, 描画した座標をプログラムで覚えておいて、canvasのclickイベント発生時にマウスカーソルの座標を評価、という手法も

メディア要素

videoタグ, 動画の埋め込み, src="h.mov"

audioタグ, 音声の埋め込み, src="h.mp3"

(既存), imageタグ, 同じジャンル, src属性, リソースのURLを指定

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

sourceタグ, リソースのURLやMIMEタイプを指定, メディアデータのMIMEタイプやコーデック方法を細かく指定することができる, 複数指定することが許されていて、ブラウザは記述された順序通りに評価し、ブラウザ自身が取り扱うことのできるメディアデータを自動で判別してくれる, 属性, src, データのURL, type, データのMIMEタイプ, media, 指定されたデータを利用するメディアタイプ

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

属性, src, データのURL, poster, データを利用できない場合に、代わりに使用する画像のURLを指定(videoのみ), autobuffer, データのバッファリングを自動で開始するかをbooleanで指定, autoplay, 再生を自動で行うかをbooleanで指定, loop, ループ再生を自動で行うかをbooleanで指定, controls, ブラウザ固有のコントロールUIを表示するかどうか, width, 動画の幅(videoのみ), height, 動画の高さ(videoのみ)

文書要素

セクション, articleタグ, 記事を表すセクション要素, ブログサイトにおける個々のエントリのように、内容が単体で完結しているセクションを表す, 入れ子になっている場合、内側のarticleは外側のarticleと本質的に関連しているものだと考える, asideタグ, 補助的な情報を表すセクション要素, このタグが記述された部分の外側の要素に対する、補足的な説明を表す, navタグ, ナビゲーションリングを表すセクション要素, Webサイトのナビゲーションリンクを配置するためのセクション, サイト内のページの中でも、とくに主要なページへのリンクを含めるのが適切, sectionタグ, 他のどれにも属さない汎用的なセクション要素, 文書で言えば「章」や「節」、Webアプリケーションで言えばタブで分割されたUIやダイアログなどを表すのに適切, CSSを用いたスタイルの適用を目的とした「コンテナ」的な用途にこの要素を用いるのは適切ではない, divを使用するべき, 目安としてはWebサイトの「アウトライン」を考えたときに、そこに含まれるかどうかでsectionとdivを使い分ければよい, body、blockquote、td、datagrid、figureといったタグもセクションを生成する, これらのタグは「セクションのルート」と呼ばれる, これらのタグの内部で構成されたセクション構造は、外側のセクション構造に影響を与えない

セクション内, セクションの論理構造や付加情報を表す, headerタグ, セクションのヘッダ, footerタグ, セクションのフッタ, address, article/bodyに関する問合せ先アドレス

セクションの見出し, h1...h6, hgroupタグ, 見出し要素(h1...h6)をまとめる要素

figureタグ, キャプション付きのフロー要素, 図表などの埋め込みが主な用途

メニュー要素

menuタグ, ツールバーや右クリック時などのメニューを表す要素

commandタグ, ユーザによって呼び出させるコマンドボタン

ルビ要素

ruby

rt

rp

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

embed

出力要素

outputタグ, 出力フォーム, 可視状態のhidden

その他

progress要素

meter要素

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

dialog, 対話形式のテキストを表す, dtタグとddタグを用いて、発言者と発言内容を表す

time, 日付を表す要素

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

accesskey

廃止

* acronym

* applet

* basefont

* bgsound

* big

* blink

* center

* dir

* font

* frame

* frameset

* isindex

* listing

* marquee

* nobr

* noembed

* noframes

* plaintext

* s

* spacer

* strike

* tt

* u

* wbr

* xmp

The Web Sockets API

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

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

Web Workers

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

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

メリット

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

仕様策定中

Shared Worker, 複数のウィンドウ間で共有される

Persistent Worker, ウィンドウを閉じても動作を続ける

特徴

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

window document といった変数も不可

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

直接ログを吐き出せない, UIスレッドにメッセージを送ってログを吐き出すことで対応

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

Web Storage

Key/Value形式で永続化, Key/Valueは共に、文字列

localStorage, ドメインごとに保存, 永続化期間、無制限

sessionStorage, ウィンドウごとに保存, 永続化期間、ウィンドウが閉じるまで

Web SQL Database

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

非同期API, 扱いにくいが、バックグラウンド処理

同期API

2010/01/08現在、 仕様が行き詰まっている, SQLLiteの実装に依存しているため

Indexed Database API

File API

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

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

// ファイルアップロード要素の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"); }