LoginSignup
11
10

More than 5 years have passed since last update.

@narikei(なりた けいすけ)

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

Last updated at Posted at 2016-02-29

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

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

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

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

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

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

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

「カオチョク」の仕組み

Artboard 1.png

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

自分が担当した部分は

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

の部分でした。

物理ボタンについて

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

Artboard 2.png
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;
    }
  }
}

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

電子工作

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

IMG_0092.JPG

『ザ・スポンジ！』

IMG_0095.JPG

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

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

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

工作

名称未設定.png

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

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

名称未設定2.png

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

フロントエンド

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

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

UXまわりについて

ハードまわり

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

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

つまり、

スライド1.jpg

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

ソフトまわり

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

Bitmap.png

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

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

もしくは

ruby
sleep 4

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

プレゼン

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

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

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

おわり

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

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

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

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

11
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
10