Google API Expertが解説する HTML5ガイドブック

Google API Expertが解説する HTML5ガイドブック

¥2,800+税

品種名
書籍
発売日
2010/9/16
ページ数
304P
サイズ
B5変型判
著者
羽田野 太巳・白石 俊平・古籏 一浩・太田 昌吾
ISBN
9784844329275

Google社公認のエキスパート4人から学ぶ仕様解説だけではない、Web標準技術の実践本!

次期InternetExplorer9の完全対応で現実味を帯びてきた次世代のWeb標準規格である「HTML5」。本書は、HTML5とAPI群、その他関連テクノロジーの中から、実践に活用できる技術を厳選した実用解説書となっています。筆者に、Google API Expert(HTML5)として著名な羽田野氏、白石氏に加えて、同じAPI Expertの一員でもある古籏氏、太田氏を迎えました。SVGやCSS3など、他のHTML5関連書にはない独自の視点を盛り込みながら、多角的な分析を試みています。

「読者アンケートに答える」「読者プレゼントに応募」の場合もこちらをご利用ください。

アンケートに答える

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

学校・法人一括購入に関するお問い合わせはこちらへ。

一括購入窓口

詳細

■ページイメージ




■著者からのメッセージ
HTML5元年

2010年3月、米国ラスベガスにて、Microsoftの開発者向けカンファレンス「MIX10」が開催された。世間ではHTML5が盛り上がる中、ついにInternetExplorerがWeb標準、そしてHTML5の機能を積極的にInternetExploerに実装すると表明したのだ。

InternetExplorer9は、すでにPlatformPreviewという形で開発者向けにリリースされている。現時点で最新のPlatformPreviewには、video要素やcanvas要素といったHTML5で新たに導入された機能が実装されている。さらに、かねてより要望が大きかったSVGも実装されている。

ついに、HTML5が絵に描いた餅ではなく、現実のものになろうとしているのだ。恐らく、この流れが止まることはないだろう。近い将来、HTML5の機能を使ったWebサイトやWebアプリケーションはあたりまえのものとなっていることだろう。

(羽田野 太巳・まえがきより一部抜粋)

目次

第1章 イントロダクション [羽田野 太巳]
1.1 HTML5とは
1.2 DOM
1.3 HTML5のAPI
1.4 WHATWGが作り出したAPI
1.5 HTML5関連のAPI
1.6 オープンWeb
1.7 HTML4との違い

第2章 Canvas [羽田野 太巳]
2.1 Canvasの仕様
2.2 Canvas2Dコンテキスト
2.3 パス
2.4 色の定義
2.5 矩形
2.6 テキスト
2.7 ピクセル操作
2.8 変形

第3章 SVG [太田 昌吾]
3.1 SVGとは
3.2 SVGの基本的な書き方
3.3 SVGとJavaScript

第4章 Video & Audio [古籏 一浩]
4.1 手軽に扱えるようになったVideo& Audio
4.2 video、audio要素
4.3 Video& Audioのメソッド/プロパティ
4.4 イベント
4.5 イベントの発生順序
4.6 Videoを利用したリアルタイムテロッパー
4.7 映像とCanvasを組み合わせる
4.8 簡易オーディオプレイヤーの作成
4.9 楽器演奏プログラムの作成
4.1 可変速ビデオプレイヤーの作成

第5章 ドラッグ&ドロップ [羽田野 太巳]
5.1 ドラッグ&ドロップの仕様
5.2 Webページ上のコンテンツのドラッグ&ドロップ
5.3 デスクトップのファイルをドラッグ

第6章 オフラインWebアプリケーション [白石 俊平]
6.1 オフラインWebアプリの概要
6.2 オフラインWebアプリの基本サンプル
6.3 キャッシュマニフェストを記述するルール
6.4 JavaScript でキャッシュを制御する
6.5 JavaScript APIを用い、キャッシュ状況を可視化するサンプル

第7章 WebSocket [白石 俊平]
7.1 WebSocketの概要
7.2 WebSocket事始め
7.3 複数のWebSocket接続を同時に扱う
7.4 サブプロトコルの構築と利用

第8章 Web Workers [白石 俊平]
8.1 Web Workersの概要
8.2 Hello, Web Workers!
8.3 importScripts()を使用して、ワーカのソースコードを分割する

第9章 Geolocation [古籏 一浩]
9.1 Geolocationとは
9.2 HTML5 で定義されているGeolocation
9.3 位置情報をGoogleマップ上に表示するプログラムの作成

付録 [① 古籏 一浩][②・③ 太田 昌吾]
①各ブラウザのCanvas/Video対応
②ECMA-262 3rd Editionから5th Editionの変更点
③CSS TransitionsとAnimations



■著者プロフィール
羽田野 太巳(はたの ふとみ)
有限会社futomi代表取締役。2007年にHTML5.JPを開設し、Canvasを使ったJavaScriptライブラリの開発、HTML5の最新情報の発信、HTML5関連仕様の日本語訳を手がける。
著書「徹底解説HTML5マークアップガイドブック」(株式会社秀和システム)「JavaScript,Ajax,DOMによるWebアプリケーションスーパーサンプル」(ソフトバンククリエイティブ)「標準DOMスクリプティングJavaScript+DOMによるWebアプリデザインの基礎」(ソフトバンククリエイティブ)ほか
Web : http://www.html5.jp/  http://www.futomi.com/
白石 俊平(しらいし しゅんぺい)
株式会社オープンウェブ・テクノロジー代表、開発者コミュニティーhtml5-developers-jp管理人。
この奥付を執筆した時点では、第一弾サービス「DaVinciPad」(http://www.davincipad.net)をリリースしたばかり。さらに革新的なアイデアでビジネスを展開しようと、悪戦苦闘の日々を繰り広げています。
著書「GoogleGearsスタートガイド」(技術評論社)「HTML5&API入門」(日経BP社)など
古籏 一浩(ふるはた かずひろ)
この本で36冊目。今回も共著となりました(Video & Audio、Geolocation部分を担当しました)。HTML5は巨大な上に未確定な部分が多々あります。サンプルも動作環境が限定されるものを扱ってしましたが、それでも制作の手助けになれば幸いです。
Web : http://www.openspc2.org/
太田 昌吾(おおた しょうご)
フリーのWebエンジニアで、GoogleChromeExtensionsのGoogle準公式コミュニティーの管理人。
ブラウザの拡張機能に強い関心を持ち、GoogleChrome拡張について2009年秋からgihyo.jpにて連載を始めたのをきっかけにAPIExpertに。現在はChrome拡張、JavaScriptのさらなる発展を目指して活動中。blog : http://d.hatena.ne.jp/os0x/

ダウンロード

本章で使用しているサンプルファイルを以下からダウンロードしてご利用いただけます(Windows環境の場合、ファイル解凍時にエラーが発生することがございますが使用上の問題はありません)。

  • サンプルファイルを一括でダウンロードしたい場合はこちらをご利用ください(102MB

    ※ファイルサイズが大きいためダウンロードにお時間がかかります。

    all_2927.zip

  • 4章を除くサンプルファイルを一括でダウンロードしたい場合はこちらをご利用ください(7.5MB)

  • 第2章 Canvas(774KB)

  • 第3章 SVG(49KB)

  • 第4章 Video & Audio(95MB

    ※ファイルサイズが大きいためダウンロードにお時間がかかります。

    C04_2927.zip

  • 第5章 ドラッグ&ドロップ(5MB)

  • 第6章 オフラインWebアプリケーション(1.5MB)

    読者のご指摘により、当初公開させていただいたサンプルファイルに誤り(sample3)が見つかりました。ここにお詫びするとともに修正後の新しいファイルを公開させていただきます。なお、このデータ修正に伴なう本文の訂正はありません。ご迷惑をおかけして大変申し訳ございませんが下記リンクから再ダウンロードをお願いいたします。2010/11/15

  • 第7章 WebSocket(98KB)

    書籍の増刷(第4刷)に伴い内容の修正を行いました。それによって紙面の解説、サンプルコードともに変更になっております。7章についてはそのすべてをPDFにて公開させていただくことになりました。下記リンクからダウンロードをお願いいたします。2011/7/15

  • 第8章 Web Workers(2KB)

  • 第9章 Geolocation(7KB)

  • 付録3 CSS TransitionsとAnimations(3KB)

お詫びと訂正

誤記のためにご迷惑をおかけし、誠に申し訳ございません。

  • 124ページ <video>タグの属性
    • [誤]autobuffer
    • [正]preload
    • 備考:

      自動的にバッファ (Firefox 3.xではautobuffer)

    • 【 第2刷にて修正 】
  • 127ページ COLUMN冒頭
    • [誤]Firefoxでは、
    • [正]Firefox 3.xでは、
    • 備考:

      なお、Firefox 4βではこの不具合は修正されている。

    • 【 第2刷にて修正 】
  • 257ページ NOTE
    • [誤]Firefox 3.6
    • [正]Firefox 3.6/4.0
    • 【 第2刷にて修正 】
  • 257ページ NOTE
    • [誤]iPhone 3G(S)+Safari、iPad
    • [正]iPhone 3G(S)/4+Safari、iPad
    • 【 第2刷にて修正 】
  • 280ページ some
    • [誤]var ary6 = [1,2,3].some(function(value, i, array){

      return value > 0;

      });

      var ary7 = [1,-2,3].some(function(value, i, array){

      return value > 0;

      });

      console.log(ary6, ary7);

      // true false
    • [正]var ary6 = [-1,-2,-3].some(function(value, i, array){

      return value > 0;

      });

      var ary7 = [-1, 2,-3].some(function(value, i, array){

      return value > 0;

      });

      console.log(ary6, ary7);

      // false true
  • 281ページ reduceRight
    • [誤]reduceとは逆に配列の後ろから実行する。それ以外は reduceと同様である。
    • [正]reduceとは逆に配列の後ろから実行する。それ以外は reduceと同様である。なお、配列のメソッドはlengthを持つ配列ライクなオブジェクトであればcallもしくはapplyを使っ

      て適用させることが可能だ。



      var links = document.querySelectorAll('a');

      var external_links = Array.prototype.filter.call(links,function(a){

      return a.host !== location.host;

      });
    • 備考:

      本来は「reduceRight」の説明として用いるべき文章とソースコードを、誤ってすぐ次の項目である「String.prototype.trim」内に記述してしまっていました。

       

お問い合わせ

書籍の内容に関するお問い合わせはこちら。お答えできるのは本書に記載の内容に関することに限ります。

お問い合わせフォーム