超簡単!Platioで入力したデータをSNSへ投稿してみよう!その1


おはようございます、こんにちは、こんばんは!
インフォテリアの吉谷です😃

本題の前に、今回Platioを始めて目にする方もいらっしゃると思いますので
簡単にご紹介します。

Platioはモバイルアプリを素早く簡単に作成出来るソリューションです。
IoTセンサーとの直接接続もでき、センサーデータの遠隔モニタリングや、
現場での入力・報告といった業務をサポートするアプリを素早く簡単に構築できます!

アプリから入力したデータはクラウドで集中管理され、APIやWebhookでの連携により、様々なデータの活用が可能です!

詳しくは公式サイトをご覧ください!
Platio公式サイト:https://plat.io

本題

さて、今回ご紹介するのは、6月のハッカソンの後に追加されたWebhook機能です。

Webhookを利用すると、Platioアプリで何かアクションが起きた時…入力、編集、削除されたタイミングで外部サービスと連携し、様々な処理をする事ができます。

例えば入力したデータをメールで送ったり、会議室の予約・取消をしたり、温度を設定して空調を制御したり…

Platioの用途がますます拡がる素敵な機能となっています😉

Platio Webhookの詳しい情報は以下のリンクからご確認ください

Platio API ドキュメント

さて、今回はこのWebhookを使って、Platioで入力したらenebularへデータを送り、twitterへ投稿する機能を作ってみましょう!

このような美味しそうなご飯画像をtwitterに簡単に送って、皆にも幸せをおすそ分けしてみようと思います!

「twitterアプリの方が簡単では?」というツッコミは機能紹介&サービス連携のお話という事でご容赦ください😅


では作成の流れです。
※ 今回はテキストをtwitterに送るサンプルになります。画像投稿は次回以降の記事で取り扱います😊
  1. Platioで簡単にモバイルアプリを作成
  2. enebularで受け取るFlowを準備
  3. PlatioでWebhookの設定をして、enebularで送信データを確認
  4. enebularのFlowを編集して完成!

なんとこれだけ!
twitter投稿機能を持つenebularを間に入れる事でスッキリ簡単に作れます😄

それでは早速やってみましょう!

1. Platioで簡単にモバイルアプリを作成

この記事では、説明をところどころ端折っています。
ですが、Platioは非常に直感的に扱えるアプリ開発サービスですので、この記事を追っていくだけでも作れると思います。
詳しい使い方を知りたい方は、是非一度過去記事をご覧ください。

好きなテンプレートを選んでミニアプリの作成開始です!
今回は「レコード管理」のテンプレートを使って作りたいと思います。


名前と写真はそのまま
複数行テキストを追加して、皆に伝えるメッセージを入れられるようにしましょう。

保存して、デプロイします。
アプリを利用するユーザーも作成します。今回は「test」というユーザーを作りました。
この画面まで進められればOKです😉

ここからスマホ、タブレットを使います。

App StoreからインストールしたPlatioアプリを起動して「QRコードをスキャン」します。

先程作った「test」ユーザーでログインして準備完了です!


2. enebularで受け取るFlowを準備

enebularのFLOW editorを起動します。

左に一覧になっている各機能のアイコン一つ一つをノードと呼びます。
必要な機能のノードを真ん中の画面にドラッグ・アンド・ドロップして配置していき、
線で繋いで流れを作ることで様々な処理を行う事ができます。

Platioから送られてくるデータは「http」ノードで受け取ります。
右側に線を出す○が付いているhttpノードをドラッグ・アンド・ドロップして置きましょう。


「http」ノードを利用する場合は終了になる「http response」ノードを置きましょう。
ちゃんとした理由がありますが、今はおまじないだと思ってください😉

受け取ったデータを処理する「function」ノードを置きます。

左側に線を繋ぐ○が付いている「twitter」ノードを置きます。

最後に「debug」ノードを置いて、流れているデータを確認出来るようにします。

全て配置するとこんな感じになりました。


ノードを置いて流れが見えたところで設定を入れて行きます。

配置した「http」ノードをダブルクリックで開きます。
Methodを「POST」に変更して、URLと名前を入力します。
URLはスラッシュから始まり、任意の文字列ですが、英数字で入力するのがおすすめです。
今回は以下の設定にしました。
Method:POST
URL:/platio-in
Name:platio-in

「debug」ノードと繋いで、情報を確認出来るようにします。
httpノードの右の○をクリックしてそのままドラッグすると線が出てきます。
それをdebugノードの左の○に持っていって離すと線が繋がります。
httpノードとhttp responseノードも同様に繋いで以下のようにします。

右上にある赤い「Deploy」ボタンを押すと作成したFlowが利用出来るようになります。


次にベースとなるURLを確認します。
Deployの左にある情報(i)のアイコンの部分にマウスを持っていくとURLが出てきます。


これが投稿先になります。(セキュリティの為、一部モザイク処理を行っています)

先程設定したhttpノードのURLと合わせて、以下のURLになります。

https://nodered-pro2-xxxxxxxx.herokuapp.com/platio-in

このURL宛にPlatioから情報を送れば良い事になります😊


3. PlatioでWebhookの設定をして、enebularで送信データを確認

PlatioでWebhookを設定してデータがくる事を確認してみましょう。

データの確認が出来るように、enebularの画面右に並んでいるタブを「debug」にしておきます。

Platio Studioのミニアプリ一覧の右上にある三本線のメニューから「外部連携の管理」を選びます。

外部連携の管理のページに飛びます。

今回作ったミニアプリの名前のリンクを押すと、Webhook設定の画面に飛びます。

中央の「+Webhookを追加」ボタンを押すと追加用のダイアログが出てきます。
名前を任意で追加し、モードは今回は「クイック」、イベントはPlatioでどんな事が起きた時に情報を送信するかを選ぶので「レコードの挿入」、最後にURLは先程enebularで作成したURLを入れます。
今回は以下のような設定にしました。

名前:Platio twitter
モード:クイック
イベント:レコードの挿入
URL:https://nodered-pro2-xxxxxxxx.herokuapp.com/platio-in

追加を押してWebhookの設定は完了です!

Platioからデータを流して確認してみましょう!
Platioを開き、右下の「+」ボタンを押して新規レコードを追加します。


とりあえず名前とメッセージを入れて、右下のチェックマークをタップして保存してみましょう。

ここでenebularを見てみると…debugにPlatioから流れてきたデータが反映されました!😆


4. enebularのFlowを編集して完成!

これでPlatioで入力したデータがenebularで受け取れるところが出来ましたね😉

このdebugに表示されている情報の中から、メッセージに当たる文字列を探してみてください。
そうしたら、それを囲っている中括弧 {} の前にある、cから始まる8桁の文字列を控えてください。

今回の場合は「c89f209d」ですね。
ある意味ここが一番難しいかもしれません!😅

次に「function」ノードをダブルクリックで開き、
受け取ったデータをtwitterの投稿データに変換する処理を書きましょう。

次の一文を書き加えるだけです! この時、「c89f209d」の部分を先程debugから探し出して控えた文字列に変えればOKです!

この辺りの仕組みが気になる方は、詳しそうな方に聞くか、私にご質問ください😃

という事で、functionノードの設定は以下のようになります。


次にtwitterの設定をします。
twitterノードをダブルクリックすると以下のダイアログが出てきます。

「Add new twitter-credentials」の横にある、ペンの描いてあるボタンをクリックすると、次の画面が出ますので、
真ん中の「Click here to authenticate with Twitter.」をクリックします。

すると新しいタブ(ブラウザによってはウィンドウ)で、Twitterとの連携の許可の確認画面が出ます。

連携アプリを認証を押してしばらくすると、以下の画面が出て認証が完了します。
この画面は閉じてしまってOKです。
enebularに戻ると、連携したアカウントのIDが入っていますね😃
「Add」を押してIDを登録し、次の画面で「OK」を押してダイアログを閉じましょう。

最後に、線を繋いだら完成です!


enebular画面右上のDeployボタンを押してFlowを反映しましょう!😉


ではいよいよPlatioからデータを送ってみます!
いざ入力して保存すると……

Twitterに投稿されました!😆


ここまででWebhookを利用する事でPlatioで入力したデータを外部のサービス(今回はenebular)に簡単に連携し、twitter投稿などの処理が出来る事がわかりました😆

もちろんEメールを送信したり、facebookやSlackに送る事も出来ますし、業務システムなどへデータを送るのも簡単です!
他にもIoT機器を動作さしたり、カレンダーに予定を登録したり、画像解析してみたり…様々なアクションを起こす事も可能です!

モバイルアプリ活用の夢が広がりますね😊


Platioはアプリを素早く作成して申請などもなくすぐに使えて、
外部サービス連携もとても簡単なので、是非ご活用ください!

30日間の無料トライアルもありますので、
まずはお気軽に試してみてください!

Platio公式サイト:https://plat.io

わからない事があればサポートしますので、ご連絡くださいね😉


さて、今回のサンプルでは文字だけを送りましたが、次回は画像も一緒にtwitter
に投稿して、皆の反応を楽しm…皆に幸せをおすそ分けしましょう!😋

と、その前に、次の投稿ではハッカソンの為にenebularから入ってきたデータをPlatioで簡単に取り扱うまとめを投稿したいと思います!

また次回もよろしくお願い致します!😉

Platioテンプレート一覧

170825_Platio_Templates.pdf

コメント

このブログの人気の投稿

LoRaWANの下り通信

遅ればせながら・・・第2回のレポート前編

enebuler X MotionBoard による、IoT リアルタイムモニタリング