徹底解説 HTML5 APIガイドブック コミュニケーション系API編

概 要

HTML5でWebアプリケーション開発をするためのコミュニケーション系APIを徹底解説したAPIガイドブックです。HTML5の目玉のひとつとして注目されているWebSocketは、従来のHTTPを拡張するWebSocket Protocolを用いることで、双方向性をサポートし、通信速度の問題を改善してくれます。本書では、このWebSocketに焦点をあてて、HTML5用APIの使い方を解説。HTML5でメッセージング処理を行うための基本API「HTML5 Web Messaging」、Ajaxをより柔軟に利用できるようにする「XHR2(XML HTTP Request Level2)」、サーバーからHTTPによりPUSHされたデータを取得する「Server-Sent Events」、そして双方向通信や、高速通信を可能にする「WebSocket」について解説しています。
姉妹書の 『徹底解説HTML5 マークアップガイドブック』 『徹底解説 HTML5 APIガイドブック ビジュアル系API編』も合わせておすすめです。

著者 小松健作
価格 本体2600円(税別)
ISBN 978-4-7980-2821-7
発売日 2010/12/22
判型 B5変
色数 2色
ページ数 288
CD/DVD
対象読者 中級
シリーズ
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

第1章 HTML5コミュニケーション系API概略

1.1 Webアプリケーションの進展

プラットフォームに生まれ変わったWeb

デスクトップアプリケーションと遜色なくなったメールクライアント

マッシュアップを可能にした地図ビューワー

ライフスタイルやビジネスモデルの変革を起こしたWebアプリケーション

1.2 Ajax

任意のタイミングでの通信を可能にしたAjax

Webアプリケーション開発における通信機能の重要性

Javascriptの限界

【COLUMN】HTML5 Rocks

1.3 HTML5

HTML5が話題となる理由

本書におけるHTML5の定義

1.4 コミュニケーション系API

本書で取り上げるAPI

本書の注意点

1.5 コミュニケーション系APIのサポート状況

サポート状況は常に変化している

現時点でのサポート状況

サポート状況の調べ方(1)

サポート状況の調べ方(2)

第2章 HTML5 Web Messaging

2.1 概要

Web Messagingを構成するAPI

クロスドキュメントメッセージングの概要

チャネルメッセージングの概要

2.2 クロスドキュメントメッセージング

windowオブジェクト間通信でのクロスドメイン制約

ガジェット間でのクロスドメイン通信?クロスドキュメントメッセージング(XDM)?

2.3 API説明

MessageEventオブジェクト

postMessage

messageイベント

2.4 簡単なコード例

iframeで開かれた別ウィンドウとのメッセージのやり取り

解説(1)メッセージ送信

解説(2)メッセージ受信

解説(3)メッセージ返信

2.5 XDMを用いたガジェットのサイズ調整

iframe内のコンテンツのサイズに応じて親ウィンドウ側でサイズを調節する

解説(1)コンテンツのサイズの送信

解説(2)受信したサイズに応じたサイズ変更

2.6 XDMを用いた各ガジェットの同期処理

XDMを用いない場合

XDMを用いた場合

解説(1)親ウィンドウの動作

解説(2)子ウィンドウの動作

リアルタイムサービスでの同期の重要性

2.7 XDMを用いたマッシュアップサービス

GoogleマップとTwitterの検索結果を連動させる

親ウィンドウのコーディングサンプル

子ウィンドウのサンプル(Googleマップ)

子ウィンドウのサンプル(Twitter)

XDMによる高いモジューラビリティ

マッシュアップサービスの拡張

2.8 チャネルメッセージング

概要

メリット

簡単なチャネルメッセージングのサンプルコード

チャネルメッセージングを用いたマッシュアップサンプル

第3章 XML HTTP Request Level2

3.1 Ajaxのクロスドメイン制限

XHRの問題点

クロスドメイン制限回避?JSONP?

JSONPのセキュリティリスク

3.2 クロスドメイン通信を可能とするXHR2

XHR2の特徴

簡単なXHR2のコーディング(クライアント)

簡単なXHR2のコーディング(サーバー)

不要なリソース消費を回避するための注意点

3.3 XHR2を用いた各種HTTPメソッドの利用法

preflightのアルゴリズム

preflightを用いたコーディング例

3.4 POSTメソッドで特定のContent-typeやカスタムヘッダを用いた場合

POSTでカスタムヘッダを利用した場合のクライアントコード

カスタムヘッダによるPOST通信を認める場合のコーディング

3.5 XHR2を用いたクロスドメインでのクッキーの利用

クッキーを用いた通信の制約

Originとしてワイルドカードを利用する事は不可

3.6 CORSを用いる上での注意点

他のセキュリティチェックの機構も組み合わせる

【COLUMN】Mozilla Hacks

3.7 XHR2とDrag & Drop APIを用いたFile Upload

XHR2を用いたファイルアップロードのサンプル

サーバーサイドのコーディング

クライアントサイドのコーディング

3.8 XML HTTP Request Level2のプロパティ/メソッド

XML HTTP Request Level2のプロパティ/メソッド

3.9 CORSで用いられる応答ヘッダ

CORSで用いられる応答ヘッダ

【COLUMN】RESTful API

第4章 XHR2/Server-Sent EventsによるPUSH型通信

4.1 PUSH型通信

PULL型とPUSH型

古典的なスタイル?periodically polling?

periodically pollingのコーディング例

古典的ポーリング手法の問題

4.2 long-polling

long-polling

long-pollingのコーディング例

long-pollingの問題点

4.3 Chunked transfer coding?HTTP Streaming?

HTTP Streaming

Chunked transfer codingを用いる際の注意点

Chunked transfer codingを用いた場合のサンプルコード(サーバーサイド)

Chunked transfer codingを用いた場合のサンプルコード(クライアントサイド)

XHR2でHTTP Streamingを実装した場合の問題点

4.4 Server-Sent Events

Server-Sent Eventsを用いたコーディング例

Server-Sent Eventsで用いるフォーマット

pollingにも適用可能なServer-Sent Events

4.5 Server-Sent Eventsで規定されているフィールド名/プロパティ/メソッド

Server-Sent Eventsで規定されているフィールド名

Server-Sent Eventsのプロパティ/メソッド

第5章 WebSocket

5.1 HTTPの制約事項

Ajaxと従来のWebの違い

HTTPの制約事項

双方向通信での問題点

【COLUMN】データを頻繁に送信するWebアプリケーション

5.2 Webでソケット通信を可能にするWebSocket

WebSocketの意味

5.3 WebSocketプロトコル

ソケット通信として必要となる4つの機能

コネクションの確立

サブプロトコルの指定

データの送受信

コネクションの切断

5.4 WebSocket API

WebSocketのスキーマー

コネクションの確立とサブプロトコルの指定

データの送受信

コネクションの切断

API利用の典型的な流れ

WebSocket APIのプロパティ/メソッド

5.5 WebSocketサーバー

pywebsocketの概要

pywebsocketのインストール

はじめの一歩?エコークライアント?

エコーサーバー(echo_wsh.py)解説

pywebsocketのオブジェクトおよびメソッド詳細

5.6 簡単なサンプル(simple chat)

エコープログラムとチャットアプリケーション

クライアントコード

サーバーコード

5.7 チャットサンプルの改変

構造化データ(json)の送受信

Keep-Aliveメッセージ

プログラムの共通化

クライアントライブラリ(MyWebSocket)

改変したクライアントコード

改変したサーバーコード

【COLUMN】$.phonoブラウザからの電話

5.8 WebSocketを用いたお絵描きアプリケーション

お絵描きアプリケーションの動作原理

クライアントコード

5.9 画像/Webページ共有アプリケーション

File APIとDrag & Drop API

クライアントコード

WebSocketを用いたデータ送受信の問題点

WebSocketを用いた分割データの送受信

chunk対応を行ったWebSocketライブラリ

5.10 XHR2とWebSocketの組み合わせによるファイル共有

chunkを用いずにWebSocketでの送受信データのサイズを小さくする

【COLUMN】Device APIの検討状況

5.11 クロスドキュメントメッセージングとの組み合わせによる多重化通信

チャットと画像/URL共有アプリケーションのマッシュアップ

親ウィンドウのコード(collab_parent.html)

クライアントコード:XDMライブラリ(myxdm-0.1.js)

クライアントコード:チャット(collab_chat.html)

クライアントコード:画像/URL共有(collab_dnd.html)

【COLUMN】WebSocketは簡単?

5.12 WebSocket pipelineによるWebの高速化

HTTPによるJavascriptロードの課題

HTTPの場合のJavascript読み込みサンプル

WebSocket pipelineの場合のサンプル

第6章 node.jsとHTML5で作るリアルタイムWebの実現

6.1 イベントドリブンモデル

データの送受信の契機となるさまざまなイベント

イベントドリブンのコーディングスタイル

サーバーサイドのコーディングのベーシックなスタイル

ベーシックなスタイルの問題点

MVCフレームワーク

C10K問題

C10K問題の解決

6.2 node.js

node.jsとは

node.jsのインストール

Hello, World

6.3 node.jsによるWebサーバーの実装

Webサーバーの作成

Webサーバーの動作確認

6.4 node.jsを用いたHTTPによるサーバーPushの実装

Chunked transfer codingの実装

Chunked transfer codingの動作確認

6.5 node.jsによるWebSocketサーバーの実装(チャット)

WebSocketライブラリnode-websocket-serverの導入

WebSocketサーバーの生成

WebSocketの接続処理

受信メッセージの処理

クライアントへのメッセージ送信

切断処理

チャットアプリケーションのサンプルコード

チャットサンプルの動作確認

6.6 chatとTwitter Streaming APIを組み合わせたサンプルアプリケーション

Twitter Streaming APIとは

twitter-nodeの導入

twitter-nodeの使い方

アプリケーションのサンプルコード

アプリケーションの動作確認

巻末資料

A.1 未サポートブラウザでのWebSocketの利用

web-socket-jsとは

web-socket-jsの使い方

node.jsを用いた場合のサーバーサイドコーディング

web-socket-js使用上の注意点

A.2 用語索引

PR

秀和システム