20220224_ビジュアルプログラミングIoTLT vol.10

20220224_ビジュアルプログラミングIoTLT vol.10「デバイス動作撮影時に操作する手が足りないので Power Automate Desktop に助けてもらう」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. ビジュアルプログラミングIoTLT vol.10
   デバイス動作撮影時に操作する手が足りないの
   で Power Automate Desktop に助けてもらう
   ワンフットシーバス 田中正吾
   

   View Slide

2. 私の話はスライドを後ほど共有します。
   話す内容に注力いただいて大丈夫です！
   

   View Slide

3. 今日はビジュアルプログラミングの
   入れ子的な連携の話をします
   ビジュアルプログラミングをビジュアルプログラミングで操作する
   ビジュアルプログラミング
   ビジュアルプログラミング
   

   View Slide

4. まず、Keigan Motor を Windows で
   Node-RED からシリアルで動かしました
   実際の動きを動画で見てみましょう
   

   View Slide

5. こんなフロー
   Keigan Motor 自体はローレベル API があってルールに沿って Buffer をシリアル通信で送れば動く
   

   View Slide

6. あらためて、これを撮影してすることを考える
   

   View Slide

7. 右手と左手
   

   View Slide

8. 開発時
   Node-RED の inject ノードをポチポチ押す
   Keigan Motor Node-RED 操作
   

   View Slide

9. 撮影時
   

   View Slide

10. 撮影時
    Node-RED を操作する手が足りない！（IoTデバイス撮影あるある）
    Keigan Motor スマホ撮影
    Node-RED 操作
    

    View Slide

11. 対策はできなくはないが、大がかり
    ➔ カメラを三脚で固定して撮影ボタンをしてか
    らデモをする
    ➔ 誰かにカメラを持ってデバイスを撮影しても
    らって、操作をする
    

    View Slide

12. Node-RED を操作を Power Automate Desktop の
    マウス操作自動化にまかせてみたら良かった！
    Keigan Motor スマホ撮影
    Node-RED 操作
    Power Automate
    Desktop
    

    View Slide

13. 実際にはこんな状況
    

    View Slide

14. 動画をよく見ると、こんな風に自動化してます
    あえて、マウスの移動は目で見て分かるようにしている（一瞬で動くワープは不自然に見える）
    

    View Slide

15. こんなフローになっています
    

    View Slide

16. 最初にこの流れでブラウザをクリック
    Power Automate Desktop がブラウザよりも後ろに隠れて撮影しやすく
    

    View Slide

17. 以降は inject ノードをクリックするために
    マウス移動＋クリック＋待ち時間を繰り返し
    

    View Slide

18. マウスの移動の設定画面
    Control + Shift で今いるマウスの位置を拾える！
    これでクリックしたい inject ノードのボタンに合わせて調整出来たので、とってもやりやすかった！
    

    View Slide

19. 時間があれば、実際のデモもやってみます！
    

    View Slide

20. ビジュアルプログラミングで
    ビジュアルプログラミングを自動操作
    Node-RED inject ノードがボタンきっかけで、Power Automate Desktop のマウス自動化と相性が良かった
    Power Automate Desktop
    Node-RED
    デバイス
    

    View Slide

21. この仕組みの良いところ
    

    View Slide

22. この仕組みの良いところ
    ➔ こうやって操作してくれると一人でも撮影で
    きる幅が広がる（不可能が可能になる）
    ➔ 自動化シナリオが事前に分かるので、予測し
    て撮影アングルを作りやすい
    ➔ 撮影だけに集中するので手ブレや操作ミスが
    なくなって成功率アップ
    ➔ オンラインデモでも操作は任せてるので話に
    集中できる
    

    View Slide

23. この仕組みの派生できそうなこと
    

    View Slide

24. この仕組みの派生できそうなこと
    おもしろそう
    ➔ リアル展示のデモをループして見せるような
    ことにも使えそう
    ◆ 簡単にシナリオが変えれるのと、自動動作をデバイス内に内包しなくてよいのは素敵。
    ➔ より複雑な仕組みを撮影できるかもしれない
    ◆ デバイス A が動いて、つぎはデバイス B が動いてというような、大がかりなもの。ピタゴラ
    スイッチ的な。
    

    View Slide