[WEBエンジニア向け] Twitterと連携するIoTアプリケーションをサクッと作ってみよう! / Create IoT app with enebular (1)

コードを全然書かずにサクッとIoTアプリの作成を体験してみましょう。

Twitterからキーワード検索して、Slackにメッセージを送ったり、ラズパイ（Raspberry Pi）に接続したLEDをチカらせたりする簡単なアプリを簡単に作成する手順を説明します。

Node-REDベースのIoTオーケストレーションサービス「 enebular 」を使ってみます。

Transcript

1. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 株式会社 ウフル 協創推進本部 [WEBエンジニア向け] Twitterと連携するIoTアプリケーションを サクッと作ってみよう! 山﨑 亘 2018/06/15
2. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 2 本日の内容 【ゴール】 • Twitterと連携した「IoT」アプリを「サクッと」作る – enebularを体験していただく • 今後の第一歩とする 【アジェンダ】 19:30～19:45 オープニング 19:45～20:45 ハンズオン 20:45～21:00 クロージング/アンケート 21:00～22:00 懇親会
3. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 3 自己紹介 【前でしゃべる人】 山﨑 亘（やまざき わたる） 株式会社ウフルのenebularプロダクト マーケティング。 デベロッパー担当。ウフルには2018年3月入社｡それまでは シリコンバレー系ITベンダーのマーケティング。 コーヒーとクラフトビールと、MINI()が好き。
4. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 4 enebularについて • ｢IoTオーケストレーション サービス｣と呼ばれています • 以下の要素で構成されています – Node-REDベースのフローエディタ（開発環境） – フローなどのアセットの管理 – AWS IoT、Arm Mbed Cloud、Heroku等へのデプロイ機能 – 作成したフローなどのアセットの共有機能
5. Copyright © 2018 Uhuru Corporation, All Rights Reserved. enebularとは？ enebularはIoT製品・サービスを包括的に支援する開発・運用サービスです Node-REDやINFOMOTION, AI 推論モデルなど、IoTに欠かせな いアセットのデプロイや運用管理 を一元的に行います AWS IoT 配下のデバイスへ デプロイ可能※他プラット フォームにも順次対応中 Mbed Cloud配下の デバイスへデプロイ可能 クラウド上の仮想マシンや コンテナにデプロイ可能 Unified Development オープンな開発環境 オープンな連携ポリシー １ ２ ３ HEROKU docker Amazon Web Services Arm Mbed
6. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 6 IoTオーケストレーション サービス enebularとは？ • enebular – クラウド ＋ ゲートウェイ ＋ エッジデバイス enebular- agent センサー アクチュエータ Cloud Gateway Device Edge Device  特徴1. IoTシステム開発ツール  クラウド〜エッジまでを １つのプログラミングモデルで開発可能  特徴2. IoTシステム運用サービス  膨大なIoTデバイスを管理・監視可能  特徴3. IoT開発コミュニティ  IoT開発者のためのアセット共有 enebular-edge-agent enebular-agent : ゲートウェイデバイス用エージェントソフトウェア enebular-edge-agent : エッジデバイス用エージェントソフトウェア enebular.com
7. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 7 ハンズオン！
8. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 8 ハンズオンのアジェンダ 0. 作業環境を整える 1. Twitter → Slack 連携をサクッと作る 1. ベースのフローを作成してみる 2. ちょっと凝ったアウトプットにしてみる 2. TwitterからラズパイのLチカをサクッと作る 1. ベースのフローを作成してみる 2. ラズパイを簡単セットアップ（LED接続） 3. 作成したフローをラズパイにデプロイ 60分
9. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 9 ハンズオンのアジェンダ 0. 作業環境を整える 1. Twitter → Slack 連携をサクッと作る 1. ベースのフローを作成してみる 2. ちょっと凝ったアウトプットにしてみる 2. TwitterからラズパイのLチカをサクッと作る 1. ベースのフローを作成してみる 2. ラズパイを簡単セットアップ（LED接続） 3. 作成したフローをラズパイにデプロイ 59分
10. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 10 enebularのアカウント作成 クリック！ https://enebular.com/
11. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 11 ハンズオンのアジェンダ 0. 作業環境を整える 1. Twitter → Slack 連携をサクッと作る 1. ベースのフローを作成してみる 2. ちょっと凝ったアウトプットにしてみる 2. TwitterからラズパイのLチカをサクッと作る 1. ベースのフローを作成してみる 2. ラズパイを簡単セットアップ（LED接続） 3. 作成したフローをラズパイにデプロイ
12. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 12 ハンズオンのアジェンダ 0. 作業環境を整える 1. Twitter → Slack 連携をサクッと作る 1. ベースのフローを作成してみる 2. ちょっと凝ったアウトプットにしてみる 2. TwitterからラズパイのLチカをサクッと作る 1. ベースのフローを作成してみる 2. ラズパイを簡単セットアップ（LED接続） 3. 作成したフローをラズパイにデプロイ
13. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 13 新規にプロジェクトを作成する クリック！ 何か名前を付ける
14. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 14 新規フローを作成する 1) 前のステップで作った Project の名前をクリックして、Project内に Assetを作成する 2) 右下の ⊕ ボタンを押して、flowの名前を付け、｢Continue｣を押す +
15. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 15 メモ：プロジェクトとアセット enebularでは、プロジェクト単位でアセッ ト(フローや､InfoType､ InfoMotionなど)を 管理できます。共同作業者を設定したり、 オーナーシップを譲渡したりすることもでき ます。 チームで作業するのに適した環境を提供して いるがenebularのメリットです。 Project flow InfoMotion flow flow flow flow flow InfoType Assets
16. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 16 フローエディタを起動する ｢Edit Flow｣を押して、フローエディタを起動する
17. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 17 メモ：フローエディタについて パレット ワークスペース サイドバー
18. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 18 Twitterノードを配置する ｢social｣にあるTwitterノードを右側に持ってきます
19. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 19 Twitterと連携する（認証） Twitterノードをダブルクリックして編集する 1) Twitterアカウント の認証を紐付ける 2) 検索するキーワード を入力する (“enebular” と入力)
20. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 20 Twitterと連携する（認証） apps.twitter.com でアプ リケーションを作成して、 その情報を入力し、 ｢Add｣を押す。 参考： ｢第23回「Raspberry PiからTwitterへ情 報発信！(1) Twitter API編」｣ http://deviceplus.jp/hobby/raspberrypi_entry_023/ 自分のID Twitterサイトで作成したもの Twitterサイトで作成したもの Twitterサイトで作成したもの Twitterサイトで作成したもの
21. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 21 検索した結果をまずは見てみる（手順） 1. ｢output｣にあるdebugノードを右側に配置し、Twitter ノードと線で結ぶ
22. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 22 検索した結果をまずは見てみる（デプロイ！） Deploy（でぷろい）とは？→ 保存して実行 右上の｢Deploy｣ボタンを押す
23. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 23 検索した結果をまずは見てみる（結果） Deployボタンの下の｢debug｣ タブをクリックして表示。 こんな感じ→で表示されてい ればOK！
24. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 24 Slackと連携する（その1） 1. ｢social｣にあるslackノードを右側に配置し､twitterノードと線で結ぶ 2. slackノードをダブルクリックして編集する
25. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 25 Slackと連携する（その2） 1. 右記のURLにアクセス(使用する slackのアカウントでログイン) 2. ｢チャンネルへの投稿｣で投稿す るチャネルを選択 3. ｢着信Webフック インテグレー ションの追加｣をクリック 1 2 https://slack.com/services/new/incoming-webhook
26. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 26 Slackと連携する（その3） 1.｢Webhook URL｣にあるURLを コピー 2.元のフローエディタに戻って、 ｢WebHook URL｣に先ほど コピーしたURLを貼り付ける
27. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 27 Slackと連携する（その3） slackノードの編集 • Slackのサイトでコピーしたもの • 投稿するユーザー名（任意） • 投稿のユーザーの絵文字アイコン* * https://www.webpagefx.com/tools/emoji-cheat-sheet/ ← :enebular: 上記を入力したら、｢Done｣を押す。
28. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 28 結果を見る（デプロイ！） Slackにツイートの検索結果が表示されていればOK！ 右上の｢Deploy｣ボタンを押す
29. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 29 ハンズオンのアジェンダ 0. 作業環境を整える 1. Twitter → Slack 連携をサクッと作る 1. ベースのフローを作成してみる 2. ちょっと凝ったアウトプットにしてみる 2. TwitterからラズパイのLチカをサクッと作る 1. ベースのフローを作成してみる 2. ラズパイを簡単セットアップ（LED接続） 3. 作成したフローをラズパイにデプロイ
30. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 30 (時間があれば)アウトプットを装飾する Templateノードを間に追加 ───▼ @{{tweet.user.screen_name}} ▼──── {{payload}} https://twitter.com/{{tweet.user.screen_name}}/status/{{tweet.id_str}} ─────────────────────── 【参考】ツイートのオブジェクト名: https://developer.twitter.com/en/docs/tweets/data-dictionary/overview/tweet-object
31. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 31 ハンズオンのアジェンダ 0. 作業環境を整える 1. Twitter → Slack 連携をサクッと作る 1. ベースのフローを作成してみる 2. ちょっと凝ったアウトプットにしてみる 2. TwitterからラズパイのLチカをサクッと作る 1. ベースのフローを作成してみる 2. ラズパイを簡単セットアップ（LED接続） 3. 作成したフローをラズパイにデプロイ
32. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 32 ハンズオンのアジェンダ 0. 作業環境を整える 1. Twitter → Slack 連携をサクッと作る 1. ベースのフローを作成してみる 2. ちょっと凝ったアウトプットにしてみる 2. TwitterからラズパイのLチカをサクッと作る 1. ベースのフローを作成してみる 2. ラズパイを簡単セットアップ（LED接続） 3. 作成したフローをラズパイにデプロイ
33. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 33 Twitterノードを配置する 新規にフローを作成し、先ほどと同様にtwitterノードを 追加します。
34. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 34 検索した結果にsentimentを追加し､分岐させる 1. twitterノードの後にsentimentノードを追加 2. sentimentノードの後にswitch ノードを追加し､分岐を設定 a. ｢Property｣を ｢ sentiment.score ｣に （下線部を入力） b. 分岐条件を設定 c. [+add] でさらに追加 msg. a b c switchノードの設定
35. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 35 (時間があれば)アウトプットを装飾する Templateノードを間に追加 ========================== [neutral Tweet] {{payload}} sentiment score: {{sentiment.score}} ========================== debugノードで出力を確認する際に見易いので。 ========================== [NEGATIVE Tweet] {{payload}} sentiment score: {{sentiment.score}} ========================== ========================== [POSITIVE Tweet] {{payload}} sentiment score: {{sentiment.score}} ==========================
36. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 36 LEDをチカさせる処理を追加する 点灯と消灯の信号を送る triggerノードを追加し、右のように値を編集 信号「1」を送って、点灯 信号「0」を送って、消灯 ｢Done｣を押したら、残り2つもコピー&ペーストして作成 点灯時間を100ミリ秒に設定
37. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 37 LED出力のノードを追加する 1. rpi gpioノードを追加し、編集 2. ノード編集画面にある右の図を参考に LEDの+側をつなぐピンを指定（×3）。 （たとえば、7-9､32-34､37-39のペアでは、 それぞれ 7､32､39 です） 3. ｢initialize pin state?｣をチェック （最初にLEDを消灯状態にする） Raspberry Pi 3上のGPIOピンに対応 https://www.raspberrypi.org/documentation/usage/gpio/README.md
38. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 38 デプロイ & フロー完成 Deployボタンを押してフローを完成します。 こんな感じになります。
39. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 39 ハンズオンのアジェンダ 0. 作業環境を整える 1. Twitter → Slack 連携をサクッと作る 1. ベースのフローを作成してみる 2. ちょっと凝ったアウトプットにしてみる 2. TwitterからラズパイのLチカをサクッと作る 1. ベースのフローを作成してみる 2. ラズパイを簡単セットアップ（LED接続） 3. 作成したフローをラズパイにデプロイ
40. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 40 LEDをラズパイにつなぐ ｢LED出力のノードを追加する｣で指定したピンにLEDを接続 たとえば、7-9､32-34､37-39 のペアでは、 ←の図のように接続します。LEDの長いピ ンが+側です（↓の図を参照）。 +側（GPIOピンにつなぐ） ー側（Groundにつなぐ）
41. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 41 ハンズオンのアジェンダ 0. 作業環境を整える 1. Twitter → Slack 連携をサクッと作る 1. ベースのフローを作成してみる 2. ちょっと凝ったアウトプットにしてみる 2. TwitterからラズパイのLチカをサクッと作る 1. ベースのフローを作成してみる 2. ラズパイを簡単セットアップ（LED接続） 3. 作成したフローをラズパイにデプロイ
42. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 42 ラズパイのNode-REDにPCからアクセスする ラズパイのNode-REDにブラウザからアクセス https://xxxxxxxx:1880 ↑ ラズパイのIPアドレス ラズパイのNode-REDを､あらかじめメニューから起動しておきます。
43. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 43 enebularのフローをコピー 1. enebularのフローを（すべてのノード）を選択 2. 右上のハンバーガーメニュー から、Export→Clipboard を 選択 3. ｢Export to clipboard｣を 押す
44. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 44 ラズパイのNode-REDにフローをペースト 1. ラズパイのNode-REDのウィンドウに移動 2. 右上のハンバーガーメニューから、読み込み→クリップボード を選択 3. フローがコピーされる 4. TwitterノードのCredential（認証情報）を再度入力する
45. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 45 デプロイ！ デプロイ！ デプロイ！ 右上の｢Deploy｣ボタンを押す LEDが3色点滅していればOK！
46. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 46 終了！ お疲れさまでした！
47. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 47 クロージング！
48. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 48 今後について 次回の予定 1. 2018/07/10（火）＠ここ（株式会社ウフル） – 今回と同内容になります 2. 2018/07/27（金）＠ここ（株式会社ウフル） – いよいよ第2回！ 日程は変更になる可能性があります。
49. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 49 第2回目について 考えている内容（予定） 1. AWS IoT経由でデプロイ – 複数台数のラズパイも楽々デプロイ 2. M5Stackとか、Nefry BTとか – LED単体よりも もう少し面白いものを･･････ 3. アイディア募集中！
50. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 50 みなさまの発表もぜひ！
51. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 51 ぜひ参加を！ 1. Slackグループ（enebular developers） – ぜひご参加を！→ http://bit.ly/join-eneb-slack 2. Facebook / Twitterも活動予定 – アイディア募集！ 3. もくもく会 – も、やりますか！
52. Copyright © 2018 Uhuru Corporation, All Rights Reserved. 株式会社ウフル 〒105-0001 東京都港区虎ノ門4-3-13 ヒューリック神谷町ビル4F ◎本資料で提供している情報および内容は将来予告なしに内容が変更される可能性があります。◎本資料のいかなる部分および一切の権利は株式会社ウフルに属しております。◎電子的または機械的な方法を問わず、いかなる目的であれ複製、または転載することを禁じます。 uhuru.co.jp