言語切り替え

Try to express Birthday Balloon on Twitter

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

今回やること

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

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

用意するもの

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

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

組み立て方

筐体

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

Twitterのプロフィール画面を模した画像

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

3Dプリントした部品

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

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

配線

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

obniz DCモーター
0 OUT1
1 OUT2

プログラム

風船につけた糸を巻き取るためにDCモーターを回すプログラムを書き、Google Calendarに登録された誕生日になったらIFTTTでWebhookを叩きobniz Eventとして実行させるようにします。( IFTTTでWebhookを叩いてイベントを実行させる流れは、レッスン WebhookでIFTTTとつなぐ | WebhookとタイマーとIFTTT | obniz が参考になります。)

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

次に、IFTTTでGoogle Calendarで自分のカレンダーの “誕生日” という文字列の入ったイベントの開始をトリガーとして、先ほど控えたURLにWebhookを叩くAppletを作ります。 図のように入力してください。

最後に、自分の誕生日をGoogleのイベントとして登録します。 このとき、 “誕生日” という文字列を含めてください。

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

プログラムの以下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); は、ディスプレイの大きさや風船が浮かぶスピードに合わせて適宜調節してください。

完成したプログラム