Milkcocoa×○○　ここ3ヶ月で試した3つのコラボレーション

**（17：30　YouTubeのリンクが2つとも同じだったので修正しました）**

空いているようだったので少しでもMilkcocoaの布教に貢献できればと思い初投稿。
明日以降、何か書くひとたちのハードルを下げるためにもなればいいかな。

むしろ、「Milkcocoaって最近よく聞くけど何に使えるのー？ﾎｼﾞﾎｼﾞ(´σ_`　) 」くらいの感じの人に知ってもらえたらいいかなっていう、自分が実際にやってみた用途について。

#Milkcocoa×Monaca
##Monacaとは
[Monaca](https://ja.monaca.io/)
HTML5/JavaScriptのワンソースから、iOSアプリとAndroidアプリをビルドすることができるすごいやつ。
ハイブリッドなのでPhoneGapの機能なども使える。
Webデザイナーでも画面が作れるし、JSができれば動かせる！
クラウドIDEがあるのでブラウザ上で編集できてかんたん！
##麻雀点数計算アプリのためのDBを求めて
麻雀が好きだけど点数計算ぜんぜん覚えられないので、計算アプリを作りたかった。
さらに、その結果を保存するDBがほしかった。
なんなら、そのDBを問題集として、別のアプリで呼び出したかった。
###Nifty Cloud mobile backend
Monacaは[Nifty Cloud mobile backend](http://mb.cloud.nifty.com/about.htm)と提携しているので、本来であればこれを利用するのがスマートというもの。

ところが、使い方がよくわからない。
Niftyのせいじゃないんだけど、すみません。
そもそもサーバのことがわからないので、多機能すぎて頭がパンクする。
アプリ制作自体が初めての私には難しかった。

###Monacaバックエンド
Monacaは独自のバックエンド機能も備えている。
使い方もわかりやすいし、実装も簡単。
Monacaの専用デバッガーでも問題なく動作したので、勝った気になった。

ところが、バックエンド機能をオンにしたらなぜかビルドに失敗するようになった。
（解決しないままなので解決できる人がいたら教えて欲しい）

###Milkcocoa
そこで[Milkcocoa](https://mlkcca.com/)である。
本当のことをいうと以前BaaSとは何かというのを調べていてMilkcocoaについて書かれた記事を見て、使ってみたいと思っていた。
残念ながらMonacaとは提携していないが、名前もかわいいし似ていて相性が良い気がした。

大事なことなので2度言っておくと、「**名前もかわいいし似ていて相性が良い**気がした。」のが使った理由だ。

黒い画面がこわいのに、堅苦しい見た目のサービスはとっつきにくい。
このくらいふわふわした感じの見た目でちょうどよかった。

Milkcocoaの良いところは、とにかく簡単だということ。
最低限やらなければいけないことが本当に少ない。

それに、Monacaで無事にアプリがビルドできた。
ちゃんと動いてありがとう。

##リアルタイムの優位性は無視
Milkcocoaの強みであるリアルタイム通信をまるっきり無視して、ただひたすらデータを保存し、別のアプリから呼び出す。
これが私の「はじめてのMilkcocoa」だった。

詳細は個人ブログにあるのでよければ参照してほしい。
[WebデザイナーでもできたMonaca&Milkcocoaでアプリ開発の目次](http://m31.fool.jp/web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%A7%E3%82%82%E3%81%A7%E3%81%8D%E3%81%9Fmonacamilkcocoa%E3%81%A7%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E3%81%AE%E7%9B%AE%E6%AC%A1/)

#Milkcocoa×Electron
Monacaと同じく、HTML5/JavaScriptでアプリケーションが作れるということで最近話題の[Electron](http://electron.atom.io/)。
Node.jsベースで、デスクトップアプリを作れる。
当然、ワンソースでWindows用もMac用もパッケージングできる。

これは本家Milkcocoaブログでも部谷さんが記事を書かれているので参考にさせていただいた。
[ElectronにMilkcocoaを導入して、リアルタイムなデスクトップアプリを作る方法](http://blog.mlkcca.com/frontend/milkcocoa-on-electron/)

Monacaで作ったアプリのソースはほぼ丸ごと移植できた。
ようするに、現在Webサービスとして動いているソースを、MonacaやElectronでアプリ化することが簡単にできてしまうわけだ。
資産がそのまま使える。

Milkcocoaを使ってプロトタイプをささっと作ってから本格的にプロジェクト開始、なんてこともできるし、開発中もスタブがわりにMilkcocoaを使うこともできる。
サービスによってはそのままMilkcocoaの有料プランに移行してもいいし、AWSとかHerokuとか検討してもいい。
作ってみないと負荷がわからないだとか、でも予算を先に見積もらないと稟議が通らないだとか、SEが頭を抱えてウダウダ打ち合わせで時間を浪費しなくてもいい！（と思いたい！）

業務アプリ制作は、次の時代に行こうとしている。

#Milkcocoa×IoT
##Arduino SDKでIoT
IoTとまとめてしまったけど、私が使ったのはArduinoとESP-WROOM-02（ESP8266）。
Arduinoは[Johnny-Five](http://johnny-five.io/)というライブラリを使えばNode.jsで制御できるので、require('Milkcocoa')的なこともできてしまう。

ESP8266を使ったWi-Fi通信もできるから、Milkcocoaお得意のリアルタイム通信も可能。
Arduino/ESP8266用のSDKもある。
日本のサービスだからこそ、安心の日本語記事もある。
[ESP8266やArduinoでMilkcocoaを使う方法(Milkcocoa Arduino SDK)](http://blog.mlkcca.com/iot/milkcocoa-arduino/)

##これを利用して作った仕組み

1. ブラウザでふつうのHTMLを表示してボタンをクリック
2. Milkcocoaにボタンの値を送信
3. onSend()で監視して、値を受け取る
4. 受け取った値によってLEDの光り方を変える

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/HkgWt_sZQBs/0.jpg)](http://www.youtube.com/watch?v=HkgWt_sZQBs)

という仕組みと、

1. CDSセンサーの値を取得してMilkcocoaに送信
2. onSend()で監視して、値を受け取る
3. 受け取った値によってLEDの光り方を変える

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/wAgUpe7tlxU/0.jpg)](http://www.youtube.com/watch?v=wAgUpe7tlxU)
※動画ではわかりにくいけど、右：青→緑→紫、左：赤→黄色→ピンクのローテーションで値を送信できる。どれから送信しても、再生はすべて同時。

という2種類の仕組みを作った。

本来ならこういうことをするには、自分でサーバを立てたり環境構築して、黒い画面であれこれしないといけなくてつらい。
でも、

**サーバサイド実装の工数は、0人日だ。**

私はただ、GitHubから拝借して「Milkcocoa、頼むよ」としているだけ。

#JavaScriptが動くなら、Milkcocoaもだいたい動く
これを知っているだけでも、アイデアの幅が広がると思う。
実用云々はあとで考えるとして、さくっとサーバサイドが実装できてしまうというのが素晴らしい。
プロトタイプをさくさく作れるというところが、IoTとの相性ピッタリという感じ。

- Webサイトでつかえる！
- モバイルアプリでつかえる！
- デスクトップアプリでつかえる！
- IoTデバイスでつかえる！
- あと何でつかう！？

甘く優しくそして熱いMilkcoocaを召し上がれ！