NefryとMilkcocoaを連携させて、WebサイトにリアルタイムでPush通知してみる

わみ

2016.06.09

こんにちは。DevRelチャンネル外部ライターのわみです。愛知県でネットワークの勉強をしている学生です。2年ほど前から電子工作を始め、FRISKサイズのIoT向けデバイス「Nefry（ねふりー）」も自作しています。

センサーを繋いだ「Nefry」とリアルタイム通信ができる「Milkcocoa」を組み合わせると、自分の暮らしをハックできるようになります。その前段階として、本記事ではMilkcoocaとNefryを組み合わせる方法と、Nefryと組み合わせられるセンサーをいくつか紹介します。

今回使うもの

Nefry

「Nefry（ねふりー）」とは、MilkcocoaやmyThings、IFTTTなどのインターネットのサービスとハードウェアを簡単に接続できるモジュールです。通常は時間のかかるインターネットへの接続を簡単におこなえるので、あなたのアイデア表現により時間を費やすことができます。

また、スマートフォンで使うようなモバイルバッテリーで動くので、場所を選ばずに使えるんです。こちらから購入できます。

Milkcocoa

Milkcocoaとは、IoTデバイス・スマートフォン・PC間で簡単にリアルタイムにデータの保存、データのやり取りができるクラウドプラットフォームです。複雑なプログラムが必要なリアルタイム通信を、特にプログラムすることなく使うことができます。

JavaScript、Java（Android）、swift、C++（Arduino）などのライブラリがあり、プログラムの中にMilkcocoaを組み込むことができます。

NefryとMilkcocoaを繋げてみる

Milkcocoaがどんなものかわかったところで、実際にNefryを連携させてみましょう。Nefryに付いているスイッチを押したときに反応するWebページをつくってみようと思います。

1. Milkcocoaに登録する

それでは早速Milkcocoaに登録をします。

https://mlkcca.com/

上記のリンクでMilkcocoaを開けます。サイトトップの右上にある「無料登録」をクリックして、メールアドレスとパスワードを入力しましょう。Milkcocoaからメールが届くので、メール内のリンクをクリックすれば登録は完了です！

ログインすると、アプリリストのページが表示されます。ページの中央にある「新しいアプリを作る」をクリックしお好きな名前をつけてください。

無事にアプリを作れると、APPIDというものを取得できます。この場合はguitarioyydfzqですね。ちなみに、このIDはNefryからMilkcocoaに接続するときに必要になります。アプリ名をクリックして詳細情報をみていきましょう。

このページでは、現在保存されているデータの数や同時接続数などが確認することができます。上限をオーバーすると接続できなくなってしまうのでご注意を。ページの左側にある、「認証」というタブをクリックします。

「新しいAPI KeyとAPI Secretのペアを生成する」をクリックして、API KeyとAPI Secretを生成してください。NefryではAPI認証をするので、のちほどNefryに入力します。

API KeyとAPI Secretが発行されました。これでMilkcocoa側でおこなう作業は終了です。次はNefryの設定に入ります！

2. Nefryの設定をする

Milkcocoaと接続するためにNefryのプログラムを書き換えます。下のプログラムは、Nefryのスイッチを押すとMilkcocoaに通知をするようになっています。

#include <Nefry.h>
#include <Nefry_Milkcocoa.h>

Nefry_Milkcocoa *milkcocoa;

char *datastore;
void onpush(DataElement *elem) {//MilkcocoaのOn関数と同一
//データストアにデータが届いたときに呼び出される
 Nefry.print("onpush:");
 Nefry.println(elem->getInt("sw"));//swというデータがあるとき表示されます
}

void setup() {
 milkcocoa->print();//Setup ModuleページにAPPIDの表示をする
 milkcocoa = Nefry_Milkcocoa::begin();//milkcocoaと接続に必要になる処理をします。
 datastore = Nefry.getConfStr(3);//Setup Moduleページに入力されたデータストア名を保存します。
 Nefry.println( milkcocoa->on( datastore, "push", onpush) ? "Milkcocoa onPush OK" : "Milkcocoa onPush NG" );//on関数を有効にします。
}
bool flg, old;
void loop() {
 if ( (flg = Nefry.push_SW()) != old) {//ボタンの状態が前回と異なるとき  
   Nefry.println( milkcocoa->loop(10000)? "Milkcocoa Connect OK" : "Milkcocoa Connect NG" );//10秒以内にMilkcocoaに接続できればokと表示されます。
   DataElement elem = DataElement();
   elem.setValue("sw", flg );//スイッチの状態を送信できる形に変換
   old = flg;//今の状態を保存
   milkcocoa->push(datastore, &elem);//Milkcocoaに送信
 }
}

ArduinoIDEでNefryに書き込める用に変換するのですが、今回は私の方で用意したプログラムをWebからダウンロードして更新してみようと思います。これから説明するNefryの設定は、スマートフォンやPCからおこなえます。

まずはNefryをモバイルバッテリーなどの電源につなぎ、水色のLEDが点灯するまで待ちましょう。