はじめに

ハンズオンの時に参加者の反応を見るため、@1ft_seabass さん作、オンラインで参加者のリアクションを集めるツールをGitpodで使えるようにしてみました。
GitpodはWorkspaceを作成する度にURLが変わりますので、TERMINALにアクセス先URLをQRコードで表示して、スマートフォンなどからアクセスしやすく改良しました。

オリジナルのツール

オリジナルのツールはenebularのサービスを利用しています。

enebularは利用時間の制限(1時間)がありますので、長めのハンズオンの時は途中でカウンタがリセットされてしまうため、不便な場合があります。また、起動する度にHerokuのURLが変わるため、アクセス先URLをQRコードへ変換する手間が必要でした。

Gitpodへの移植

enebularからNode-REDのフローをダウンロードします。ダウンロードしたフローはGithubのレポジトリへ保存(登録)します。

Gitpodの設定は.gitpod.ymlファイルで行います。設定方法はGitpodのドキュメントを参照します。

.gitpod.ymlファイルの作成

ドキュメントに記載されているサンプルを参考にして、tasksとportsを設定します。

.gitpod.yml

# Command to start on workspace startup (optional)
tasks:
#  - init: "npm install -g npm"
  - command: "cd && npm install -g --unsafe-perm node-red node-red-dashboard && mkdir .node-red && ln -s /workspace/nodered-online-reaction-app/flow.json ./.node-red/ && node-red flow.json"
    name: Node-RED
  - openMode: split-right
    command: "cd && npm install -g qrcode-terminal && echo $GITPOD_WORKSPACE_URL | awk -F// '{print $1 \"//1880-\" $2 \"/ui\"}' | qrcode-terminal"
    name: QR Code
# Ports to expose on workspace startup (optional)
ports:
  - port: 1880
    onOpen: open-preview

tasks

TERMINALを2つに分けて、Node-REDのインストール・起動とQRコードの表示を並列で実行します。

Node-REDのインストール・起動

オンラインで参加者のリアクションを集めるツールはnode-red-dashboardノードを使用しているため、Node-REDと合わせてnode-red-dashboardモジュールのインストールを行います。

flow.jsonを所定の(ホームディレクトリ配下の.node-red)ディレクトリへ配置して、Node-REDを起動します。

QRコードの表示

TERMINAL(コンソール)画面にQRコードを表示するツールはqrcode-terminalを使用しました。

ports

Node-REDはポート番号:1880で起動しますので、portに1880を指定します。また、フローをプレビュー表示するため、onOpenにopen-previewを指定します。

さいごに

ハンズオンの時は準備で忙しいので、少しでも手間が減ると助かります。
みなさまも良き Gitpod & Node-RED ライフを！

オンラインで参加者のリアクションを集めるツールをGitpodで使えるようにしてみた