Slide 1
Slide 1 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved.
株式会社 ウフル
協創推進本部
[WEBエンジニア向け]
Twitterと連携するIoTアプリケーションを
サクッと作ってみよう!
山﨑 亘
2018/06/15
Slide 2
Slide 2 text
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 懇親会
Slide 3
Slide 3 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 3
自己紹介
【前でしゃべる人】
山﨑 亘（やまざき わたる）
株式会社ウフルのenebularプロダクト マーケティング。
デベロッパー担当。ウフルには2018年3月入社｡それまでは
シリコンバレー系ITベンダーのマーケティング。
コーヒーとクラフトビールと、MINI()が好き。
Slide 4
Slide 4 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 4
enebularについて
• ｢IoTオーケストレーション サービス｣と呼ばれています
• 以下の要素で構成されています
– Node-REDベースのフローエディタ（開発環境）
– フローなどのアセットの管理
– AWS IoT、Arm Mbed Cloud、Heroku等へのデプロイ機能
– 作成したフローなどのアセットの共有機能
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 7
ハンズオン！
Slide 8
Slide 8 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 8
ハンズオンのアジェンダ
0. 作業環境を整える
1. Twitter → Slack 連携をサクッと作る
1. ベースのフローを作成してみる
2. ちょっと凝ったアウトプットにしてみる
2. TwitterからラズパイのLチカをサクッと作る
1. ベースのフローを作成してみる
2. ラズパイを簡単セットアップ（LED接続）
3. 作成したフローをラズパイにデプロイ
60分
Slide 9
Slide 9 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 9
ハンズオンのアジェンダ
0. 作業環境を整える
1. Twitter → Slack 連携をサクッと作る
1. ベースのフローを作成してみる
2. ちょっと凝ったアウトプットにしてみる
2. TwitterからラズパイのLチカをサクッと作る
1. ベースのフローを作成してみる
2. ラズパイを簡単セットアップ（LED接続）
3. 作成したフローをラズパイにデプロイ
59分
Slide 10
Slide 10 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 10
enebularのアカウント作成
クリック！
https://enebular.com/
Slide 11
Slide 11 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 11
ハンズオンのアジェンダ
0. 作業環境を整える
1. Twitter → Slack 連携をサクッと作る
1. ベースのフローを作成してみる
2. ちょっと凝ったアウトプットにしてみる
2. TwitterからラズパイのLチカをサクッと作る
1. ベースのフローを作成してみる
2. ラズパイを簡単セットアップ（LED接続）
3. 作成したフローをラズパイにデプロイ
Slide 12
Slide 12 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 12
ハンズオンのアジェンダ
0. 作業環境を整える
1. Twitter → Slack 連携をサクッと作る
1. ベースのフローを作成してみる
2. ちょっと凝ったアウトプットにしてみる
2. TwitterからラズパイのLチカをサクッと作る
1. ベースのフローを作成してみる
2. ラズパイを簡単セットアップ（LED接続）
3. 作成したフローをラズパイにデプロイ
Slide 13
Slide 13 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 13
新規にプロジェクトを作成する
クリック！
何か名前を付ける
Slide 14
Slide 14 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 14
新規フローを作成する
1) 前のステップで作った Project の名前をクリックして、Project内に
Assetを作成する
2) 右下の ⊕ ボタンを押して、flowの名前を付け、｢Continue｣を押す
+
Slide 15
Slide 15 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 15
メモ：プロジェクトとアセット
enebularでは、プロジェクト単位でアセッ
ト(フローや､InfoType､ InfoMotionなど)を
管理できます。共同作業者を設定したり、
オーナーシップを譲渡したりすることもでき
ます。
チームで作業するのに適した環境を提供して
いるがenebularのメリットです。
Project
flow
InfoMotion
flow
flow
flow
flow
flow InfoType
Assets
Slide 16
Slide 16 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 16
フローエディタを起動する
｢Edit Flow｣を押して、フローエディタを起動する
Slide 17
Slide 17 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 17
メモ：フローエディタについて
パレット ワークスペース サイドバー
Slide 18
Slide 18 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 18
Twitterノードを配置する
｢social｣にあるTwitterノードを右側に持ってきます
Slide 19
Slide 19 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 19
Twitterと連携する（認証）
Twitterノードをダブルクリックして編集する
1) Twitterアカウント
の認証を紐付ける
2) 検索するキーワード
を入力する
(“enebular” と入力)
Slide 20
Slide 20 text
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サイトで作成したもの
Slide 21
Slide 21 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 21
検索した結果をまずは見てみる（手順）
1. ｢output｣にあるdebugノードを右側に配置し、Twitter
ノードと線で結ぶ
Slide 22
Slide 22 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 22
検索した結果をまずは見てみる（デプロイ！）
Deploy（でぷろい）とは？→ 保存して実行
右上の｢Deploy｣ボタンを押す
Slide 23
Slide 23 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 23
検索した結果をまずは見てみる（結果）
Deployボタンの下の｢debug｣
タブをクリックして表示。
こんな感じ→で表示されてい
ればOK！
Slide 24
Slide 24 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 24
Slackと連携する（その1）
1. ｢social｣にあるslackノードを右側に配置し､twitterノードと線で結ぶ
2. slackノードをダブルクリックして編集する
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 26
Slackと連携する（その3）
1.｢Webhook URL｣にあるURLを
コピー
2.元のフローエディタに戻って、
｢WebHook URL｣に先ほど
コピーしたURLを貼り付ける
Slide 27
Slide 27 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 27
Slackと連携する（その3）
slackノードの編集
• Slackのサイトでコピーしたもの
• 投稿するユーザー名（任意）
• 投稿のユーザーの絵文字アイコン*
* https://www.webpagefx.com/tools/emoji-cheat-sheet/
← :enebular:
上記を入力したら、｢Done｣を押す。
Slide 28
Slide 28 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 28
結果を見る（デプロイ！）
Slackにツイートの検索結果が表示されていればOK！
右上の｢Deploy｣ボタンを押す
Slide 29
Slide 29 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 29
ハンズオンのアジェンダ
0. 作業環境を整える
1. Twitter → Slack 連携をサクッと作る
1. ベースのフローを作成してみる
2. ちょっと凝ったアウトプットにしてみる
2. TwitterからラズパイのLチカをサクッと作る
1. ベースのフローを作成してみる
2. ラズパイを簡単セットアップ（LED接続）
3. 作成したフローをラズパイにデプロイ
Slide 30
Slide 30 text
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
Slide 31
Slide 31 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 31
ハンズオンのアジェンダ
0. 作業環境を整える
1. Twitter → Slack 連携をサクッと作る
1. ベースのフローを作成してみる
2. ちょっと凝ったアウトプットにしてみる
2. TwitterからラズパイのLチカをサクッと作る
1. ベースのフローを作成してみる
2. ラズパイを簡単セットアップ（LED接続）
3. 作成したフローをラズパイにデプロイ
Slide 32
Slide 32 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 32
ハンズオンのアジェンダ
0. 作業環境を整える
1. Twitter → Slack 連携をサクッと作る
1. ベースのフローを作成してみる
2. ちょっと凝ったアウトプットにしてみる
2. TwitterからラズパイのLチカをサクッと作る
1. ベースのフローを作成してみる
2. ラズパイを簡単セットアップ（LED接続）
3. 作成したフローをラズパイにデプロイ
Slide 33
Slide 33 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 33
Twitterノードを配置する
新規にフローを作成し、先ほどと同様にtwitterノードを
追加します。
Slide 34
Slide 34 text
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ノードの設定
Slide 35
Slide 35 text
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}}
==========================
Slide 36
Slide 36 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 36
LEDをチカさせる処理を追加する
点灯と消灯の信号を送る
triggerノードを追加し、右のように値を編集
信号「1」を送って、点灯
信号「0」を送って、消灯
｢Done｣を押したら、残り2つもコピー&ペーストして作成
点灯時間を100ミリ秒に設定
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 38
デプロイ & フロー完成
Deployボタンを押してフローを完成します。
こんな感じになります。
Slide 39
Slide 39 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 39
ハンズオンのアジェンダ
0. 作業環境を整える
1. Twitter → Slack 連携をサクッと作る
1. ベースのフローを作成してみる
2. ちょっと凝ったアウトプットにしてみる
2. TwitterからラズパイのLチカをサクッと作る
1. ベースのフローを作成してみる
2. ラズパイを簡単セットアップ（LED接続）
3. 作成したフローをラズパイにデプロイ
Slide 40
Slide 40 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 40
LEDをラズパイにつなぐ
｢LED出力のノードを追加する｣で指定したピンにLEDを接続
たとえば、7-9､32-34､37-39 のペアでは、
←の図のように接続します。LEDの長いピ
ンが+側です（↓の図を参照）。
+側（GPIOピンにつなぐ）
ー側（Groundにつなぐ）
Slide 41
Slide 41 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 41
ハンズオンのアジェンダ
0. 作業環境を整える
1. Twitter → Slack 連携をサクッと作る
1. ベースのフローを作成してみる
2. ちょっと凝ったアウトプットにしてみる
2. TwitterからラズパイのLチカをサクッと作る
1. ベースのフローを作成してみる
2. ラズパイを簡単セットアップ（LED接続）
3. 作成したフローをラズパイにデプロイ
Slide 42
Slide 42 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 42
ラズパイのNode-REDにPCからアクセスする
ラズパイのNode-REDにブラウザからアクセス
https://xxxxxxxx:1880
↑ ラズパイのIPアドレス
ラズパイのNode-REDを､あらかじめメニューから起動しておきます。
Slide 43
Slide 43 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 43
enebularのフローをコピー
1. enebularのフローを（すべてのノード）を選択
2. 右上のハンバーガーメニュー
から、Export→Clipboard を
選択
3. ｢Export to clipboard｣を
押す
Slide 44
Slide 44 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 44
ラズパイのNode-REDにフローをペースト
1. ラズパイのNode-REDのウィンドウに移動
2. 右上のハンバーガーメニューから、読み込み→クリップボード
を選択
3. フローがコピーされる
4. TwitterノードのCredential（認証情報）を再度入力する
Slide 45
Slide 45 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 45
デプロイ！ デプロイ！ デプロイ！
右上の｢Deploy｣ボタンを押す
LEDが3色点滅していればOK！
Slide 46
Slide 46 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 46
終了！
お疲れさまでした！
Slide 47
Slide 47 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 47
クロージング！
Slide 48
Slide 48 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 48
今後について
次回の予定
1. 2018/07/10（火）＠ここ（株式会社ウフル）
– 今回と同内容になります
2. 2018/07/27（金）＠ここ（株式会社ウフル）
– いよいよ第2回！
日程は変更になる可能性があります。
Slide 49
Slide 49 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 49
第2回目について
考えている内容（予定）
1. AWS IoT経由でデプロイ
– 複数台数のラズパイも楽々デプロイ
2. M5Stackとか、Nefry BTとか
– LED単体よりも もう少し面白いものを･･････
3. アイディア募集中！
Slide 50
Slide 50 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 50
みなさまの発表もぜひ！
Slide 51
Slide 51 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved. 51
ぜひ参加を！
1. Slackグループ（enebular developers）
– ぜひご参加を！→ http://bit.ly/join-eneb-slack
2. Facebook / Twitterも活動予定
– アイディア募集！
3. もくもく会
– も、やりますか！
Slide 52
Slide 52 text
Copyright © 2018 Uhuru Corporation, All Rights Reserved.
株式会社ウフル 〒105-0001 東京都港区虎ノ門4-3-13 ヒューリック神谷町ビル4F
◎本資料で提供している情報および内容は将来予告なしに内容が変更される可能性があります。◎本資料のいかなる部分および一切の権利は株式会社ウフルに属しております。◎電子的または機械的な方法を問わず、いかなる目的であれ複製、または転載することを禁じます。
uhuru.co.jp