【アプリ版】 特定のユーザーがツイートしたらM5StickC の画面にメッセージを表示する

今回やること

Twitterで特定のユーザがツイートをしたら、M5StickCのディスプレイに通知が出るようにします。この記事では、obnizのアプリ（App）として作成する方法をご紹介します。

obnizのアプリは、作成したアプリを公開し、他のユーザーに配布することができます。アプリについて詳しくは ドキュメント をご覧ください。

用意するもの

• M5StickC（obnizOSを書き込んだもの）
• スマートフォン or PC
• モバイルバッテリーなど
• USB-Type-C ケーブル

obniz公式デバイスのM5StickCの販売は終了しました。

お手持ちのM5StickCにobniz OSをインストールすることもできます。→ obniz 公式サイト OS導入手順 

注）バッテリーとケーブルは、M5StickC内蔵のバッテリーを用いることで省くことができます。ただし、長時間の運用の際は外部電源からの給電をおすすめします。

組み立て方

obnizOSの入ったM5StickCを用意します。部品は何も必要ありません。

プログラム

ツイートはIFTTTを使って検知します。
IFTTTとは、様々なWebサービスやデバイス同士の連携が簡単にできるWebサービスのことです。

 

obniz Boardを登録しよう

obnizの開発者コンソールに移動し、「デバイス」 →　「デバイスを追加」をクリックします。 ダイアログが開いたら、「obniz公式デバイスを使う」をクリックします。 あとは画面の指示にしたがって登録してください。

▼

アプリを作ろう

プログラムを動かすアプリを作ります。作ったアプリは配布可能で、各デバイスにインストールして実行することができます（詳しくは アプリ – obniz Docs をご覧ください）。

---

アプリを自分で作らずにまず実行してみたい方は、作成済アプリを公開しています。以下のアプリは「プログラムを見る」よりあなたのobnizで実行できます。
→ M5StickCにツイート表示

インストール方法は、アプリのインストール – obniz Docs や次節の アプリをデバイスにインストールする をご覧ください。

---

obnizのコンソールに移動し、「アプリ開発」→「新規作成」を押します。

「M5StickCを使うテンプレート」から空のプロジェクトを選び、出てきたウィンドウにアプリ名を入力します。そして、「アプリを作成」を押しましょう。

 

アプリ設定を編集します。今回は特定のユーザーがツイートしたときにIFTTTでWenhook URLを叩いてプログラムを実行したいので、「Webhookで実行」にチェックを入れます。

 

設定を更新したら、「プログラムを編集」からプログラム編集画面に入ります。プログラム編集画面に入ったら、下の 完成したプログラム の章にあるM5StickCにツイート表示のリンク先のプログラムを貼り付けて保存しましょう。保存できたらアプリは完成です。

 

アプリをデバイスにインストールする

作成したアプリをデバイスにインストールします。コンソールのアプリ開発の画面に移動し、「インストール」を押します。

すると、インストールするデバイスを選択する画面に移動します。プログラムを動かしたいM5StickCを選択し、インストールを押します。

 

デバイス管理画面に遷移するので、「アプリを開く」の横の三角のメニューから、「Webhook URLの設定」をクリックします。

 

「Webhook URL(GET/POST)」のところを控えておきます。後ほどIFTTTとの連携の際に使います。

 

IFTTTでTwitterと連携する

ツイートをきっかけにプログラムを実行するために、IFTTT というサービスを用います。IFTTTとは、任意のWebサービス(アプリ)をきっかけに、任意のWebサービス(アプリ)を実行させるサービスです。

 

新規アプレットの作成画面です。「If This」をクリックし、Serviceの中からTwitterを選択します。

「New Tweet by specific user」を選択します。

 

トリガーにする特定のユーザーを聞かれるので、任意のユーザーIDを入力してください(@は省いてください)。

 

次に「Then That」の部分ですが、Webhooks を選択した後、「Make a web request」を選択してください。

 

以下のような入力画面が出てくるので、 “URL” を先ほど「イベントを設定する」で控えたURL、 “Method” をPOSTに、 “Content Type” をapplication/jsonに、 “body” を {"tweet":true, "content":"{{Text}}"} にしてCreate actionをクリックします。

これで連携は完了です。

 

完成したプログラム

作成済みのアプリ M5StickCにツイート表示 のプログラムをご覧ください。

 

うごかす

新しいツイートがあると、M5StickCの画面上に”New tweet!”という通知とツイート内容が表示されます。この記事のプログラムでは、改行無しのツイートのみ対応しています。

今回はBodyでツイート内容（Text）を取得しましたが、ユーザーネーム（UserName）など他の情報も取得することができます。
通知文や通知内容を変更して、好きな通知画面にしてみてください。