シェルスクリプト人類のWebSocketプログラミング UNIXコマンドからブラウザー操作自由自在 Rich Mikan 著 2023年8月13日(コミケ102) 初版発行 A5版 90ページ PDF版（カラー）頒布開始
表紙を拡大	目次を表示，→訂正情報はこちら

▲トップに戻る

標準入出力とブラウザーが繋がり、Webプログラミングは簡単になった

今どきのアプリケーションはスマートフォンを含むWeb画面をディスプレイや操作パネルにしているものが主流です．もちろん，シェルスクリプトからもCGIやAjaxといった技術を使ってWebアプリケーションを作ることは可能です．

しかし，CGI/AjaxベースのWebプログラミングには大きな弱点がありました．それは，プッシュ型のデータ送信ができないということです．つまり，刻々と変化する情報をWeb画面に表示したいと思った時，Webブラウザーの方から定期的に画面更新をかける必要がありました．

したがって，次のようなWebアプリケーションを，ましてやシェルスクリプトで作るのは困難でした．

• サーバーログをリアルタイムにWeb画面に表示するアプリ
• 加速度センサーの値をリアルタイムグラフで表示させるアプリ
• SNSのようなチャットアプリ

ところが，MQTT over WebSocketという通信方式を使うと，CGI/Ajaxの呪縛（プッシュ型データ送信ができない）から解放され，上記のようなことが簡単にできてしまうのです．

UNIX（シェルスクリプト）側は，標準入出力とやりとりするプログラムを書くだけ．そしてWebブラウザー側は，AWKコマンドのように特定パターンの文字列が到来した時に何をするかというイベント駆動なプログラムを書くだけ．……確かに，Webブラウザー側はJavaScriptで書く必要があるものの，そこをなるべく平易にできるよう解説しているのが本書です．

シェルスクリプトと，あとはせいぜい簡単なJavaScriptしか書かないという方向けに，

• グラフ描画ライブラリー“Chart.js”の使い方
• 地図描画ライブラリー“Leaflet”の使い方
• Geolocation APIを使った位置情報の読み方

まで解説しています．

目次

• はじめに ― こんなことがしたかった
• 目次
• 1章 ハンズオン ― とにかく試せ
  • 0. 今からやろうとしてること
  • 1. MQTTクライアントの導入
    • 1) インストール
    • 2) 設定
  • 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）

▲トップに戻る

購入者に漏れなく電子書籍版を配信

電子書籍での購読を希望される読者の皆様のため，購入者特典として電子書籍版のダウンロードサービスを用意します．

ダウンロードの方法（イベントで購入された方向け）

本サイトからご購入された方は，何もせずとも電子版のダウンロード案内メールが届きます（多少のタイムラグがあります）．

イベントで冊子版を購入された方にも，購入特典としてもれなくシリアルキーをメールでお知らせいたしますので，お手数ですが次の手順で申請をしてください．

1. 本書の裏表紙にある署名欄に、自筆でサインしてください．（本名はもちろん，ペンネーム等でも構いません）
2. 署名と本が写り込むように写真を撮ってください．範囲は裏表紙全体で，解像度は480*640ピクセル程度が目安でお願いします．
3. 写真をメールに添付し，本文に本名を記入し，tsuhan[at]richlab.org宛にメールをお送りください．（"[at]"は"@"に置き換えてください）

本にサインをするのを好まれない方は，写真の代わりに，ご感想・ご意見でもOK．最低140文字以上でお書きいただき，ご本名と共にtsuhan[at]richlab.org宛にお送りください．

▲トップに戻る

訂正情報が見つかり次第ここに掲載します．

▲トップに戻る

クレジット

This book is the 25th product of the Rich Laboratories.
Copyright © 2023 Matsura Rich Laboratories, All rights reserved.

▲トップに戻る