標準入出力とブラウザーが繋がり、Webプログラミングは簡単になった
今どきのアプリケーションはスマートフォンを含むWeb画面をディスプレイや操作パネルにしているものが主流です．もちろん，シェルスクリプトからもCGIやAjaxといった技術を使ってWebアプリケーションを作ることは可能です．
しかし，CGI/AjaxベースのWebプログラミングには大きな弱点がありました．それは，プッシュ型のデータ送信ができないということです．つまり，刻々と変化する情報をWeb画面に表示したいと思った時，Webブラウザーの方から定期的に画面更新をかける必要がありました．
したがって，次のようなWebアプリケーションを，ましてやシェルスクリプトで作るのは困難でした．
- サーバーログをリアルタイムにWeb画面に表示するアプリ
- 加速度センサーの値をリアルタイムグラフで表示させるアプリ
- SNSのようなチャットアプリ
ところが，MQTT over WebSocketという通信方式を使うと，CGI/Ajaxの呪縛（プッシュ型データ送信ができない）から解放され，上記のようなことが簡単にできてしまうのです．
UNIX（シェルスクリプト）側は，標準入出力とやりとりするプログラムを書くだけ．そしてWebブラウザー側は，AWKコマンドのように特定パターンの文字列が到来した時に何をするかというイベント駆動なプログラムを書くだけ．……確かに，Webブラウザー側はJavaScriptで書く必要があるものの，そこをなるべく平易にできるよう解説しているのが本書です．
シェルスクリプトと，あとはせいぜい簡単なJavaScriptしか書かないという方向けに，
まで解説しています．
目次
- はじめに ― こんなことがしたかった
- 目次
- 1章 ハンズオン ― とにかく試せ
- 0. 今からやろうとしてること
- 1. MQTTクライアントの導入
- 2. MQTTブローカーの導入（省略可）
- 1) MQTTブローカーのインストール
- 2) TLS証明書アプリのインストール・設定
- Let’s Encryptのインストールと証明書ファイルの生成
- 3) Mosquittoブローカーの設定
- 4) ファイアーウォールの設定
- 99) パブリックブローカーを使う場合
- 3. ライブラリー&デモHTMLダウンロード
- a. “git clone”する（お手軽）
- b. ダウンロード・展開（Gitが無い人向け）
- ダウンロードされたパッケージ
- 4. “Hello, world!”する
- 1) MQTTブローカーを起動する
- 2) デモHTMLを開く
- 3) 接続先MQTTブローカーのアドレスを入力
- 4) MQTTブローカーに接続
- 5) サブスクライバー用のトピック名を入力
- 6) サブスクライバーを始動
- 7) ブラウザーから“Hello, world!”
- 8) ターミナルから“Hello, world!”
- 5. このハンズオンを通しての「気づき」
- 2章 レクチャー ― 仕組みを学ぶ
- 1. MQTTとは何か
- i. IoT機器向け、シンプル&軽量な通信プロトコル
- ii. Pub/Sub型データ配信モデルを採用
- iii. UNIX標準入出力とも相性がいい！
- 2. WebSocketとは何か
- i. HTTPに似せたが、非なるプロトコル
- ii. プッシュ型データ送信方式への進化
- iii. WebSocketがMQTTを飲み込んだ
- iv. Node.jsやSocket.IOの出る幕なし
- 3. まとめ
- 3章 チュートリアル ― MoWプログラミングを覚える
- 0. “MQTTwrapper”ライブラリーの登場
- i. POSIX原理主義の為のJavaScriptライブラリー？
- ii. AWKのような使い心地
- 1. MQTTwrapperライブラリーの使用準備
- i. ライブラリーファイルはどこにある?
- ii. 初期設定のためのコードを書く
- ①MQTTwrapperライブラリーのロード
- ②MQTTライブラリーラッピング成否の確認
- ③接続先URLの登録（インスタンス作成）
- ④接続&イベント関数登録
- 2. メイン処理とサンプルプログラム
- i. 利用可能なメソッドとプロパティー
- ①bConnectedプロパティー変数
- ②connect()メソッド関数
- ③disconnect()メソッド関数
- ④publish()メソッド関数
- ⑤setReceiverCallback()メソッド関数
- ⑥subscribe()メソッド関数
- ⑦unsubscribe()メソッド関数
- ii. 初期設定後に書く必要のあるコードとその例
- ①beacon.html ― MQTTビーコン
- ②indicator.html ― MQTTインジケーター
- 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. まとめ
- あとがき
- 奥付
書面サンプル
→動画デモ（MP4）
▲トップに戻る |
![[Powered by FreeBSD]](../_images/banner_powerlogo.gif){kind=small}
PDF版（カラー）頒布開始