メモ

おばかIoT選手権 2016 Summerにエントリーしていたので技術についてのメモ

Posted on by seigo

おばかIoTアプリ選手権 2016 Summerにエントリーしていたので技術についてのメモです。

結果としては惜しくも予選落選してしまったのですが、2日間のハッカソン的な製作時間の中で、技術的にはいろいろ試せたのと、前向きな反省点があったので記しておきます。

エントリーネタ

obaka_app_2016_memo_1

私の作品、おばかIoT選手権 2016 Summer「顔 de ドラゴンスレイヤー ～みんなの顔でやっつけろ～」というネタで、本アプリはドラゴンデバイスをFace API 顔認識を通じてみんなの力でやっつけるアプリです。

obaka_app_2016_memo_2

Raspberry Pi他で構成されたドラゴンデバイスの持つカメラで撮影された写真から顔認識をして、人数が多いほど攻撃回数がUP！大ダメージが狙える！ドラゴンデバイスがダメージを受けてやられる！という内容となっています。

obaka_app_2016_memo_3

エントリーの時の動画です。ドラゴンデバイスの倒されるデモを含めた動画となっています。

技術的に面白く進められたところ

Node-RED

obaka_app_2016_memo_4

今回、ドラゴンデバイスの根幹の仕組みにNode-REDを使いました。ドラゴンへのやられっぷりを表現したいし、ダメージ表示を外部デバイスで出したいというのを、いろいろ素早く試したかった。

obaka_app_2016_memo_5

随所に、MilkcocoaやlittleBits、Wio Nodeを使いました。

ダメージ表示（Wio Node＋CreateJS）

obaka_app_2016_memo_6

digitの部分はこちらはダメージを受けた際にWio NodeのDigital Displayがダメージ表示させる部分。Pin 5,9のところはドラゴンのダメージ時に首を振らせるlittleBitsへの命令部分。

obaka_app_2016_memo_7

スマホでも実況確認ができるように、CreateJSで実況表示。

obaka_app_2016_memo_9

ここはWEBカメラの撮影とFace APIへつなぐための別ローカルサーバーへ内部リクエストをかけることで、Node-REDで煩雑になりそうな難しい処理を分担しています。

Face API

AzureのFace APIのNodeJSのコードは以下のとおり。

var express = require('express');
var app = express();

var oxford = require('project-oxford'),
    client = new oxford.Client('　　　　アクセストークン　　　');

app.set('port', (process.env.PORT || 5000));
app.use(express.static(__dirname + '/public'));

app.get('/', function(request, response) {
  response.send('Hello World!');
});

app.get('/detect', function(request, response) {

  client.face.detect({
    path: 'public/sample.jpg', // capture.jpg キャプチャ先
    analyzesAge: true,
    analyzesGender: true
  }).then(function (_response) {
    //console.log('The age is: ' + response[0].attributes.age);
    //console.log('The gender is: ' + response[0].attributes.gender);

    console.log(_response)
    // Node-REDに結果を返す
    response.send(JSON.stringify(_response));
  });


});

app.listen(app.get('port'), function() {
  console.log('Node app is running on port', app.get('port'));
});

ライブラリも揃ってて便利！簡単に情報が取れてダメージ計算できて楽しかったです。

WEBカメラ

地味につらかったのが、WEBカメラが撮影するたびに応答が怪しくなるので、

memorandum USBカメラでキャプチャできなくなったときはUSBreset コマンドでリセット

の記事を参考にシェルを書きました。

capture.sh

#!/bin/sh
cd /home/pi/Desktop/obaka_app_2016/webcam
./webcamreset.sh
fswebcam -r 1920x1080 /home/pi/Desktop/obaka_app_2016/server/public/capture.jpg

リセット部分のwebcamreset.sh。

#!/bin/sh
ID='046d:0825' # Logitech, Webcam C270
MATCHES=$(lsusb | sed -n 's/Bus \([0-9]*\) Device \([0-9]*\): ID '$ID'.*/\/dev\/bus\/usb\/\1\/\2/p')
if [ -z ${MATCHES} ]; then
 echo "No match found"
else
 sudo ./usbreset $MATCHES
fi

capture.shをNode-RED側から叩いて撮影は発動させています。このあたりも気軽に作れました。

戦闘開始ボタン（Wio Node）

ドラゴンのしっぽが戦闘開始ボタンだったのですが、ここもWio Nodeのフローで反応を取っています。

obaka_app_2016_memo_10

Youtubeの動画エディタでエントリー動画

今回はエントリー自体が動画必須ということで、うまく作れるものはないかなということで、Youtubeの動画エディタを試してみました。

obaka_app_2016_memo_11

当日すぐ把握できるUIでとっつきやすく、BGMについても豊富にそろっていて、かなり助かりました。

前向きな反省点

obaka_app_2016_memo_12

2日間での制作は存分に製作できたのですが、試行錯誤の結果、ストローアームを緑の和紙でくるんで作ったドラゴン。

どうもにも、ドラゴンつくるのが楽しくなりすぎて、制作物がおばかさよりも、かわいらしさが全面に出てしまって、えらく工数を消費した反省点でした。楽しかったししょうがない。しかし、悔いなし。

obaka_app_2016_memo_13

倒すにくさが出てしまった！

おわりに

ということで収穫はいろいろありました。まず、様々な技術を試せたのとNode-REDでつなぎあわせて試行錯誤ができたことです。フロントエンドのフィードバックまでつなげられました。

また、センシングしたデータをただ貯めるだけでなく、機械学習のAPIを通して判断してフィードバックを返すという流れを試してみたかったので、そういった仕組みを作ることができ、IoTと機械学習の可能性に自分で感じることができたのも収穫でした。

今後に活かしていこうと思います！

、、、、
seigo