enebularで預貯金を管理するデータベースサーバーを構築します。データベースサーバーと言っても、金額の移動を管理するための簡単なメモみたいなものです。
1-1. enebularのフローを開く
enebularにログインしてフロー画面を開いてください。まだenebularの環境が整っていない方はこちらの手順に沿って作業を進めてください。
1-2. inject を設置する
入力カテゴリにある inject ノードをドラッグアンドドロップします。ブロックをダブルクリックしてエディタ画面を開き、トピックに 「入金」 と入力してください。最後に［完了］ボタンをクリックします。
①入力カテゴリ | inject |
③トピック | 入金 |
1-3. ランダムノードを追加する
enebularには無い機能を拡張機能として追加することができます。画面右上のメニューボタンをクリックして、［パレットの管理］をクリックします。
［ノードを追加］タブをクリックして、検索窓に rand を入力して検索します。 node-red-node-random の［ノードを追加］ボタンをクリックします。
追加ボタンが表示されるのでクリックします。追加されると機能カテゴリに追加されます。
1-4. ランダムノードを設置する
機能カテゴリにある random ノードをドラッグアンドドロップします。ブロックをダブルクリックしてエディタ画面を開き、 Fromに「1」 toに「1000」を入力します。名前に「乱数1〜1000」と入力します。
①機能カテゴリ | random |
③from | 1 |
③to | 1000 |
④Name | 乱数1〜1000 |
1-5. file ノードを設置する
預貯金データを保存するためのデータベースを設置します。ストレージカテゴリにある file ノードをドラッグアンドドロップします。2つあるので注意してください。ファイル名に bank と入力します。名前に「預貯金データベース」と入力します。
①ストレージカテゴリ | file |
③ファイル名 | bank |
④名前 | 預貯金データベース |
1-6. 各ノードをつなぐ
今まで設置した各ノードを線でつないでいきます。ノードにポッチマークがあるので、マウスで引っ張ってつなぎます。
1-7. ノードをコピーする
同じノードをもう一つ作るので、３つのノードを選択してコピー・アンド・ペーストしてください。
まずは3つのノードを選択してください。
コピーしたノードをすぐ下に貼り付けます。
コピーした各ノードの内容を一部変更します。
①injectノード | トピックを「出金」に変える |
②randomノード | 乱数の範囲を-1〜-1000に変える |
データベースに書き込んだ値を閲覧するWebページを作成しましょう。
2-1. http in ノードを設置する
入力カテゴリにある http in ノードをドラッグアンドドロップします。ブロックをダブルクリックしてエディタ画面を開き、URLに /bank と入力します。
①入力カテゴリ | http in |
②URL | /bank |
2-2. file ノードを設置する
ストレージカテゴリにある file ノードをドラッグアンドドロップします。ブロックをダブルクリックしてエディタ画面を開き、ファイル名に bank と入力します。名前は「預貯金データベース」と入力します。
①ストレージカテゴリ | file |
②ファイル名 | bank |
③名前 | 預貯金データベース |
2-3. template ノードを設置する
閲覧画面をHTMLで作成します。機能カテゴリにある template ノードをドラッグアンドドロップします。ブロックをダブルクリックしてエディタ画面を開き、構文は HTML に変更して、テンプレート部分に下記コードをコピペしてください。
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<title>BANK</title>
</head>
<body>
<div id="label-container"><pre>{{payload}}</pre></div>
</body>
</html>
2-4. http response ノードを設置する
出力カテゴリにある http response ノードをドラッグアンドドロップします。このノードは何も設定しません。
2-5.デプロイする
各ノードを線でつないで、画面右上にある［デプロイ］ボタンをクリックします。
2-6. 預貯金データベースにデータを入れる
預貯金データベースにランダムな値を入れていきます。入金、出金のノードにあるボタンを何度かクリックしてみましょう。
2-7. 閲覧ページにアクセスする
画面右上の「i」マークにマウスカーソルをあわせてみてください。アクセスURLが表示されるので、クリックします。
URLの末尾に /bank を入力して再度ページを更新すると数字が表示されます。
3-1. WinActorを起動する
インストールしたWinActorを起動してください。
3-2. 変数を追加する
シナリオで使用する変数を追加します。変数一覧ウィンドウの［＋］をクリックして下記の変数を追加してください。 name の初期値は chrome と入れておいてください。
グループ名 | 変数名 | 初期値 |
グループ名なし | name | chrome |
– | val | – |
– | 金額 | 0 |
– | wk | – |
グループ名: stat | ブロック数 | – |
– | 選択有無 | – |
– | カーソル位置 | – |
– | MARK | – |
– | EMPTY | – |
– | TOP | – |
– | EOT | – |
3-3. ブラウザ起動
ライブラリタブをクリックして、「23_ブラウザ関連 - ブラウザ起動.ums6」を探してください。それを右側のエディタ画面にドラッグアンドドロップします。ブロックをダブルクリックしてプロパティ画面を表示します。
ブラウザ名に先程設定した変数名の name をプルダウンメニューから選択します。ブラウザの種類は chrome を選択してください。
3-4. ページ表示
「23_ブラウザ関連 - ページ表示.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。
ブラウザ名 | name |
URL 値⇒ | enebularで開いたURLを指定する |
3-5. 値の取得
「23_ブラウザ関連 - 値の取得.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。ブラウザ名、XPathと取得した値を格納する変数名を指定します。
ブラウザ名 | name |
XPath 値=> | //*[@id="label-container"]/pre |
値を格納する変数 | val |
3-6. クリップボードへ値を設定
ノードタブにある、「アクション - クリップボード」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。値が格納されている val 値をクリップボードに設定します。
クリップボードへ値を設定 | val |
3-7. 動作モード変更
ライブラリタブにある、「25_WinActorノート - 動作モード変更.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。動作モードを編集にしてWinActorノートが編集できる状態にします。
動作モード | 編集 |
3-8. クリップボードから読み込み
「25_WinActorノート - クリップボードから読み込み.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。クリップボードから値を読み込んできて、WinActorノートに反映させます。
操作 | 新規テキストとして追加 |
3-9. 状態読み取り
「25_WinActorノート - 状態読み取り.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。WinActorの現在の状態を変数に格納します。プルダウンメニューで該当変数を選択してください。
3-10. グループ化する
これまでに作成したものをグループ化しておきます。グループ化することでどういう処理が行われているかがひと目でわかります。グループ名も入力できるので、後で見返したときにわかりやすいメリットがあります。
グループ化したものをシナリオに連結しましょう。出来上がったグループを左側のシナリオ部分にドラッグアンドドロップします。
3-11. 繰り返し処理を設置する
預貯金額を算出するためWinActorノートの繰り返し処理を実装していきます。ノードタブをクリックして、「フロー - 繰り返し」をドラッグアンドドロップします。「繰り返し」部分をダブルクリックして、プロパティ画面を表示します。「回数」のラジオボタンを選択して、「ブロック数」という変数名をプルダウンメニューから選択します。
3-12. WinActorノート操作処理を実装する
ライブラリタブをクリックして「25_WinActorノート - ブロック番号指定ツール.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。WinActorノートに記載されている1行目を選択するという処理を行います。
ブロック番号 値⇒ | 1 |
操作方法 | を選択 |
「25_WinActorノート - ブロック抽出ツール.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。選択されているブロックをコピーする処理を行います。
対象 | 選択されているブロック |
操作方法 | をコピー |
ノードタブをクリックして、「アクション - クリップボード」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。WinActorノートでコピーした値をクリップボードから変数に格納しています。
選択するラジオボタン | クリップボードの値を取得 |
取得結果 | wk |
「変数 - 四則演算」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。金額変数にwkの値をどんどん加算していく処理をしています。
プロパティ | 金額 = 金額 + wk |
ライブラリタブをクリックして「25_WinActorノート - ブロック抽出ツール.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。WinActorノート選択されているブロックを削除する処理を行います。
対象 | 選択されているブロック |
操作方法 | を削除 |
繰り返しグループをシナリオにドラッグアンドドロップして結合します。
3-13. 数値の書式変換
「07_文字列操作 - 04_数値に関する変換 - 数値の書式変換.ums6」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。この手順は特にしなくても良いのですが、数値のフォーマットを変更してカンマ区切りにします。
変換前数値 | 金額 |
小数点以下の桁数 値⇒ | 0 |
ゼロ表示有無 | 無し |
区切り文字有無 | 有り |
変換後数値 | 金額 |
3-14. 待機ボックスを設置する
ノードタブをクリックして、「ユーザー - 待機ボックス」をドラッグアンドドロップします。ブロックをダブルクリックして、下記設定を行います。計算結果をポップアップ表示します。
選択するラジオボタン | 確認待ち（OKボタンのみを表示） |
メッセージ | 貯金額は %金額% 円 |
3-20. 動作確認する
WinActorの再生ボタンをクリックします。ロボが起動してシナリオを実行していきます。
計算結果が表示されます。
まとめ
enebularとWinActorを連携することができました。WinActorノートは2019年に出たばかりの機能なので、様々な応用に使えます。是非活用してみてください。
完成版シナリオファイル
どうしてもうまくいかない方は、下記からシナリオファイルをダウンロードしてみてください。
url はご自身の環境を入れてください。
