第6回
電子工作部

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

わみ


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

こんにちは。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からメールが届くので、メール内のリンクをクリックすれば登録は完了です!

 
3

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

 
4

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

 
5

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

 

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

 
7

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が点灯するまで待ちましょう。

 

水色のLEDが点灯すると、Nefry-○○○○というWi-Fiが表示されるかと思います。そのWi-Fiに接続してください。

設定を続けていくと、設定を保存するためにNefryが再起動することがあります。そのとき、接続が切れてしまうことがありますが、再び接続しなおしてください。

NefryがアクセスするWi-Fiの設定方法

この項目は、一度設定すればアクセスするWi-Fiが変わらない限り再設定する必要はありません。

http://192.168.4.1に接続し、Setup WiFiのリンクをクリックします。

SSIDの入力欄をクリックすると、検出されたWi-Fiを選べます。Passがある場合はそちらも入力して、Saveをクリックします。Saveを押すと再起動するのでしばらく待ちましょう。

プログラムの更新方法

あらかじめNefryがインターネットにつながっているようにしてください。http://192.168.4.1に接続し、Web Sketch Downloadのリンクをクリックします。すると2つの入力欄のあるページが表示されます。

Program download Domain:wamisnet.github.io
Program download URL:/pg/nefry_milkcooca_sw

と入力し、SaveをクリックするとNefryが自動的にプログラムをダウンロードし、本体のプログラムを更新します。プログラムの更新が終わったら、先ほど取得したMilkcocoaの情報を設定します。

Milkcocoaとの接続方法

http://192.168.4.1に接続し、Setup Moduleのリンクをクリックします。表示されたページの入力欄に、先ほど登録したMilkcoocaの情報を入力していきます。

APPID、APIKey、APISecretはMilkcocoaで取得したものを入力してください。DataStoreはnefryと入力します(上の画像参照)。入力が完了したらページ下部にあるSaveボタンをクリックし、データを保存します!

これでMilkcocoaとNefryが通信できるようになります。

3. 表示してみる

Nefryでボタンを押したときに、Milkcocoaを通じて反応する仕組みができたので、Webページで表示してみましょう! コードコミュニティ「jsdo.it」にコードを書きましたので、こちらをつかってみようと思います。

以下のリンクをクリックしてページを開いて実行してみてください。
http://jsdo.it/wamisnet/nefry-milkcocoa

実行するとMilkcocoaのAPPIDを聞かれるので、入力します。すると、Nefryのボタンが押されると画面が変化します!

 

このようにMilkcocoaを通して、ハードウェアのNefryとWebを連携できました! リアルタイムな通信ができるので、いろいろなセンサーを組み合わせてスマートハウスの仕組みをつくるのも良さそうです!

Nefryにはどんなセンサーを繋げられるの?

せっかくなので、次はセンサーをNefryにつないでデータを集めてみましょう。暮らしを一歩快適に近づけるオススメのセンサーをいくつか挙げてみようと思います!

温度・湿度センサー

a2817b5f-e4d5-5c09-9aed-cb5db73f4159

センサーでできること

センサー周りの温度や湿度の取得

センサーの活用方法

  • 暑さや寒さに弱い動物のために、危険な温度になったら警告を出す
  • 風邪をひかないよう、部屋の湿度を一定に保つための計測

明るさセンサー

e3fc6afe-fa16-682a-0251-9324c69601be

センサーでできること

センサー周りの明るさの取得

センサーの活用方法

  • 朝日が上がったら目覚ましを鳴らす
  • 周りが暗くなったらライトをつける
  • 部屋の電気がついているかどうかを知り、電気の消し忘れを防ぐ

開閉センサー

be4cd9fa-8a50-753d-422b-1fbdd4f924bf

センサーでできること

ドアや引き出しの開閉の取得

センサーの活用方法

  • 子供が帰宅したときなど、ドアが開いたらスマートフォンに連絡する
  • 窓が開いているかどうかを取得し、開いたらスマートフォンに通知して防犯対策

傾きセンサー

f5612a77-b85b-ace6-f74c-249fad249ba6

センサーでできること

振動や上下左右どちらにセンサーが向いているかを取得

センサーの活用方法

  • Slackなどのチャットツールで「退席中」や「忙しい」など簡単な連絡する
  • 振ったことをきっかけにテレビやエアコンをつける

人感センサー

3bc8fd3a-ef23-461c-2366-97d1608f23e6

センサーによってできること

人がいるかどうかを取得

センサーの活用方法

  • 人が来たら電気が自動的に点灯する
  • 来客があったら玄関チャイム鳴らす

まとめ

今回は、NefryとMilkcocoaをリアルタイム通信させることを体験してみました。これを応用すれば、いろいろなデータをアップロードしてWebに表示してみるなど、可視化できるようにもなります!

次回以降は、先ほど紹介したセンサーを動かしてみようと思います。次回もお楽しみに!

わみ
この記事を書いた人

おすすめ記事

Recommended by