ロボシュタインで最初のフローを作ってみる¶
初期に必要な設定が完了したら、早速ロボシュタインのフローエディターを利用してみましょう。
最初は｢Hello World !!｣という文字を出力する簡単なプログラムを作っていきます。
是非、一緒に手を動かしながらロボシュタインを操作してみてください。
まずは、左のサイドメニューから「フローエディター」を選択し、画面を開いてみましょう。
そしてフローエディターの全体的な構成について、以下からご覧ください。
「フローエディターの全体構成」について
ノードの設置¶
今回のプログラムでフローを作成するにあたり、
まず、「フロー」と「ノード」について、以下から詳細をご覧ください。
今回利用するノードは以下の3つです。
injectionノード
フローを手動で動かす時に使うノードです。
templateノード
HelloWorld!の文字を変数に設定するために使うノードです。
debugノード
動いた結果(今回はHelloWorld!の文字)を画面で確認するために使うノードです。
上記のノードをフローエディター上のメイン画面にドラッグして設置してください。
次に、置いたノードをワイヤーを使って繋げます。端子のところをドラッグすることで線を延ばすことが出来ますが、
使い方の詳細については、以下からご覧ください。
「ワイヤー」について
また、操作方法は、以下の動画も参考にしてください。
ノードの配置から線の繋げ方
以上でもうほぼ完成です。
ただこのままでは｢Hello World｣は出力されませんので、最後にその設定をおこないます。
のノードをダブルクリックして、プロパティの画面を表示し、編集することができます。
ノードの編集に関しては、こちらから詳しい情報をご確認ください。
上記の画面のように｢Hello World !!｣と記載し、完了ボタンを押します。
また、操作方法は、以下の動画も参考にしてください。
｢Hello World !!｣の設定
上記の動画でもあったように、動かす前に必ず「デプロイ」をする必要があります。
デプロイについては、以下からご覧いただき、操作してください。
「デプロイ」について
デプロイが完了したら、フローを動かしてみましょう。
フローを動かしてみる¶
デプロイを押したあとは以下の動画と同じように、｢デバックウインドウの表示｣｢フローの実行｣
を行います。
｢Hello World !!｣がデバッグウインドウに現れることを確認してください。
｢Hello World !!｣の表示
デバッグウインドウに｢Hello World｣が出力される事を確認出来たと思います。
デバッグに関する詳しい情報は以下からご覧ください。
「デバッグ」について
なお、上記までのサンプルフローは以下になります。こちらをインポートして確認する事も可能です。
HelloWorldフロー
[{"id":"6b93192f.4a17c8","type":"inject","z":"93959c56.16899","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":140,"wires":[["57d5b032.67af1"]]},{"id":"32800ebb.51fad2","type":"debug","z":"93959c56.16899","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":530,"y":140,"wires":[]},{"id":"57d5b032.67af1","type":"template","z":"93959c56.16899","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Hello World !!","output":"str","x":340,"y":140,"wires":[["32800ebb.51fad2"]]}]
フローのインポートに関する情報は以下からご覧ください。
「フローのインポート」について
操作方法は、以下の動画も参考にしてください。
フローの貼り付け方法
実際の運用では、電話やSlackなど出力してお使いいただくことが多いです。
ノードを追加したり、プロパティを変更したりして、是非いろいろとお試しください。