calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

とても効率的になった！HTML5に関する「役立つ」まとめ

  • 作成：2013/12/16
  • 更新：2014/11/01
  • Web制作 >
HTML5_Reference

サイト構築をするときに、フォームまわりの改善や動画やAPIを使わなくてはいけない機会があったので、ついでにHTML５のマークアップをおさらいをしました。今回はサイトを構築する上で覚えておくと役に立つ、使用頻度の高いポイントだけおさえてまとめました。

エンジニア速報は Twitter の@commteで配信しています。

Sponsored Link

もくじ

HTML5 タグ一覧

動画／音楽再生

アプリケーション向けの機能／API

サンプル

テンプレート

HTML5 タグ一覧

１．フォーム（input ）関連の便利な新要素

form_element_html5

これまでカレンダーやプログレスバーなどはJavaScriptで実装されていましたが、HTML5だけで実装可能です。今後積極的に使っていきたいな、というものをリスト化しておきます。ブラウザによって非表示や結果が違うものあります。

  • autofocus／自動フォーカス。文章のロード後すぐにフォーカス
  • autocomplete／履歴から入力内容を予想して提示する機能を有効にする
  • required／入力必須にする。空送信するとエラーを返す
  • pattern／入力欄の値をチェックするための正規表現を指定する
  • placeholder／入力欄に「入力例やヒントなどのテキスト」をあらかじめ表示
  • datalist／サジェスト（入力候補）を提供
  • output／計算結果を表示。数値入力で自動計算する
  • keygen／公開鍵暗号方式の鍵ペアジェネレーターを表示。鍵ペア生成と送信
  • progress／タスク進行度合いを表すプログレスバー
  • meter／割合を表すゲージ。全体に対する使用割合などを視覚化する
  • email／type属性に「email」を指定するとメールアドレス以外エラーにできる
  • multiple／複数のメールアドレスをカンマ区切りで入力できる
  • number／フォームパーツを数値にする。ステップアップ等のコントロールに
  • min/max/step／それぞれ最小値・最大値・数値の刻みを指定できる
  • range／数値の入力欄に。chrome/Operaはスライダーで表示される
  • color／フォームで色指定できる。chromeではカラーピッカー表示
  • datetime-local／年月日入力するコントロール表示。chrome/Operaはカレンダー
  • time／時分秒の入力欄表示。chrome/Operaはボタンダウン入力ボックス利用可
  • dirname／文字列の書式方向（左右）を指定
  • search／検索ボックス

２．基本要素一覧

element_html5

要素の中でもブログや通販サイトを作る上で使用頻度が高いもの、これから使っていきたいものをリスト化、あまり使わないルビ関連などは省いてます。

  • download／ダウンロードの保存ファイル名を指定できる
  • sandbox／iframe要素で、スクリプト・ポップアップ無効など安全性を高める
  • scoped／style要素で指定するとbody内にstyle有効範囲を持たせることができる
  • section／見出しと見出しに対応する文章や画像。まとまりごとにグループ化
  • article／ブログエントリーやニュース記事のように単体で成り立つもの
  • nav／グローバルナビゲーション、ぱんくずなどの主要なセクション
  • aside／サイドバーや広告・SNSボタン・補足情報など、切り離しができる箇所
  • header／ロゴなど、セクションにおけるヘッダー
  • footer／コピーライトなどのフッター情報
  • small／フッターにある著作権表記はsmall要素で記述する
  • address／連絡先。body要素なら文章全体、article要素ごとならそれぞれの記事
  • figure／図表。例えばブログ記事内の写真は自己完結しているのでfigureを使う
  • figcaption／図表のキャプション。人気メニューなどはfigureとfigcaptionを使う

動画／音楽再生

３．video タグ

video_tag_html5

HTML5ではこれまでプラグインなどで実現していた動画やオーディオの再生が可能になります。videoタグはビデオファイルを再生し、プレイヤーを表示します。srcで動画ファイルURL、widthとheightで縦横、controlsで再生・一時停止ボタン、autoplayで自動再生、loopでループ、posterでサムネイル表示。

４．audio タグ

audio_tag_html5

音声ファイル再生ならaudioタグ。こちらも、controls/autoplay/loopが使えます。音声を最初から読み込みたいときは「preload」属性を使います。

アプリケーション向けの機能／API

HTML5ではこれらを使うことで、便利で使いやすいウェブアプリ機能を実装することができます。JavaScriptから利用します。

５．位置情報を取得する

location_html5

ユーザーの位置情報を扱うためのAPIである「Geolocation API」ユーザーの安全性やプライバシーに配慮した仕様となっています。以下、サンプルつきで詳しく解説してあります。

６．ローカルストレージ

local_storage_html5

ユーザーのブラウザ側でデータを保存する機能「Web Storage」クッキーに代わるデータ保存の仕組みです。データ保存・削除・クリア・上書きなどの操作もJavaScriptで行うことができます。セッションとlocalストレージの解説など。

７．サーバー双方向通信

server_html5

ブラウザとサーバー間に接続を確立する「WebSocket」サーバーとクライアント双方向のデータ送信を可能にします。

８．バックグラウンド処理

background_processing_html5

高負荷な計算処理や複数ファイルの読み込み時、別のファイルをバック部ラウンドで実行したり。以下、並列処理を実現するため「Web Workers」の使い方。

９．ファイル操作

file_operation_html5

ローカルファイルの中身を取得して JavaScript でいじるなど。こちらは「File API」の使い方。

サンプル

１０．ソースコードつきのサンプル

sample_html5

HTML5を使ったソースコードつきのサンプルまとめです。複雑なものではなくシンプルで、ウェブページからブログをコーディングするときに使えそうなもの中心。API、基本の書き方のまとめなど具体的にソースを見て、勉強もできます。

テンプレート

１１．テンプレート＋作成ツール

template_html5

HTML5テンプレートやフレームワークの中でも比較的使いやすいものと、コーディング系ツールをまとめました。ダウンロードするだけじゃなくて、実際どのように構築されているか見てみましょう。

スポンサード リンク

関連記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。