MashupAwads2016 沖縄予選に参加したよ

# はじめに

MashupAwards2016とは・・・
> 日本最大級の開発コンテストMashupAwardsの一次予選免除の権利をかけたハッカソンイベントです。MA2016は賞金総額約500万円！！賞もたくさんあるよ。

賞金総額500万円ですよ:exclamation: :exclamation: 
という金額に魅かれるところもありますが

**いろいろなモノづくりを楽しめる滅多にない機会！！**

**「会社・学校を超えて知らない人とアイディアを練って、チームづくりをして、モノを作る」**それが醍醐味です :smile: 

イベント様子詳細はこちらから[Togetter](http://togetter.com/li/1032086)


# 紹介すること :bulb: 

今回参加して実際に作成したモノの技術を紹介します

MashupAwards2016 沖縄予選にて実際に作成・紹介した「MESH振る（メッシブルと読む）」を作成しました。
名称はメッシ（サッカーで有名なメッシ＋MESHの掛け合わせ）と振る（Move）を合わせた造語ですw

### イベント説明 :speech_balloon: 

> 審査基準だよ。
> ビジネス性や事業性は関係ないのが特徴です。

![審査基準](https://pbs.twimg.com/media/CtpQrLOVUAA07EH.jpg)

# 提供API
- API一覧
    - [Microsoft Cognitive Services](https://blogs.msdn.microsoft.com/bluesky/2016/05/06/microsoft-cognitive-services-api-overview/)
        - Emotion API / Computer Vision API
        - Speech API など21種類（2016/10/3現在）
    - [Twilio API](https://jp.twilio.com/docs/api)
        - Tel
        - SMS
        - カンファレンス機能など多数
    - [ぐるなびAPI](http://api.gnavi.co.jp/api/manual/)
        - レストラン検索API
        - 店舗情報検索など多数


- ガジェット :nut_and_bolt: 
    - [MESH](http://meshprj.com/jp/)
    - [myThingsセット](https://www.switch-science.com/catalog/2366/)
    - [HVCC](http://plus-sensing.omron.co.jp/egg-project/product/hvc-c1b/)
    - [LittleBits](http://jp.littlebits.com/)
    - [webmio](http://webmo.io/)

# Hack1日目 :computer: 

既にMESHは使いたい！というのは決まっていたので、案だけはいくつか候補をあげていました。

Hackタイムが始まる前にアイスブレイク/インプットタイムで更に案をブラッシュアップ。チームも4名になりました。

チーム名：**突貫boys**

内容は以下のとおり

```
・MESH(MOVE)を交通安全お守りに入れ、車に吸盤でくっつけて揺れ幅を検知
・揺れ幅により、Slack通知・Twilioでの連絡を取り入れる
```
![MESH.png](https://qiita-image-store.s3.amazonaws.com/0/93976/7c834c2b-3a8b-4f0b-a94e-5a159dc9a6f5.png)


まずMESHを利用するためにはiPhoneにてMESHとペアリング・動作させるためのアプリをインストールする必要があります。

[iPhone MESH](https://itunes.apple.com/jp/app/mesh-creative-diy-toolkit/id981090691?&mt=8)

MESHAppでは簡単にアプリを作ることができます。例えば「音声を検知したら写真を撮影する」

![mesh_app1.png](https://qiita-image-store.s3.amazonaws.com/0/93976/b84f9823-6516-3f71-57b2-e1a651a2914e.png)

**MESHとslackを実際に使った場合**

![mesh_app02.png](https://qiita-image-store.s3.amazonaws.com/0/93976/1ab71536-5f6d-7978-6209-e5b291293029.png)

* **注意**

MESHのタグにはSlack通知が無いので[MESH SDK](https://meshprj.com/sdk/)と呼ばれる管理画面からJavascriptでWEBからの作成が必要となります。

```javascript:SlackNotify
//The endpoint URL of Remote API
var endPointURL = 'http://__ORIGINAL_API__/slack_notify';
 
var alert = properties.myProp;

var data = {
	"msg":alert,
	"apiToken":'xxxxxxxxxxxx',
	"channel":'#general',
}

//Puts the camera into "Shooting mode"
ajax ({
    url : endPointURL,
    type : "post",
    data : data,
    dataType : "json",
    timeout : 5000,
	error : function ( request, errorMessage ) {
        log("SlackAPI : Network error");
        callbackSuccess( {
            resultType : "continue"
        } );
    }
});
 
return {
    resultType : "pause"
};
```

API側は自前でよしなに作ってやればSlackに通知が行きますよー。

API実装にはMicrosoftAzureからUbuntu16.04を起動し、Nginx + Ruby on Railsで簡単に構築しますた。

**Azureは無償サブスクリプション利用いたしました。MS様ありがとうございます** :smile: 

# Hack2日目 :computer: :sweat_drops: 


全体的なハッカソンとしての機能があまりにも少ないため、チーム内でブラッシュアップ案で以下のような流れを決定しました。

```
1.揺れの検知レベルを3段階とする
危険なレベルに合わせ連絡手段を変更
└全Lv共通にslackに報告
Lv1、安全を促す警告※運転者のslack
 - 休憩をして欲しいのでぐるなびAPIを使って近くの駐車場のあるお店（カフェ）一件を通知
Lv2、安全を促す強い警告※運転者のslack
 - 同様にお店（カフェ）を通知
Lv3、事前に登録してある、twilioを使って連絡先に連絡
```

出来たMESH Appでの画面図

![mesh_03.png](https://qiita-image-store.s3.amazonaws.com/0/93976/7bc0967f-5786-53dc-0116-379443b02e28.png)

* **注意**

MESHのタグにはTwilioが無いので[MESH SDK](https://meshprj.com/sdk/)と呼ばれる管理画面からJavascriptでWEBからの作成が必要となります。

```javascript:Twilio
//The endpoint URL of Remote API
var endPointURL = 'http://__ORIGINAL_API__/twilio_call';
 
var alert = properties.myProp;

var data = {
	"To":'+8190xxxxxxxx',#国際番号から電話番号を
	"key":'xxxxxx',
}

//Puts the camera into "Shooting mode"
ajax ({
    url : endPointURL,
    type : "post",
    data : data,
    dataType : "json",
    timeout : 5000,
	error : function ( request, errorMessage ) {
        log("TwilioAPI : Network error");
        callbackSuccess( {
            resultType : "continue"
        } );
    }
});
 
return {
    resultType : "pause"
};
```

**Twilioは既にチャージされたアカウントをお借りしました！Twilio様ありがとうございます** 


かっ完成！

出来上がったお守りの画像※お守り袋に入れる時間ありませんでした :sob: 

![mesh振ル.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/e17849d7-0ebc-7f8e-6e9e-3f944c3c4584.jpeg)


検証環境：
ミニ四駆＋MESH振る（ムダにカッコいいショット）
![img_5310_1024.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/a08a032e-6ca7-c589-56e5-2529861f29d8.jpeg)

検証風景：
![debug.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/c288a672-98f7-b3c0-131b-2273f61d24bd.jpeg)

最終設計：
![MESH振ル.png](https://qiita-image-store.s3.amazonaws.com/0/93976/2278dd12-d579-55fd-4090-3a6fb4a5879b.png)


# 懇親会

美味しいお食事がいっぱい用意されてました :smile: 
![gurume.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/e14aa3e9-ad64-6c4b-776e-c82fb757d9bb.jpeg)

![gurume02.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/38566e81-c84d-c734-0c38-b8d9dd57cafe.jpeg)

かんぱーい :tada: 

![kanpai.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/24a163e3-890d-ec8b-8ef4-c323eab68290.jpeg)



懇親タイム

![konshin.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/62bf1f12-faa8-4626-2ca9-96973bd46240.jpeg) ![konshin01.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/444fc642-791e-60db-0e11-32d2ce4ef460.jpeg) 

![konshin03.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/98035acb-ca81-0612-9ea7-49b99a6b647b.jpeg) ![konshin04.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/04d95125-445a-6f66-e10f-8f4e5f253c4f.jpeg)


# 発表

いよいよ発表の前に！台風の前日なので、進路が気になる〜〜 :sweat: 
※2016/10/2は台風前夜 915hpaまで発達した大きな台風です。。。
※無事東京に戻れたそうです :smile: 

![close01.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/8afe82c2-5db7-01eb-240f-c62c761e1356.jpeg)

**いよいよ賞の発表**

**Microsoft賞の発表**

![microsoft.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/6c760f8e-5eef-1a75-5b98-83fcaadfd4c3.jpeg)

**スパイルスチーム**
>スーパー居留守をもじって、玄関先にMESH(Motion)とiPhoneを設置し、顔写真を撮影。事前に登録されているホワイトリスト・ブラックリストの写真を元にiPhoneから出される表示を変えるアプリ
（ホワイトリストには天使の絵を出し、また来てねを催促）
（ブラックリストには本人の画像から血が滴るように見えるように表示w）
ぶっ飛んだ作品だけど、本当に商品化できそうな予感のアプリでした

**Twilio賞の発表**

![twilio.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/1fd0e7ba-c2bf-03a3-4cd0-a0c66e825c42.jpeg)

**Emotion Phone**
> エモーションフォン。ブラウザでTwilioクライアントを利用し、音声電話を実現。
ただの音声電話ではなく、PCカメラの人物が”笑顔”にならないと発信できない仕組み。こっこれはコールセンターで本当に実現できるのではないかー？？

そして・・・「ぐるなび賞」「最優秀賞」は
:tada: :raised_hands: :tada:　（パチパチ）

**MESH振ル**
![gurunavi.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/c570b4e5-db68-0ab3-6a7c-d2ff9c189375.jpeg)

![close03.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/dfc14f55-79a0-f3ff-71ce-1462032f9a52.jpeg)

12/3の2次予選権利獲得しました〜！！

# まとめ

* いいチームメンバーに囲まれました :smile: スライドを作ってくれたM/Kさん
* プレゼンを盛り上げるために突貫で作ってくれたMovie #Cさん
* デバッグや各MESHのフローを考えてくれたK/Aさん

いいチームワークで作成時間1分前まで安心して、発表に臨むことができました :smile: 

![touch01.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/e0f4e7a4-e9ac-7944-cbe3-d3135e0b3411.jpeg)

# お疲れしたー！！

![all01.jpg](https://qiita-image-store.s3.amazonaws.com/0/93976/630c4806-da2b-bd83-c3c8-61b810a35d15.jpeg)

------

* [Togetter纏めあります](http://togetter.com/li/1032086)

* [hacklog](http://hacklog.jp/works/48451)