レコチョク ハッ歌祭で入賞しました。「カオチョク！」

チームメンバーの１人がイベント終わってすぐに振り返りの投稿をしていて偉いなーと思ったので、振り返りのポエム

「レコチョク ハッ歌祭」とは？

レコチョクハッ歌祭は、人と音楽の新しい関係をデザインする、開発者のためのお祭りです。
その名前の通りレコチョク主催のハッカソンイベントです。音楽を主題にアプリとかプロダクトをつくろう！なコンセプト
スケジュールは、火曜日夜のアイデアソン・チームビルドと、日曜日を全日使ったハッカソンの２日構成でした。
詳しくは → https://form.pasonatech.co.jp/m/recochoku/

作ったもの「カオチョク」

https://kaochoku.ozonicsky.com/ （←そのうち消します）

その人の顔で聴いてる音楽の傾向がわかるんじゃないかという発案者のアイデアを下敷きに、
「顔認証でその人の好きそうな曲をレコメンドしてくれるプロダクト」を作りました。

アプリでは１度っただけで飽きられてしまう、インパクトが薄いといった理由で
サイネージ広告にしたいと言い少し方向を変えさせてもらいました。
とは言ってもディスプレイは用意できないので、サイネージ感を生み出すために物理ボタンを作っただけ。

「カオチョク」の仕組み

基本的にはこんな感じの構成でした。
FACE++ APIで画像を送ると、登録されているユーザー画像との一致度が取得できるので、DBでひも付けているユーザーの楽曲情報を返すだけ。

自分が担当した部分は

• 物理ボタン
• フロントエンド、マークアップ
• Rails

の部分でした。

物理ボタンについて

最初はゲームセンターにあるポップンミュージックのような、大きめで無駄に触りたくなるボタンをイメージしていましたが、結構高い・・・。
http://www.sengoku.co.jp/mod/sgk_cart/detail.php?code=EEHD-4JZS
買いに行く時間も足りなかったため自作することにしました。

Arudinoをキーボードとして認識させブラウザにキーボードイベントを送ります。

ボタンが押されたらArduinoでキーボードイベントを送る

arduino

# include <Keyboard.h>

int pin = 8;
int key_enable = 1;

void setup() {
  pinMode(pin, INPUT_PULLUP);
  Keyboard.begin();
}
 
void loop() {          
  if (digitalRead(pin) == LOW) {
      key_enable = 0;
  } else {
    if (key_enable == 0) {
      Keyboard.press(32); // space key
      delay(50);
      Keyboard.releaseAll();
      key_enable = 1;
    }
  }
}

コード的に難しいことは何もない。

電子工作

前日にボタンっぽいものを百均で買ってきました。

『ザ・スポンジ！』

ブレッドボードに組んだものをホットメルトで動かないようにして、
両面テープとセロハンテープで固定するという荒業

光らせたかったけど材料と時間が足りないので諦めた

タクトスイッチが３つあるのは、バランスと触感のためで使ってない

工作

たまたま箱ごと持ってきていたスピーカーの箱の中にArduinoを隠して、外れないようにテープで固定する

裏にケーブルを通す用の穴をあけたら

まあ、なんということでしょう！

フロントエンド

HTML5のgetUserMediaでカメラから映像を取得して、
https://github.com/auduno/clmtrackr を使い人の顔があるかどうか、を判定しています。
顔を検出するとボタンがEnableになり、
ボタンを押したらその映像のフレームをbase64形式の画像で取得してFetch APIでRailsに投げて保存という流れ。

予定外だったのがHTML5のgetUserMediaがhttps環境じゃないと使えなくなっていたこと、
あってよかったLet's Encrypt、半年前だったら積むところでした。検証大事。

UXまわりについて

ハードまわり

プレゼン時のセッティングはこんな感じでした。

今回、MacBookでChromeを開けば使えるものでしか作っていないのですが、
コンセプトを伝えるためにスピーカーなどいろいろ配置しています。

つまり、

アフォーダンスや視線の誘導など、少し大げさにするために無駄に配置しました。

ソフトまわり

実際にやってみたらAPIのレスポンスが早すぎたため、解析してる感を出すために、あえて表示を待たせるようにしています。５秒間くらい解析中のアニメーションを表示させ続けました。

それに加えてボタンを押したときやシャッター音のタイミングなど色々な場所に
遅延させる処理を散りばめ、できるだけ自然に見せられるようにがんばった

javascript

setTimeout(function(){...}, 3000);

もしくは

ruby

sleep 4

アニメーションとかもう少しつけたかったけど、まったく間に合わなかった・・・

プレゼン

プレゼンターではありませんでしたが、

• トップバッターで、発表が始まる前にセッティングできた
• 直前に、作ったボタンでパワポが操作できることがわかった
• デモで２回同じ曲が表示された（その前フリと、フォローが良かった）

色々な偶然が重なった結果、思った以上になって良かったです。

おわり

実のところ、バックエンド側のつなぎ込みが終わっていなくて３曲しか準備がありませんでした。（３分の１で同じ曲）
自分もUIをマークアップしきれなかったりで、作りきれなかったのは、まあハッカソンなので仕方がないね・・・
ですが、スケジュール感がなかったのと、集中したときにまわりが見れなくなっちゃうのは考えどころ。

サイネージっぽくしたいっていうのが伝わったり、
広告の人に受け入れてもらえたりで、自分が取りたいと思っていたポイントで取れたのでその点は良かったです。

個人的には、インターンやフィジ部で教わったことを絞り出せて次に繋げられるイベントになりました。やっぱりたまには本気で遊ばないと死んでしまう。
ハッカソン制作最中に、別のサービスに派生できそうなものを思いついたので、作りたいなーと思っているところ

ということで、
チームメンバーのみなさん、運営のみなさん楽しませて頂きました！ありがとうございました！