HTTP/2を覚えてサーバープッシュ型のWebアプリを作ろう
登場から10年経ちましたが，HTTP/2を使っていますか？もしかすると既に無意識のうちに使っているかもしれません．HTTP/2はHTTP/1.x以前の接続を包み込む技術なので，Webサーバー・クライアント双方が対応していれば，従来のCGIスクリプトやJavaScriptも知らぬ間にHTTP/2で通信することになります．HTTP/2環境下では通信効率が上がるため，ダウンロードの所要時間が短くなるなどの恩恵があります．
とはいえ，ちゃんとHTTP/2勉強して積極的に使いましょう．HTTP/2を積極的使うと次のようなWebアプリが作れます．
- サーバーログをリアルタイムにWeb画面に表示するアプリ
- 加速度センサーの値をリアルタイムグラフで表示させるアプリ
- SNSのようなチャットアプリ
「あれ？それってWebSocket本でやったことと同じなんじゃ？」と思う方もいらっしゃるかもしれませんが，その通りです．しかし，HTTP/2はWebSocketが抱えていたネットーク到達可能性の課題を克服できるという点でアドバンテージがあります．
本書では，主要Webサーバー（Apacheとnginx）でHTTP/2を有効化する方法の解説から，HTTP/2を積極活用してサーバープッシュ型データ通信（Server-Sent Events）を行うWebアプリの作り方を徹底解説します．解説内容をまとめると次のとおりです．
目次
- はじめに ― こんなことが可能になる
- 目次
- 1章 ハンズオン ― とにかく試せ
- 0. 今からやろうとしてること
- 1. MQTTクライアントの導入
- 2. MQTTブローカーの導入（省略可）
- 1) MQTTブローカーのインストール
- 2) Mosquittoブローカーの設定
- 3) ファイアーウォールの設定
- 99) パブリックブローカーを使う場合
- 3. Webサーバーの導入
- 4. サーバー証明書の導入
- 5. デモプログラムのダウンロード
- a. “git clone”する（お手軽）
- b. ダウンロード・展開（Gitが無い人向け）
- 6. “Hello, world!”する
- 1) MQTTブローカーを起動する
- 2) デモHTMLを開く
- 3) 接続先MQTTブローカーのアドレスを入力
- 4) サブスクライバー用のトピック名を入力
- 5) サブスクライバーを始動
- 6) ブラウザーから“Hello, world!”
- 7) ターミナルから“Hello, world!”
- 7. このハンズオンを通しての「気づき」
- 2章 レクチャー ― 仕組みを学ぶ
- 1. MQTTとは何か
- i. IoT機器向け、シンプル&軽量な通信プロトコル
- ii. Pub/Sub型データ配信モデルを採用
- iii. UNIX標準入出力とも相性がいい！
- 2. HTTP/2とは何か
- i. 従来のHTTPを通す専用トンネル
- ①HTTP/1.1までのTCPコネクション節約術
- ②HTTP/2でのTCPコネクション節約術
- ③【参考】HTTP/3のTCPコネクション節約術
- ii. プッシュ型データ送信方式（SSE）の発明
- iii. SSEはHTTP/2+TLSに取り込まれた
- 3. まとめ
- 3章 チュートリアル ― MvH2プログラミングを覚える
- 0. “MQTTwrapper”のインストール
- i. MQTTwrapperパッケージはどこにある?
- 1. ブラウザー➡UNIXホスト方向を作る
- i. サーバーサイド（CGIスクリプト）を作る
- ①初期設定とCGI変数受け取り
- ②MQTTブローカーへのパブリッシュ
- ③クライアントへのレスポンス
- ii. クライアントサイド（HTML/JavaScript）を作る
- ①HTMLによるコントロールパネルを作る
- ②JavaScriptの初期設定を書く
- ③パブリッシュを要求する関数の中身を書く
- ④パブリッシュ開始・終了関数を書く
- iii. HTML・CGIファイルを動かしてみる
- 2. UNIXホスト➡ブラウザー方向を作る
- i. サーバーサイド（CGIスクリプト）を作る
- ①初期設定とCGI変数受け取り
- ②SSEレスポンスヘッダーを返す
- ③MQTTサブスクライブとSSEフォーマットへの変換
- ④プロセス後始末のためのトリック
- ii. クライアントサイド（HTML/JavaScript）を作る
- ①HTMLによるコントロールパネルを作る
- ②JavaScriptの初期設定を書く
- ③インジケーターを変化させる関数を書く
- ④SSE（サブスクライブ）を開始する関数を書く
- ⑤SSE（サブスクライブ）を終了する関数を書く
- iii. HTML・CGIファイルを動かしてみる
- 3. まとめ
- 4章 ステップアップ ― 可能性を広げる
- 1. WebブラウザーでUNIXコマンドを使う
- i. 「多倍長電卓」デモを動かしてみる
- ii. プログラムのポイント（ログウィンドウの作り方）
- 2. 表をリアルタイムに更新する
- i. 「伝言板」デモを動かしてみる
- ii. プログラムのポイント（コマンド解釈とDOM操作）
- 3. リアルタイムグラフを描画する
- i. 「リアルタイムチャート」デモを動かしてみる
- ii. プログラムのポイント（Chart.jsの使い方）
- ①ライブラリー読み込み
- ②グラフ枠設置とグラフ形式定義
- ③データの投入（プロット）
- 4. 地図をリアルタイムに操作・描画する
- i. 「マップ・ワーム」デモを動かしてみる
- ii. プログラムのポイント（Leafletの使い方）
- ①ライブラリー読み込み
- ②地図枠設置とマップタイル他各種初期設定
- ③地図操作
- 5. Webブラウザーから位置情報を得る
- i. 「私達はどこにいる？」デモを動かしてみる
- ii. プログラムのポイント（Geolocation APIの使い方）
- 6. まとめ
- あとがき
- Rich Mikan
- もじゃ
- 奥付
書面サンプル
▲トップに戻る |
![[Powered by FreeBSD]](../_images/banner_powerlogo.gif){kind=small}
PDF版（カラー）頒布開始