Twitterの誕生日バルーンを再現してみた

今回やること

Twitterの誕生日にプロフィール画面で風船が飛ぶ演出を、現実世界で再現します。

Twitterから誕生日を取得するAPIが提供されていなかったため(2020年4月現在)、Google Calendarに登録された誕生日を取得しています。

用意するもの

AI Robot Kit の制作例です。(※)はAI Robot Kitに同梱されています。

• obniz Board (※)
• モバイルバッテリーなど
• DCモーター (※)
• モーターにはめるタイヤのホイール部分 (※)
• 縦向きにできるディスプレイ
• 風船 x2〜4
• 割り箸 x3
• ダンボールや紙などの工作用品
• (3Dプリンター)

組み立て方

筐体

風船や風船をしまっておく箱、Twitterのプロフィール画面を模した画像を用意します。

風船に巻き取るための糸をつけ、巻き取る装置を作ります。 巻き取る装置は、DCモータにはめ込むことのできるAI Robot Kitのタイヤのホイール部分と割り箸を使用し、さらに必要な部品を3Dプリントして作りました。

この巻き取る機構をディスプレイの後ろで固定できるようにダンボールで工作します。

これで筐体部分は完成です。こんな風に動きます。

配線

DCモーターのライブラリを参考に、表や図のようにDCモータをobniz Boardにつなぎます。OUT1とOUT2は回転の向きに合わせて適宜入れ替えてください。

obniz	DCモーター
0	OUT1
1	OUT2

プログラム

風船につけた糸を巻き取るためにDCモーターを回すプログラムを書き、Google Calendarに登録された誕生日になったらIFTTTでWebhookを叩きobniz Eventとして実行させるようにします。

まず、下の章の「完成したプログラム」の欄にあるプログラムを自分のリポジトリに保存し、それを動かすイベントを作ります。 obniz Eventを作るページで実行するWebAppでリポジトリに保存したプログラムを選択し、Endpointに表示されたURLを控えておきます。

 

次に、Google カレンダー内の「誕生日」の文字列が入ったイベントの開始をきっかけにプログラムを実行するために、IFTTT というサービスを用います。IFTTTとは、任意のWebサービス(アプリ)をきっかけに、任意のWebサービス(アプリ)を実行させるサービスです。

トップ画面の右上にあるCreateをクリックして、早速作っていきましょう。以下の画面に遷移するので、This をクリックしてServiceの中から Google Calendar を選択します。

 

Event from search starts を選択します。

 

(IFTTTでGoogle Calendarを初めて使う方は、ここでGoogleのログインを求められます。)

Which calendar? の欄で誕生日を登録するGoogle Calendarのカレンダー名を選択します。また、Keyword of phrase のところに「誕生日」と入力してください。

Create triggerをクリックして、設定を保存します。

次に、That の部分を編集します。That をクリックして、Serviceの中から Webhook を選択します。

 

Make a web request を選択します。

 

URLのところに、先ほど控えたWebhook URLを入力し、以下の設定で作成してください。

Create action をクリックすると、最終確認の画面に遷移するので、Finish をクリックして作成を終えてください。

 

最後に、自分の誕生日をGoogle Calendarのイベントとして登録します。このとき、「誕生日」という文字列を含めてください。以上で完成です。

 

誕生日になったら現実世界の風船が糸につられて、スマホ画面に見立てたディスプレイの側面に沿って飛ぶようになります。

プログラムの以下if文の部分で、Webhookを叩いた中身を判定してモーターを回してます。POSTされたBodyが先ほどIFTTTのAppletの Body(optional) のところに入力した {"birthday":true} になっているかを見ています。

if (typeof req === "object") {
  if (req.body.birthday) {
    ...
  }
}

code.js 2行目 const WINDING_TIME = 7000; と 6行目 motor.power(48); は、ディスプレイの大きさや風船が浮かぶスピードに合わせて適宜調節してください。

完成したプログラム