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

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

タグ:node-red

先日、「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 はフローエディタを使った、いわゆるノーコード/ローコード開発ツールの代表的な1つです。この 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" と入力します:
2024092701


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


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


1~2分でアプリケーション(=Node-RED)が起動します。ステータスが "Ready" になったら "Test application" から "Application URL" を選択すると実際のアプリケーション(=Node-RED)にアクセスできます:
2024092705


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


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


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


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


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


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


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


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


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

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


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


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


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


例えば 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" ボタンをクリックします:
2024092812


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


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

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


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


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


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

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

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



Node-RED 環境に標準で提供されている標準ノードの1つに template ノードがあります(下図赤枠):
2024091001


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

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


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


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

そして2つ目の 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;
2024091004


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


【テンプレート内に1つの値を指定する場合】
まずはシンプルな例を紹介します。template ノードを開き、以下の内容を記入してください:
payload.value0 = {{payload.value0}}
payload.value1 = {{payload.value1}}
payload.value2 = {{payload.value2}}

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


そしてこの状態でフローをデプロイし、inject ノードをクリックしてフローを実行します。すると画面右のデバッグペインには以下のように表示されます:
payload.value0 = 0
payload.value1 = 1
payload.value2 = &lt;b&gt;2.0&lt;&#x2F;b&gt;

value1 = 1
value2 = 2.2

2024091102


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

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

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


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


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

その答がこれです。template の内容を以下のように変更します:
{{#array1}}
{{.}}
{{/array1}}

2024091105


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


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


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

その答がこれです。template の内容を以下のように変更します:
{{#array2}}
{{name}}
{{/array2}}

2024091107



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

2024091108

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


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


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


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

先日このブログでも紹介した 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" と検索すると1つだけ(!)見つかるのがそれです)。検索できたら「ノードを追加」ボタンをクリックします:
2023072001


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


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


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


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



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

2023072006


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

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


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


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


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


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


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


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

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

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



【イメージの概要】
多くのノーコード/ローコード開発環境が世に出ていますが、私の理解の中では最も広く使われている環境が 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 が1つずつ生成されたことと、サービスが 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)にアクセスしてみます:
nodered1


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



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


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


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


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

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


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


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


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


この会場をお借りし、今年は5月に開催したのを皮切りに計5回の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/19BMXUG市川IT勉強会「レースゲームを作って、鈴鹿サーキットを走ってみよう!」(*)OpenStreetMap と IBM Watson IoT サービスを使った地図ゲーム、二人協力プレイ可
12/7BMXUG 市川IT勉強会番外編 【おとなも】『スクラッチ』でゲームを作ろう!【こどもも】スクラッチを使ったおにごっこゲーム開発(コピペ一切なし)


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


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


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


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

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

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

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

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


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

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

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

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


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

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



このページのトップヘ