入門 HTML5

[cover photo]
  • 2011年04月 発行
  • 256ページ
  • ISBN978-4-87311-482-8
  • フォーマット Print PDF
  • 原書: HTML5: Up and Running

オライリー・ジャパンで書籍を購入:
定価2,484円

Ebook Storeで電子版を購入:
価格1,987円

HTML5では、最新のWebアプリケーションに必要となる数々の新機能が提供されています。また、これまで長い間使われてきたが、標準化はおろか文書化もされていなかったWebプラットフォームの多くの機能が標準化されています。本書は、HTML5の新機能だけでなく、仕様の背景から、基本テクニックや実践的なアプローチまでをまとめたHTML5の手引書です。HTML5についての著者の深い理解を背景に解説されており、HTML5の入門者から、すでに知識のある開発者まで、幅広い読者にとって価値のある書籍です。

関連書籍

HTML5 Canvas
HTML5 Canvasデスクトップリファレンス
HTML5 ジオロケーション
HTML5 ファイルシステムAPI
JavaScript: The Good Parts
JavaScriptパターン
ハイパフォーマンスJavaScript

目次

監訳者まえがき
まえがき

1章 ここまでの道のり
    1.1 はじめに
    1.2 MIMEタイプ
    1.3 標準はどのように作られるか、という長い余談
    1.4 HTMLの系譜
    1.5 1997年から2004年までのHTML策定の歴史
    1.6 XHTMLについての誤解
    1.7 対立する構想
    1.8 WHATWGとは
    1.9 W3Cへの復帰
    1.10 後日談
    1.11 参考文献

2章 HTML5の機能を検出する
    2.1 はじめに
    2.2 4つの検出テクニック
    2.3 Modernizr:HTML5検出ライブラリ
    2.4 Canvas
    2.5 Canvasテキスト
    2.6 ビデオ
    2.7 ビデオフォーマット
    2.8 ローカルストレージ
    2.9 Web Workers
    2.10 オフラインWebアプリケーション
    2.11 Geolocation
    2.12 inputタイプ
    2.13 プレースホルダ
    2.14 フォームのオートフォーカス
    2.15 マイクロデータ
    2.16 参考文献

3章 HTML文書の構造と意味付け
    3.1 はじめに
    3.2 DOCTYPE
    3.3 ルート要素
    3.4 <head>要素
        3.4.1 文字エンコーティング
        3.4.2 リンクタイプ
    3.5 HTML5の新しい意味要素
    3.6 ブラウザが不明な要素を取り扱う方法についての長い余談
    3.7 ヘッダ
    3.8 Article要素
    3.9 日付と時間
    3.10 ナビゲーション
    3.11 フッタ
    3.12 参考文献

4章 Canvasによる描画
    4.1 はじめに
    4.2 単純なシェープ
    4.3 Canvasの座標
    4.4 パス
    4.5 テキスト
    4.6 グラデーション
    4.7 画像
    4.8 IEの場合
    4.9 総合的な実例
    4.10 参考文献

5章 Webのビデオ
    5.1 はじめに
    5.2 ビデオのコンテナ
    5.3 ビデオコーデック
        5.3.1 H.264
        5.3.2 Theora
        5.3.3 VP8
    5.4 オーディオコーデック
        5.4.1 MPEG-1 Audio Layer 3
        5.4.2 Advanced Audio Coding
        5.4.3 Vorbis
    5.5 Web上で利用可能な組み合わせ
    5.6 H.264ビデオのライセンス事情
    5.7 Miro Video Converterによるビデオのエンコード
    5.8 FirefoggによるOggビデオのエンコード
    5.9 ffmpeg2theoraを使ったOggビデオのバッチエンコード
    5.10 HandBrakeを使ったH.264ビデオのエンコード
    5.11 HandBrakeを使ったH.264ビデオのバッチエンコード
    5.12 ffmpegを使ったWebMのエンコード
    5.13 そして、マークアップへ
        5.13.1 MIMEタイプが引き起こす可能性のある問題
    5.14 IEの場合
    5.15 iPhoneとiPadの問題
    5.16 Android端末の問題
    5.17 総合的な実例
    5.18 参考文献

6章 Geolocation APIによる位置情報通知
    6.1 はじめに
    6.2 Geolocation API
    6.3 実際のコード
    6.4 エラー処理
    6.5 選択の自由
    6.6 IEの場合
    6.7 geo.jsに助けを求める
    6.8 総合的な実例
    6.9 参考文献

7章 Webアプリケーションのローカルストレージ:その過去・現在・未来
  
    7.1 はじめに
    7.2 HTML5以前のローカルストレージハック
    7.3 HTML5ストレージ入門
    7.4 HTML5ストレージの使用
        7.4.1 HTML5ストレージ領域の変化を検出する
        7.4.2 現在のブラウザによる制限
    7.5 HTML5ストレージの実例
    7.6 名前付きキーと値のペアを超えて:競合する構想
    7.7 参考文献

8章 オフライン状態での動作
    8.1 はじめに
    8.2 キャッシュマニフェスト
        8.2.1 NETWORK セクション
        8.2.2 FALLBACK セクション
    8.3 イベントの流れ
    8.4 デバッグの手法
    8.5 実際に作ってみる
    8.6 参考文献

9章 Webフォーム
    9.1 はじめに
    9.2 プレースホルダ
    9.3 フィールドへのオートフォーカス
        9.3.1 できるだけ早くフォーカスを設定する
    9.4 メールアドレス
    9.5 Webアドレス
    9.6 スピンボックスによる数値の入力
    9.7 スライダによる数値の入力
    9.8 デートピッカー
    9.9 検索ボックス
    9.10 カラーピッカー
    9.11 フォームの検証
    9.12 入力必須フィールド
    9.13 参考文献

10章 マイクロデータによるマークアップの拡張
    10.1 はじめに
    10.2 マイクロデータとは
    10.3 マイクロデータのデータモデル
    10.4 人物のマークアップ
        10.4.1 Google リッチスニペットの紹介
    10.5 会社や組織のマークアップ
    10.6 イベントのマークアップ
        10.6.1 Google リッチスニペット、ふたたび
    10.7 レビューをマークアップする
    10.8 参考文献

付録A (ほぼ)アルファベット順のHTML5機能検出方法
    A.1 要素の一覧
    A.2 参考文献

索引

ここで紹介する正誤表には、書籍発行後に気づいた誤植や更新された情報を掲載しています。以下のリストに記載の年月は、正誤表を作成し、増刷書籍を印刷した月です。お手持ちの書籍では、すでに修正が施されている場合がありますので、書籍最終ページの奥付でお手持ちの書籍の刷版、刷り年月日をご確認の上、ご利用ください。

■P.42 ページ中央、脚注の後
誤:rel = stylesheetと違い、
正:rel="stylesheet"と違い、

■P.186 表9-6 Chromeの項目
誤:Chrome / ×
正:Chrome / 10.0〜

ここで紹介する正誤表には、書籍発行後に気づいた誤植や更新された情報を掲載しています。以下のリストに記載の年月は、正誤表を作成し、増刷書籍を印刷した月です。お手持ちの書籍では、すでに修正が施されている場合がありますので、書籍最終ページの奥付でお手持ちの書籍の刷版、刷り年月日をご確認の上、ご利用ください。

■本書中に記載の「本書のWebサイト」のURLを変更。
これは本書全体に渡って変更されています。
誤:http://diveintohtml5.org
正:http://diveintohtml5.info

* diveintohtml5.infoは著者に代わって有志によって公開されているものです。

■P.10 1.5節の第3パラグラフ2行目
誤:公開され。
正:公開された。

■P.11 本文4行目
誤:行う様に
正:行うように

■P.11 第3パラグラフの下から2行目
誤:書き間違え
正:書き間違い

■P.12 1.7の最初のパラグラフの最後の行
誤:追加するという
正:追加するという点で

■P.13 3行目
誤:劣った
正:苦しまぎれの

■P.21 2.6節の6行目。脚注を削除。
各種のビデオフォーマットについては本書の5章を参照してください。

■P.23 脚注
誤:「やさしいビデオエンコーディング入門」(http://diveintomark.org/tag/give)を読んでみるのもいいだろう。
正:(削除)

■P.34 1、2行目
「やさしいビデオエンコーディング入門」とそのURLを削除。

■p.53 下から15行目
「このマークアップを行うと、」の書体を修正。

■P.60 下から6行目
誤:私のブログ(http://diveintomark.org)は、
正:私のブログには、

■P.127 コラムの冒頭
「iOS 3.X」の「i」の書体を修正。

■P.131 5.18節の3項目
「やさしいビデオエンコーディング入門」とそのURLを削除。

ここで紹介する正誤表には、書籍発行後に気づいた誤植や更新された情報を掲載しています。以下のリストに記載の年月は、正誤表を作成し、増刷書籍を印刷した月です。お手持ちの書籍では、すでに修正が施されている場合がありますので、書籍最終ページの奥付でお手持ちの書籍の刷版、刷り年月日をご確認の上、ご利用ください。


現在販売されている最新版は第2版ですが、将来の増刷時に修正予定の情報を下記に掲載しています。(第3刷では修正済みです。)

■P.16 2行目のHTMLの歴史のリンク
誤:http://esw.w3.org/topic/HTML/history
正:http://www.w3.org/html/wg/wiki/History

■P.19 下から18行目
誤:return !!document. createElement('canvas').getContext
正:return !!document.createElement('canvas').getContext

■P.19 下から14行目
誤:return !!document. createElement('canvas'). getContext
正:return !!document.createElement('canvas').getContext

■P.20 2.5節の2行目
誤:テキスト機能は最近になって付け加え
正:テキスト機能は後になって付け加え

■P.23 下から1、2行目
誤:Operaなど主要なブラウザの次のバージョンでサポート
正:Operaなどでサポート

■P.28 2.11節の最後から8行目のGoogle Gearsへのリンク
誤:http://tools.google.com/gears/
正:http://code.google.com/p/gears/

■P.29 <input type="search">
誤:http://whatwg.org/html5#text-state-and-search-state
正:http://whatwg.org/html5#text-(type=text)-state-and-search-state-(type=search)

■P.29 <input type="number">
誤:http://whatwg.org/html5#number-state
正:http://whatwg.org/html5#number-state-(type=number)

■P.29 <input type="range">
誤:http://whatwg.org/html5#range-state
正:http://whatwg.org/html5#range-state-(type=range)

■P.29 <input type="color">
誤:http://whatwg.org/html5#color-state
正:http://whatwg.org/html5#color-state-(type=color)

■P.29 <input type="tel">
誤:http://whatwg.org/html5#telephone-state
正:http://whatwg.org/html5#telephone-state-(type=tel)

■P.29 <input type="url">
誤:http://whatwg.org/html5#url-state
正:http://whatwg.org/html5#url-state-(type=url)

■P.29 <input type="email">
誤:http://whatwg.org/html5#e-mail-state
正:http://whatwg.org/html5#e-mail-state(type=email)

■P.29 <input type="date">
誤:http://whatwg.org/html5#date-state
正:http://whatwg.org/html5#date-state-(type=date)

■P.29 <input type="month">
誤:http://whatwg.org/html5#month-state
正:http://whatwg.org/html5#month-state-(type=month)

■P.29 <input type="week">
誤:http://whatwg.org/html5#week-state
正:http://whatwg.org/html5#week-state-(type=week)

■P.29 <input type="time">
誤:http://whatwg.org/html5#time-state
正:http://whatwg.org/html5#time-state-(type=time)

■P.29 <input type="datetime">
誤:http://whatwg.org/html5#date-and-time-state
正:http://whatwg.org/html5#date-and-time-state-(type=datetime)

■P.29 <input type="datetime-local">
誤:http://whatwg.org/html5#local-date-and-time-state
正:http://whatwg.org/html5#local-date-and-time-state-(type=datetime-local)

■P.40 脚注(††)
誤:http://code.google.com/p/doctype/wiki/ArticleUtf7
正:http://openmya.hacker.jp/hasegawa/security/utf7cs.html

■P.48 脚注 IE9 Developer Guideへのリンク
誤:http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML_Parsing
正:http://msdn.microsoft.com/en-us/ie/hh410106#_HTML_Parsing

誤:http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_Semantic_Elements
正:http://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_Semantic_Elements

■P.59 上から6行目
誤:diveintoaccessibility.org
正:diveintoaccesibility.info

■P.67 脚注
誤:WebGLの実装もChrome、Firefox、WebKitで進められている。
正:WebGLの実装もそれぞれのブラウザで行われいる。

■P.83 脚注 IE9 Developer Guideへのリンク
誤:http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_canvas
正:http://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_canvas

■P.89 脚注 IE9 Developer Guideへのリンク
誤:http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_canvas
正:http://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_canvas

■P.99 表5-2の注釈b
誤:Google ChromeはもうすぐH.264のサポートを打ち切る(http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html)。
正:Google ChromeはH.264のサポートを打ち切っている。

■P.106 5.8節の2行目
誤:これは、Mozilla FirefoxとGoogle Chromeで
正:これは、Mozilla FirefoxとGoogle Chrome、そしてOperaで

■P.114 5.9節の2行目
誤:これは、Mozilla FirefoxとGoogle Chromeで
正:これは、Mozilla FirefoxとGoogle Chrome、そしてOperaで

■P.115 5.10節の2行目
誤:Safari、Adobe Flash、iPhone、そしてGoogle Android機器上で
正:Safari、Internet Explorer、Adobe Flash、iPhone、そしてGoogle Android機器上で

■P.132 最初の項目のIE9 Developer Guideへのリンク
誤:http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_video_audio
正:http://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_video_audio

■P.139 下から6行目
誤:W3CのGeolocation API
正:W3C Geolocation API

■P.139 脚注
誤:http://tools.google.com/gears/
正:http://code.google.com/p/gears/

■P.142 6.9節の2項目 GearsのURL
誤:http://tools.google.com/gears/
正:http://code.google.com/p/gears/

■P.142 6.9節の3項目
NokiaのGeolocation APIとそのURLを削除。

■P.143 6.9節の最後の項目 IE9 Developer GuideのURL
誤:http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_geolocation
正:http://msdn.microsoft.com/en-us/ie/hh410106#_HTML5_geolocation

■P.155 上から3項目のIBM DeveloperWorksのチュートリアル
誤:http://www.ibm.com/developerworks/jp/p/library/x-html5mobile2/
正:http://www.ibm.com/developerworks/jp/xml/library/x-html5mobile2/

■P.170 表9-1 Androidの項目
誤:Android / ×
正:Android / 2.1〜

■P.171 表9-2 Androidの項目
誤:Android / ○
正:Android / 3.0〜

■P.184 表9-5 Chromeの項目
誤:Chrome / 6.0〜
正:Chrome / 10.0〜

■P.189 7〜8行目
「<rant>要素もだ、なんてこったい!」の日本語書体を修正。

■P.189 3段落目の最終行
誤:1.11 後日談
正:1.10 後日談

■P.218 最初の項目(リッチスニペットに関するコツと技)
Knolは2012/5/1をもって終了のため削除。

■P.220 <device>
<device>要素は仕様から削除されたため削除。

■P.222 <input type="tel">
誤:http://whatwg.org/html5#telephone-state
正:http://whatwg.org/html5#telephone-state-(type=tel)

■P.222 <input type="datetime-local">
誤:i.setAttribute('type', 'datetime-local);
正:i.setAttribute('type', 'datetime-local');

■P.223 <time>
誤:return 'valueAsDate' in document.createElement('time');
正:return 'datetime' in document.createElement('time');

■P.223 <video>
誤:5章を参照
正:http://whatwg.org/html5#the-track-element

■P.223 <vedeo>
誤:http:www.webmproject.org
正:「5.3.3 VP8」を参照

■P.224 Microdata
誤:http://bit.ly/dBGnqr
正:http://whatwg.org/html#microdata-dom-api

■P.225 Session Strage(セッションストレージ)
誤:http://dev.w3.org/html5/webstorage/
正:http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute

■P.225 Undo
誤:http://whatwg.org/html5#undo
正:http://rniwa.com/editing/undomanager.html

■P.226 XMLHttpRequest:クロスドメインリクエスト
誤:(参照先なし)
正:http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#the-withcredentials-attribute

■P.226 XMLHttpRequest:フォームデータ送信
誤:(参照先なし)
正:http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#interface-formdata

■P.226 XMLHttpRequest:“upload" progressイベント
誤:(参照先なし)
正:http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html#the-upload-attribute

■P.226 ローカルストレージ
誤:(参照先なし)
正:7章を参照

ここで紹介する正誤表には、書籍発行後に気づいた誤植や更新された情報を掲載しています。以下のリストに記載の年月は、正誤表を作成し、増刷書籍を印刷した月です。お手持ちの書籍では、すでに修正が施されている場合がありますので、書籍最終ページの奥付でお手持ちの書籍の刷版、刷り年月日をご確認の上、ご利用ください。


■P.99 表5-2の注釈b
誤:Google ChromeはH.264のサポートを打ち切っている。
正:Google ChromeはH.264のサポートを打ち切ると2011年に表明したが、現在(2013年5月)に至るまでそれは行われていない。

Feedback

皆さんのご意見をお聞かせください。ご購入いただいた書籍やオライリー・ジャパンへのご感想やご意見、ご提案などをお聞かせください。より良い書籍づくりやサービス改良のための参考にさせていただきます。
[feedbackページへ]