タグ：node-red

2024/09/30

Watsonx.AI のチューニング済み LLM を Node-RED で使う

コメント数:
0 コメント
by dotnsf

先日、「Watsonx.AI の LLM をチューニングする」というブログを公開しました。IBM Cloud から提供されている IBM の生成 AI である WatsonX.AI の標準 LLM を、独自に与えるテキストデータによってチューニングを施した新しい LLM を作る、という内容を、その実行例を交えて紹介したものでした。

紹介した方法で作られた新しい LLM を REST API で使う方法についても紹介ページに含まれているのですが、API プログラミングが求められるとなると、まだ少しハードル高いですよね。となると、チューニング済み LLM は WatsonX.AI のプロンプトラボという機能／UIを使って使うことになる・・・　というのではあまりにも寂しいです。

そんなわけで、本日のブログエントリでは「チューニング済み WatsonX.AI LLM を Node-RED で使う」手順を紹介します。Node-RED はフローエディタを使った、いわゆるノーコード／ローコード開発ツールの代表的な１つです。この Node-RED であればプログラミングにあまり自信がない人でもデータの流れを理解していれば WatsonX.AI プログラミングができるようになる、かも、という狙いです。

【Node-RED の用意】
まず何はともあれ Node-RED 環境が必要です。既に Node-RED を使える環境がある場合はその環境を使ってください。環境がない場合はなんらかの方法で Node-RED 環境を用意する必要があります。

比較的一般的な方法は「手元のローカル PC に Node-RED をインストール」する方法です。Windows, Mac, ラズベリーパイなどに対応していて、管理者権限があればインストールすることができます：
https://nodered.jp/docs/getting-started/local

または「IBM Cloud の Code Engine を使ってインストールする」方法もあります。こちらはリソースの使い方によっては有料となってしまいますが、比較的安価にコンテナアプリケーションを実行することができる環境です。この環境で DockerHub 内の nodered/node-red を動かす、という方法です。

Code Engine を使う場合はアプリケーションの登録時に以下の設定をしてください。まず Code の種類は "Use an existing container image" を選択し、イメージ名は "nodered/node-red" と入力します：

下にスクロールします。次にこの１アプリに使うリソース量を指定します。まず CPU とストレージは最小のものでいいと思います（多いほど値段が上がります）。注意が必要なのはその下の Autoscalling 設定です。この Max 値は 1 固定でいいのですが、問題は Min 値です。ここを 1 にするとアプリケーションは（最小インスタンス数＝１、最大インスタンス数＝１になるので）１つ起動しっぱなしになります。常に稼働しているため料金はそれなりにかかりますが、常に使える状態で待機していることになります。　一方、ここを 0 にすると（最小インスタンス数＝0、最大インスタンス数＝１になるので）アクセスがない時は消え、アクセスがあるとその場で１つ動き出します。アクセスのない時間帯の料金は（０インスタンスなので）かかりませんが、アクセスから実際にアプリケーションが動き出すまでのタイムラグがあり、また一度保存した状態があっても、アクセスがなく 0 インスタンスになってしまうと、次にアクセスした時には保存状態が残りません。いつでも使える状態がいいか、アクセスしない時間のコストをセーブするのがいいか、優先順位に合わせて選んでいただきたいのですが、以下の機能を試す間だけでも 1 に設定してインスタンスが落ちないようにしておくのがいいと思いました：

そしてドメインマッピングの設定は "Public" を選択し、最後に "Create" ボタンで作成します：

１～２分でアプリケーション（＝Node-RED）が起動します。ステータスが "Ready" になったら "Test application" から "Application URL" を選択すると実際のアプリケーション（＝Node-RED）にアクセスできます：

アクセスに成功するとこんな感じの画面になり、ここから Node-RED が使えます：

ここでは２つの方法を紹介しましたが、これ以外の方法（普通にパブリッククラウドにデプロイするとか・・）でももちろん構いません。何らかの方法で Node-RED が使えるようになっているという前提で以下の説明を続けます。

【watsonx.ai ノードのインストール】
Node-RED から Watsonx.AI を使えるようにするため、用意した Node-RED に拙作の watsonx.ai ノードを追加します：

追加手順は以下です。まず Node-RED の右上のメニューから "Manage Pallete（パレットの管理）" を選択します：

パレットの管理画面が表示されます。ここで "Install" タブに切り替え、検索ボックスに "watsonx" と入力します。すると（2024-09-28 時点では他の候補は見つからないのですが） "node-red-contrib-dotnsf-watsonx" という名前の公開ノードが見つかるはずです（2024-09-30 時点では最新バージョン 0.2.3 を公開しています）。この "Install" ボタンをクリックします：

「インストールしていいか？という確認画面が表示されたら "Install" を押してください：

インストールに成功すると、このような画面が表示されます：

ダイアログをクローズして元の画面に戻ると、ノード一覧の function カテゴリ内に "watsonx.ai" と書かれたノードが追加されているはずです。これで Node-RED から比較的簡単な方法で watsonx.ai の生成 AI が使えるようになりました：
2024092806

【watsonx.ai 側のパラメータを確認】
準備の最後に、この後実際に Node-RED から Watsonx.AI を使う際にあたふたしないよう、watsonx.ai ノードに指定する各種パラメータの値をあらかじめまとめて調べておくことにします。

まず watsonx.ai ノードを左のパレット一覧から右のフロー部分にドラッグ＆ドロップし、その後ダブルクリックしてください：

すると以下のようなダイアログが表示されます。これが watsonx.ai ノードに指定するパラメータです：

これらに指定するパラメータを確認しましょう。まずは watsonx.ai のプロンプトラボ画面を表示し、そこで指定するモデルをチューニングで作成したもの（下図では "kkimura-foreign-exchange-llm-v1"）に設定します：

まず画面右の "View Code" というボタンをクリックすると、このプロンプトで実行する問い合わせを Curl で実行する時の指定内容が表示されます。この中に Location と Deployment ID の情報が含まれています：

例えば curl で指定する URL が以下のような値の場合、、

curl "https://jp-tok.ml.cloud.ibm.com/ml/v1/deployments/(deployment_id)/text/generation?version=2023-05-29"

青字の ".ml.cloud.ibm.com" の前にある文字列 "jp-tok" が Location の値です。また "deployments/" と "/text" の間にある赤字の部分にある文字列が Deployment ID です。

なお API Key は IBM Cloud ダッシュボードで作る API Key の値です。またチューニング LLM を使う場合、Project ID と Model ID はともに指定不要です（指定されたままでも構いませんが、Deployment ID が指定されている場合は無視されます）。

これらの値を先ほどのダイアログ内に指定し、最後に "Done" ボタンをクリックします：

これでパラメータの準備も完了しました。

【Node-RED から watsonx.ai のチューニング済み LLM にアクセスする】

Node-RED のフローを完成させましょう。watsonx.ai ノードの左側に inject ノードを、右側に debug ノードを配置し、これらを繋げます：

inject ノードをダブルクリックしてダイアログを開き、"msg.payload" の種類を文字列に（図で az と書かれている指定）、文字列の内容を "与えられた質問に対する答を計算して簡潔に答えてください。\\\\n\\\\n1 ドルは 144.3 円です。 10 ドルは何円ですか？" と入力して、Done をクリックします（msg.topic は使いません。×をクリックして削除しても構いません）：

ここまで準備できたら、Node-RED 画面右上の "Deploy" ボタンをクリックして、このフローをデプロイします：

そして inject ノード左のボタンをクリックすると指定した文字列が watsonx.ai ノードに渡され、Deployment ID で指定されたチューニング済み LLM で処理され、その結果が debug ノードに渡されます。debug ノードに渡った結果は画面右の debug ペイン（虫のマーク）で確認することができます：

まだチューニングが充分ではないので、期待していたような出力結果ではありませんが、Watsonx.AI のチューニング済み LLM を Node-RED からも使うことができる、ということが確認できました。

というわけで改めて、WatsonX.AI 用 Node-RED カスタムノードがチューニング済み LLM にも対応できましたので、よかったら使ってください：

タグ：: #ibm; #cloud; #watsonx.ai; #node-red

2024/09/11

Node-RED の template ノードで mastache 記法を使う

コメント数:
0 コメント
by dotnsf

Node-RED 環境に標準で提供されている標準ノードの１つに template ノードがあります（下図赤枠）：

この template ノードは次のノードへ送る msg.payload （など）の値をテンプレートをベースに、一部を変数化して生成するノードです。HTML の一部を変数化して扱いたいとか、最近だと生成 AI のプロンプトを作成する際のテンプレートとしても便利に使えるので、今後活用の機会があるかもしれません。

ところで、この template ノードの標準記法として設定されているのが mastache （「マスタッシュ」）記法というものです：

この mastache 記法でどんなことができるのか調べてみました。以下で３つの方法を紹介しますが、とりあえず以下のようなシンプルなフローを作っておきます。inject -> function -> template -> debug の各ノードを一直線につないだだけのシンプルなフローです：

このうち inject ノードは単に処理をスタートさせるためのスイッチとしてだけ使うのであまり意味はありません（このノードの左にある部分をクリックするとフローが実行されます）。また最後の debug ノードはデフォルトで msg.payload の内容を画面右側のデバッグウィンドウに出力するのですが、これもデフォルトのままで大丈夫。つまりこの２つは特に設定変更しません。

そして２つ目の function ノードをダブルクリックして編集状態にして、以下の内容を記載します：

msg = {
  payload: {
    value0: "0",
    value1: 1,
    value2: "<b>2.0</b>"
  },
  value1: 1,
  value2: 2.2,
  array1: [ 2, 3, 5, 7, 11, 13, 17, 19 ],
  array2: [
    { name: "apple" },
    { name: "orange" },
    { name: "grape" }
  ]
}
return msg;

この３つのノード（inject, function, debug）はこの後特に変更しません。　以下で mastache 記法にちうて３つの方法を紹介しますが、全て上述の内容の msg を受け取る仮定として、 template ノードのみ変更して動作を確認していきます。

【テンプレート内に１つの値を指定する場合】
まずはシンプルな例を紹介します。template ノードを開き、以下の内容を記入してください：

payload.value0 = {{payload.value0}}
payload.value1 = {{payload.value1}}
payload.value2 = {{payload.value2}}

value1 = {{value1}}
value2 = {{value2}}

そしてこの状態でフローをデプロイし、inject ノードをクリックしてフローを実行します。すると画面右のデバッグペインには以下のように表示されます：

payload.value0 = 0
payload.value1 = 1
payload.value2 = &lt;b&gt;2.0&lt;&#x2F;b&gt;

value1 = 1
value2 = 2.2

msg オブジェクトの一部が変数としてテンプレートの中を埋めて出力されていることがわかると思います。普通の変数であれば {{ と }} でメッセージ内の値を指定することで表示できそうですね。

ちょっと気になる点があるとすれば "payload.value2" の値でしょうか。そのまま HTML で使えるように一部文字がエスケープされた状態になっています。このエスケープが不要である場合は {{ と }} ではなく、 {{{ と }}} で囲うようにするだけです。試しに template の内容を以下のように書き換えてみます：

payload.value0 = {{payload.value0}}
payload.value1 = {{payload.value1}}
payload.value2 = {{{payload.value2}}}

value1 = {{value1}}
value2 = {{value2}}

そしてフローを再デプロイし、inject ノードで処理を実行すると、今度は文字列がエスケープされずにそのまま表示されます：

【テンプレート内に配列値を指定する場合】
テンプレート内に１つ１つの値を個別に直接指定する方法は上述のような方法でした。では「配列」を扱う場合、テンプレート内にどのように記述するべきでしょうか？　今回の場合だと msg.array1 が配列になっているので、これをどのように列挙するか？　というケースを考えます。

その答がこれです。template の内容を以下のように変更します：

{{#array1}}
{{.}}
{{/array1}}

この template でデプロイして inject ノードをクリックして処理が実行されると、デバッグ画面に下図のような結果（msg.array1 の配列の内容が１行ずつ表示）が出力されます：

このようにテンプレート内で {{#配列名}} と {{/配列名}} で括り、その中で {{.}} と指定すると配列内の各要素が表示されました。

【テンプレート内に JSON 配列を指定する場合】
最後にテンプレート内で「 JSON オブジェクトの配列」を扱う場合を考えます。　今回の場合だと msg.array2 が JSON 配列になっているので、これをどのように列挙するか？　というケースを考えます。

その答がこれです。template の内容を以下のように変更します：

{{#array2}}
{{name}}
{{/array2}}

この template でデプロイして inject ノードをクリックして処理が実行されると、デバッグ画面に下図のような結果（msg.array2 の JSON 配列の name 要素が１行ずつ表示）が出力されます：

2024091108

このようにテンプレート内で {{#配列名}} と {{/配列名}} で括り、その中で {{要素名}} と指定すると JSON 配列内の特定の要素を表示できました。

【まとめ】
Node-RED のテンプレートとしての template ノードはあまり使う機会がなかったのですが、うまく使うとプロンプトエンジニアリングのプロンプト作り（サンプル作り）のテンプレートに使えそうだな、という印象を受けています。この方法でサンプルを列挙するようなプロンプトを生成して、その結果を拙作の watsonxai ノード（https://flows.nodered.org/node/node-red-contrib-dotnsf-watsonxai）に渡して問い合わせする、といった使い方ができるのではないかと考えています：

mastache 記法はここで紹介した内容以外にもいろいろな記法があります。詳しくは以下のページを参照ください。とてもわかりやすく、自分の理解にも使わせていただいたページです。

【参照】
mustache記法について簡単にまとめてみた

タグ：: #mastache; #template; #nodered; #node-red

2023/07/20

IBM watsonx.ai のカスタムノードを公開しました

コメント数:
0 コメント
by dotnsf

先日このブログでも紹介した IBM watsonx.ai のベータ版 REST API を使って、Node-RED のカスタムノードを作り、公開してみました。以下で使い方を紹介しますが、実際に利用するには前回 REST API を利用する紹介をした時のブログでも作成した Watson Studuio と Watson Machine Learning を使ったプロジェクトを登録しておく必要があります（そのプロジェクトの ID が必要です）。またこれも同様に前回紹介しましたが、実行するユーザーの IBM Cloud IAM API キーを生成／取得しておく必要があるのでこちらも準備の上で試してみてください。

なお以下で紹介する内容では Node-RED v2.2.3 を使って動作確認しています。また私が提供しているものは公式のものではなく、あくまで個人的に開発したものを個人的に公開しているだけであること、現時点で提供されている REST API 自体がベータ版のため、今後近い将来の API 変更などにより動かなくなる可能性があることをご了承ください（とはいえ、私も使うので、少なくとも公式ノードが出るまではなるべくタイムリーにメンテナンスするつもりです）。

【パレットに watsonx.ai ノードを追加】
Node-RED のパレット画面を開き、右上のメニューから「パレットの管理」を選択してパレットのカスタマイズ画面に移動します。ここで「ノードを追加」タブを選び、"node-red-contrib-dotnsf-watsonxai" を検索してください（2023年7月20日時点では "watsonx" と検索すると１つだけ（！）見つかるのがそれです）。検索できたら「ノードを追加」ボタンをクリックします：

以下のような確認ダイアログが表示されるので「追加」をクリックします：

正しくインストールされると「ノードをパレットへ追加しました」というメッセージが表示されます。パレット管理画面を閉じます：

元のパレット画面に戻ると、"watsonx.ai" というノードが追加されているはずです：

【watsonx.ai ノードを使う】
では追加された watsonx.ai ノードを使ってみます。watsonx.ai ノードの前後に適当なノードを追加します。以下ではシンプルで分かりやすい代表として、inject ノードと debug ノードで挟んでみました：

watsonx.ai ノードにデータを渡すノード（上図では inject ノード）からは、msg.payload にいわゆる「プロンプト」のテキストを指定します。watsonx.ai ノードは自分に送られてきたデータの msg.payload にプロンプト指定がされている前提でそのテキスト内容に書かれた指示の返答テキストを生成します。

以下の例では msg.payload の内容を（前回のブログで紹介した内容に合わせて）以下のようにしてみました：

入力:\nAbout Watson Discovery\\nIBM Watson® Discovery is an intelligent document processing engine that helps you to gain insights from complex business documents.\n翻訳\n

入力内容が英語で書かれていて、最後に「翻訳（してね）」と指示している内容です。watsonx.ai ノードの手前のノード（inject ノード）の設定内容は以上です。

次に watsonx.ai ノード自体にも設定が必要です。watsonx.ai ノードをダブルクリックしてプロパティ設定画面を開き、API Key と Project ID をそれぞれ入力します：

このうち API Key は IBM Cloud の IAM API キーの値で、Project ID は Watson Studio と Watson Machine Learning で作成したプロジェクトの ID です。これらも前回のブログで紹介したものと同じ内容の問い合わせを行うサンプルなので、この作業について詳しくはこちらも参照してください。

全ての設定が完了したら作成したフローを「デプロイ」します：

デプロイ後に inject ノード左のボタンをクリックしてメッセージを送信すると、watsonx.ai ノードが API キー、プロジェクト ID 、そしてプロンプトテキスト内容を元に問い合わせを行い、その結果が画面右のデバッグ画面内に表示されます：

私が 2023 年7月20日に試した際の結果は "Watson Discoveryはビジネスドキュメントに関する意見を得るための知能型ドキュメント処理エンジンです。" と表示されました。上述の英語文章を翻訳してほしい、というプロンプトだったので、質問意図を正しく理解して実行できているようでした。

（いずれにせよベータ版 API を使うことになりますが）REST API を直接実行することでカスタムアプリケーションを作ることもできますが、今回紹介した Node-RED のカスタムノードを使うことで、より手軽に watsonx.ai のテキスト生成機能を体験できるようになったのではないかと思っています。

タグ：: #cloud; #ibm; #watsonx; #watsonx.ai; #nodered; #node-red

2021/08/19

「30日後に死ぬ k8s」 Day 19 : Node-RED

コメント数:
2 コメント
by dotnsf

IBM Cloud から提供されている 30 日間無料 Kubernetes サービス（IBM Kubernetes Service 、以下 "IKS"）環境を使って利用することのできるコンテナイメージを１日に１個ずつ 30 日間連続で紹介していきます。

環境のセットアップや制約事項については Day0 のこちらの記事を参照してください。

本日 Day 19 からはプログラミング・開発系コンテナとその GUI ツールを中心に紹介します。シリーズ初回となる Day 19 はローコード開発の雄 Node-RED イメージをデプロイする例を紹介します。

【イメージの概要】
多くのノーコード／ローコード開発環境が世に出ていますが、私の理解の中では最も広く使われている環境が Node-RED であると思っています。「ノード」と呼ばれるブロックを組み合わせてデータのフローを定義するだけで、その定義通りに動きだす、という視覚的にも理解しやすい GUI プログラミングを実現しています。 HTTP だけでなく MQTT や WebSocket といった多くのプロトコルにも対応していたり、自分で独自のノートを作って活用できる特徴もあって、ローコードでありながら IoT や AI といった広い分野での応用ができる点も特徴といえます。

開発元は英 IBM の Hursley 研究所で、現在は OpenJS Foundations 管理下でオープンソース化されています。

【イメージのデプロイ】
まずはこちらのファイルを自分の PC にダウンロードしてください：
https://raw.githubusercontent.com/dotnsf/yamls_for_iks/main/nodered.yaml

今回の Node-RED も特にパラメータ指定不要で、そのままデプロイすることができます。以下のコマンドを実行する前に Day 0 の内容を参照して ibmcloud CLI ツールで IBM Cloud にログインし、クラスタに接続するまでを済ませておいてください。

そして以下のコマンドを実行します：

$ kubectl apply -f nodered.yaml

以下のコマンドで Node-RED 関連の Deployment, Service, Pod, Replicaset が１つずつ生成されたことと、サービスが 30880 番ポートで公開されていることを確認します：

$ kubectl get all

NAME                           READY   STATUS    RESTARTS   AGE
pod/nodered-5fb585f656-7bdgm   1/1     Running   0          32s

NAME                 TYPE        CLUSTER-IP     EXTERNAL-IP   PORT(S)          AGE
service/kubernetes   ClusterIP   172.21.0.1     <none>        443/TCP          27d
service/nodered      NodePort    172.21.11.49   <none>        1880:30880/TCP   34s

NAME                      READY   UP-TO-DATE   AVAILABLE   AGE
deployment.apps/nodered   1/1     1            1           35s

NAME                                 DESIRED   CURRENT   READY   AGE
replicaset.apps/nodered-5fb585f656   1         1         1       36s

この後に実際にサービスを利用するため、以下のコマンドでワーカーノードのパブリック IP アドレスを確認します（以下の例であれば 161.51.204.190）：

$ ibmcloud ks worker ls --cluster=mycluster-free
OK
ID                                                       パブリック IP    プライベート IP   フレーバー   状態     状況    ゾーン   バージョン
kube-c3biujbf074rs3rl76t0-myclusterfr-default-000000df   169.51.204.190   10.144.185.144    free         normal   Ready   mil01    1.20.7_1543*

つまりこの時点で（上述の結果であれば）アプリケーションは http://169.51.204.190:30880/ で稼働している、ということになります。ウェブブラウザを使って、アプリケーションの URL（上述の方法で確認した URL）にアクセスしてみます：

上図のような画面が表示され、Node-RED の作業準備ができていることがわかります。画面左のパレットメニューからノードを配置して、実際にデプロイして動かすことができます：

【YAML ファイルの解説】
YAML ファイルはこちらを使っています：

apiVersion: v1
kind: Service
metadata:
  name: nodered
spec:
  selector:
    app: nodered
  ports:
  - port: 1880
    protocol: TCP
    targetPort: 1880
    nodePort: 30880
  type: NodePort
---
apiVersion: apps/v1
kind: Deployment
metadata:
  name: nodered
spec:
  replicas: 1
  selector:
    matchLabels:
      app: nodered
  template:
    metadata:
      labels:
        app: nodered
    spec:
      containers:
      - name: nodered
        image: nodered/node-red
        ports:
        - containerPort: 1880

Deployment １つと、Service １つ、環境変数の指定も不要で本シリーズで紹介する 30 個の中でも指折りにシンプルな YAML ファイルです。一応解説を加えておきます。アプリケーションそのものは 1880 番ポートで動作するように作られているため、NodePort 30880 番を指定して、外部からは 30880 番ポートでアクセスできるようにしています（NodePort として指定可能な番号の範囲は 30000 ～ 32767 です、指定しない場合は空いている番号がランダムに割り振られます）。また ReplicaSet は１つだけで作りました。

デプロイしたコンテナイメージを削除する場合はデプロイ時に使った YAML ファイルを再度使って、以下のコマンドを実行します。不要であれば削除しておきましょう：

$ kubectl delete -f nodered.yaml

【紹介したイメージ】
https://hub.docker.com/r/nodered/node-red

【紹介記録】

Day	カテゴリー	デプロイ内容
0	準備	準備作業
1	ウェブサーバー	hostname
2		Apache HTTP
3		Nginx
4		Tomcat
5		Websphere Liberty
6	データベース	MySQL
7		phpMyAdmin
8		PostgreSQL
9		pgAdmin4
10		MongoDB
11		Mongo-Express
12		Redis
13		RedisCommander
14		ElasticSearch
15		Kibana
16		CouchDB
17		CouchBase
18		HATOYA
19	プログラミング	Node-RED
20		Scratch
21		Eclipse Orion
22		Swagger Editor
23		R Studio
24		Jenkins
25	アプリケーション	FX
26		2048
27		DOS Box
28		VNC Server(Lubuntu)
29		Drupal
30		WordPress

タグ：: #nodered; #node-red; #ibm; #cloud; #k8s; #iks; #30days

2019/12/22

子供向けプログラミング教室での Node-RED

コメント数:
0 コメント
by dotnsf

このブログは Node-RED Advent Calendar 2019 に参加しています。12/22 ぶんとしてエントリーしています。

今年 2019 年に新たな試みとして挑戦したことの１つに「ボランティアで IT 勉強会を開催する」がありました。それまでにも社内外の技術者向けコミュニティで講演したり、参加した先のイベント内でゲリラ的に活動するなどは行っていました。ただ前提として IT 技術者を対象としていたり、そういった知識を持った人を対象とすることがほとんどでした。一方で IT や AI 、プログラミングが少しずつ世の中で広まっている実感もあって、そんな乖離について疑問とまでは言いませんが、より多くの人に広める活動はできないだろうか、と考えることはありました。そんな中で女性向けコミュニティや、以下で紹介する子供向け勉強会を開催させていただく機会がありました。その活動についての報告を兼ねてブログにまとめてみました。

【IT勉強会について】
この手の IT 勉強会を開催する上で会場の確保は１つの壁になります。加えてパソコンそのものは持ってきてもらうとして、その電源やプロジェクターの確保、無線 LAN の有無、机や椅子の用意、そして会場を借りる上でのコスト、加えて集客方法や会場を利用する上での制約事項等を総合的に考慮する必要があります。以下で紹介する勉強会では 2016 年に千葉県市川市にできたシェアスペース「にわにわ」をお借りして開催しました：

簡単に説明すると無線 LAN や電源の利用可能なレンタルスペースです。トップページを見ていただくとわかるのですが、普段から地域コミュニケーションを中心とした（IT に限らない）活動をされていて、親子向けワークショップも多く開催されています（画像はトップページより）。価格も非常にリーズナブル！：

この会場をお借りし、今年は５月に開催したのを皮切りに計５回のIT勉強会を行いました。「IT勉強会」と銘打ってますが、基本的には IBM Cloud を使った勉強会という位置づけで、IBM Cloud コミュニティのメンバーにお手伝いをいただいています。なお（＊）印がついているものは Node-RED を使ったハンズオンです：

日付	タイトル	内容
5/19	【子連れも】BMXUG市川IT勉強会「LINEでお絵描きメッセージを送ってみよう♪」【学生も歓迎】	LINE LIFF を使ったお絵描きスタンプを作る
7/13	【こどもも】BMXUG市川IT勉強会「テトリスを作ってスマホで振って遊ぼう！」【おとなも】（＊）	IBM Watson IoT サービスを使ってゲームをリモートコントロール
8/24	【こどもも】BMXUG市川IT勉強会　AI先生と外国語で会話しよう！【おとなも】	IBM Watson Translator, Speech to Text, Text to Speech を使って外国語会話レッスンアプリを作る
10/19	BMXUG市川IT勉強会「レースゲームを作って、鈴鹿サーキットを走ってみよう！」（＊）	OpenStreetMap と IBM Watson IoT サービスを使った地図ゲーム、二人協力プレイ可
12/7	BMXUG 市川IT勉強会番外編　【おとなも】『スクラッチ』でゲームを作ろう！【こどもも】	スクラッチを使ったおにごっこゲーム開発（コピペ一切なし）

つまり今年は５回の勉強会を開催して、そのうち２回で Node-RED を使いました。また全てのタイトルに【おとなも】【こどもも】と含まれているように、対象者の前提は設けていません。もともとこの会場で行われるイベントは両親がお子さんと一緒に参加されたり、お年寄りの方が参加されたりすることが多かったこともあって、その一環で参加していただけたら・・という思いもありました。結果的に「普段キーボード入力を使う機会が少ない（コピペして、すらそのままでは通じない）」ようなお子さんや大人の方に多く参加いただけたと思っています。この点では当初の目的がある程度達成できたと感じています。

なお勉強会ではないのですが、7/13 開催の内容については 7/18 に開催された Node-RED Con Tokyo 2019 の中でもレポートする形で紹介しています：
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現（＊）

※個人的にはこれら以外でも IT 関連のボランティア活動は行っていましたが、このブログでは上記イベントに限ったレポートとさせていただきます。

【勉強会で大変だったこと】
大変だったこと、というか大変なこと。結論を最初に言うと「時間との戦い」です。

参加者は「お子さんと、その親」が大半でした。ここでの「お子さん」とは、下は小学校低学年から、上は高校生がいたかなあ・・・中学生はいました、といった感じ。おそらくスマホは僕以上に使いこなせるのでしょうが、PC を普段から使っているわけではありません。ブラインドタッチなど以ての外、「コピペ」が「Ctrl+C して Ctrl+V」と理解できるわけでもありません。「選んで、右クリックして、コピーして、・・・」と教える必要があるレベルです。PC 操作には普段の勉強会やハンズオンとは比較にならないほどの時間を要します。

加えて、全ての勉強会がハンズオン形式となっていて最終的にアプリを１つ作りあげる（！）のですが、だいたい２時間弱で作れるものを用意する必要があります。時間をかければ細かい説明もできるし、作ったものを自分の好みに合わせて改良できたりもするんですが、一方で時間が長くなって「途中で飽きられちゃう」と勉強会としては致命傷です。もうPCの前に戻ってきてくれなくなります（苦笑）。コツとしては最初にアプリのデモを見せて（つまり完成形を見せて）、ある程度興味を持ってもらって、「頑張ればあのゲームができる！」と思わせて（笑）、なんとか集中力を２時間キープしてもらう、加えて神様に祈るｗ！　そして目的のアプリを最短コースで作り上げる！！　という持久走のような２時間になります（あ、でも苦痛ではなく楽しいですｗ）。

勉強会で扱うハンズオンのコンテンツはベースとなるものがあったりなかったりですが、ベースがあってもこの勉強会向けの改良を行っています。理由は「そのままでは理解できない」と思われる内容があったり、キーボード入力が多すぎて着いてこれないと思われたからです。基本プログラミングなので、プログラミングの入力は必要なのですが、その内容が多すぎると集中力が途切れてしまう懸念があります。かと言ってコピペのオンパレードだと「いま自分は何をコピペしてるのか」「そもそもこれはどの部分を作っているのか」がわからず惰性の作業になってしまう（要するに勉強会にならない）恐れもあります。一方で「ある程度プログラミングっぽいことが体験できるようにしたい」とか「苦労するから完成すると嬉しい」というユーザー体験的な観点からはやっぱりプログラミングが体験できるようにもしたくて・・・　このあたりのバランスが非常に難しいのでした。実際、今も改良を続けながらコンテンツを準備しています。

コンテンツのアイデア出しやコンテンツ作りにも時間は必要だし、２時間で一通りの解説と動作確認ができるように仕上げないといけないし、毎回が色んな意味で時間との戦いになっています。

【Node-RED を使った感想】
上述のように、５回の勉強会のうち２回で Node-RED を使ったハンズオン開発を行いました。ちなみに他の２回は Node.js （のコードを github からコピーして使用）、１回は Scratch を使いました。また Node-RED を使う場合も HTML ページを記述するテンプレートノードの内容についてだけは（時間の都合もあって）コピー＆ペーストで逃げました。今にして思えば Node.js の２回は Node-RED で作れるようにしておけばよかったと感じています。

プログラミング教育のハンズオンで Node-RED を使う場合のメリットは、なんといっても「少しずつ作りながら＆動かしながら進めていける」ことだと思っています。ノードの説明をして、それらを組み合わせて１つのフローを作っては、作ったフローを実際に動かして動作を確認する、これを繰り返すことで機能単位で少しずつ動作を確認しながら作ろうとしているものが完成体に近づいていく様子を体験できるようになります。この「少しずつ完成に近づいていく」のがプログラミングの醍醐味であり、楽しい部分でもあると思っています。

また Node.js を使う場合と比較すると、「コマンドプロンプトやターミナルからコマンドを実行する」に相当する作業がなく、開発作業に集中できるという点も大きなメリットであると感じています。プログラミングといいつつ、最終的にサーバー上で動かすため各種 Linux コマンドを使わずに進めていくのは困難なのですが、Node-RED だとそのあたりはよく作られていて Node-RED の画面内だけでアプリを開発し、サーバー上にデプロイすることまでができます。Windows / Mac の環境依存になる部分も少ないため、教える側としては非常に楽になる、といった、副作用的な効果もありました。特に今回のように教わる側の知識があまり高くない場合では大きなメリットのあるハンズオン環境といえると思います。

似たような GUI プログラミング環境として Scratch もあります。こちらははじめからウェブサービスとして提供されている点と、画面を確認しながら作れるという点で視覚的に非常にわかりやすい環境といえます。一方で外部とのデータやりとりについてはどうしても弱い点があるようにも思えます（逆にそういうやりとりが必要なければ気にすることもないと思ってます）。この外部とのデータのやりとりについては Node-RED が得意としている分野でもあるので、このあたりが今後の使い分けの基準にもなっていくんだろうなあ、と感じています。

【今後の話】
今年の５回の勉強会を経て、比較的 IT 知識のない人（普段、ワードやエクセルさえ使う機会のないレベルの人）向けの学習環境としての Node-RED の優位性を改めて感じることができました。一応、この活動は来年以降も続けるつもりでいて、２月初旬に予定している年明け一回目のコンテンツでも使う想定をしています。

ただし、来年は「Node-RED を使う前提でコンテンツを考える」のではなく、「参加者が興味を持ちそうな（エンターテイメント性のある）コンテンツを作って」＆「それを Node-RED で実現できるように改良する」という準備をしていこうと思っています。ぶっちゃけ手間がかかるといえばかかるのですが、この準備自体が自分の勉強にもなるし、そういうことが実現できる Node-RED のポテンシャルの高さを証明することにもなるのではないか、と思っています。

タグ：: #nodered; #node-red; #advent; #calendar

まだプログラマーですが何か？

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf