myThingsにつながる鏡を作ってみた

[myThings Advent Calendar 2016](http://qiita.com/advent-calendar/2016/mythings) 14日目の記事になります。
#概要
**[myThings](https://mythings.yahoo.co.jp/)**の**Twitter**チャンネルと**IDCF**チャンネルを使ってツイートを表示する鏡を作ります。

#全体の流れ
![流れ](https://qiita-image-store.s3.amazonaws.com/0/152170/29f33bc2-1e20-bea1-6eaf-317e99eb3126.jpeg)
1.myThingsアプリを使ってツイートの内容をIDCFクラウドに通知します。
2.Raspberry Piからツイート内容を取得し保存します。
3.ツイート内容を加工してディスプレイに映します。

#必要なもの
[myThingsアプリ](https://mythings.yahoo.co.jp/)
[IDCFクラウド](https://www.idcf.jp/cloud/iot/)
[Raspberry Pi 2](https://www.switch-science.com/catalog/2366/)
[SHARP 7インチ高精細IGZO-LCDパネル](http://akizukidenshi.com/catalog/g/gM-10016/)
ハーフミラー

#準備
##IDCFクラウド
[myThingsをはじめよう：サーバーの準備・認証](https://www.idcf.jp/cloud/iot/detail01.html)
を参考にIDCFクラウドのサーバを準備します。
myThings IDCFチャンネルの認証に必要なIPアドレス、認証tokenと
IDCFクラウドからメッセージをsubscribeするために必要なaction-1のuuid、tokenをメモしておきます。
それぞれの取得方法を下記に記載します。

**IPアドレス**
![IPアドレス](https://qiita-image-store.s3.amazonaws.com/0/152170/1937b51e-7bb9-d7c8-0dd6-84183f9353a5.png)


**認証token**

```
$ docker-compose run --rm iotutil owner

> iotutil@0.0.1 start /app
> node app.js "owner"

┌─────────┬────────────────────┬──────────────────────────────────────┐
│ keyword │ meshblu_auth_token │ meshblu_auth_uuid                    │
├─────────┼────────────────────┼──────────────────────────────────────┤
│ owner   │ 9dba0xxx           │ 0e4a431d-2986-49c9-b124-a9cc61cc2xxx │
└─────────┴────────────────────┴──────────────────────────────────────┘
```
action-1の**token、uuid**

```
$ docker-compose run --rm iotutil show -- --keyword action-1

> iotutil@0.0.1 start /app
> node app.js "show" "--keyword" "action-1"

┌──────────┬──────────┬──────────────────────────────────────┐
│ keyword  │ token    │ uuid                                 │
├──────────┼──────────┼──────────────────────────────────────┤
│ action-1 │ fb7bcxxx │ 0a6b316f-ac1e-45c6-a299-d2db5ae40xxx │
└──────────┴──────────┴──────────────────────────────────────┘
```

#実装
##myThingsアプリでの組み合わせ作成
今回は鏡に映すテキストをTwitterから取得しますので、
myThingsアプリでTwitterとIDCFの組み合わせを作成します。
この組み合わせが実行されると条件にまっちしたツイートがIDCFクラウドに保存される仕組みです。

**組み合わせ**
![組み合わせ](https://qiita-image-store.s3.amazonaws.com/0/152170/865ccaf8-5b92-6965-4d5d-77d61d8fd2ad.png)

**トリガー**
![トリガー詳細](https://qiita-image-store.s3.amazonaws.com/0/152170/b31336ad-e0c7-a2d1-41e5-f33ab90ae44c.jpeg)
Twitterの「特定のアカウントがツイートしたら」トリガーを使用します。
ツイート内容が取得可能であればどのトリガーを使っても構いません。
今回はユーザー名をXXX（仮）としてあります。

**アクション**
![アクション詳細](https://qiita-image-store.s3.amazonaws.com/0/152170/e7e0bdac-e542-b0d7-07cb-ea4e2d501de8.jpeg)
IDCFの「通知する」アクションを使用します。
「アクション-1」はIDCFクラウドの準備の際に選んだアクションと末尾の数字が同じものを選びます。
メッセージの中身は後ほど加工がし易いように「|」で区切っております。
最初の「tweet」はpayloadの中身がどういった内容のものかを判別するための識別子です。

##IDCFクラウドからツイート内容を取得
IDCFクラウド上ではMeshbluというメッセージングプラットフォームが動いています。
MeshbluではMQTT、HTTP、WebSocketなど複数のプロトコルで通信が出来るのですが、
今回はMQTTを採用しました。
IDCFクラウドに接続（on_connect）した際にsubscribeを行い、
myThingsの組み合わせの実行（on_message）する度にデータの取得を行います。
データの内容は識別子＋実データの構成にしているので複数の組み合わせが実行された場合も識別子によって情報の出し分けをすることが可能です。

```python:mqtt.py
#!/usr/bin/python
# -*- coding: utf-8 -*-
import paho.mqtt.client as mqtt
from config import conf
import json
import re

def on_connect(client, userdata, flags, rc):
    client.subscribe(conf["ACTION_UUID"])

def on_message(client, userdata, msg):
    jsondata = json.loads(msg.payload)
    arraydata = jsondata["data"]["payload"].split("|")

    if arraydata[0] == "tweet":
        # ここにデータを取得した際の処理を記載します。
        # 今回はDBへの格納とHTMLファイルの書き出しをしています。

client = mqtt.Client(client_id='', clean_session=True, protocol=mqtt.MQTTv311)

client.username_pw_set(conf["ACTION_UUID"], conf["ACTION_TOKEN"])

client.on_connect = on_connect
client.on_message = on_message

client.connect(conf["IDCF_CHANNEL_URL"], 1883, 60)
client.loop_forever()
```
設定ファイルのUUID、TOKENは準備の項でメモしておいたaction-1のuuid、tokenを記載します。

```python:config.py
conf = {
     "IDCF_CHANNEL_URL": "210.xxx.xxx.xxx",
     "ACTION_UUID": "0a6b316f-ac1e-45c6-a299-d2db5ae40xxx",
     "ACTION_TOKEN": "fb7bcxxx"
}
```

##鏡にツイート内容を表示する
ツイートの表示にはハーフミラー＋7インチのディスプレイを使用しました。
ハーフミラーは明るい所から暗い所を見ると鏡のように見え、暗い所から明るい所を見ると透けてみえる特性があります。
この特性を活かしてディスプレイ部分以外は黒の台紙が貼って通常時は鏡として見えるようにし、
ディスプレイが明るくなるとその部分だけが透けて見えるような仕組みにしました。

ディスプレイにはChromiumプラウザをフルスクリーンモードで起動し、
境界線が見えないようにしてあります。

**Maker Faire Tokyo 2016での展示**
![image](https://qiita-image-store.s3.amazonaws.com/0/152170/4234a518-1c9b-0519-41b0-f7a76cfdcc6f.png)

#最後に
IoT界隈で話題になったスマートミラーを自作してみようと思い作ってみました。
今回は非常に簡単な構成ですが、
人感センサーとの組み合わせて人がいる時に情報を出したり、
カメラと組み合わせて人にあわせて情報を出し分けたり、
モーションでコントロールが出来るようになったりと
作り込めばより多くのことが出来ると思います。

インターネットに繋がることによって身の回りにあるものが少し便利になります。
近い将来にはこういった鏡が一般的になっているのかもしれませんね。