milkcocoaのiOSとNode.js SDKを実案件で使ってみた話







(最近milkcocoa公認エバンジェリストに!)
株式会社LIG


伝説のウェブデザイナーを探して
・社長が砂浜に埋められる
秒速結婚
・結婚相手を募集して
すぐに結婚した社員
世界一即戦力な男
・あの男がLIGに入社
http://liginc.co.jp
おもしろネタな
イメージが強い会社です。
が
エンジニアもいてやることは
しっかりとやってますよ!
おもしろだけでは無い、
というイメージを作れれば幸いです。
私の歴史
1989年4月4日 宮城県栗原市で生誕
2014年7〜8月
Connpassでイベント漁りしている時期
milkcocoaハッカソンというタイトルを発見 調べてみた
http://connpass.com/event/8469/
2014年9月6,7日
MashupAwordのハッカソンで初めて利用
チュートリアルを見て感動
2014年9月9日
milkcocoaハッカソンに(終盤から)参加
2014年4月1日 LIGに入社
2014年9月26日
HTML5minutes!で登壇
http://slides.com/sugawararyousuke/milkcocoa-web/#/

2014年10月18日
第21回 Creators Meetup で登壇
node-webkitとmilkcocoaでネイティブなチャットアプリ作る話
2014年11月14日
弊社ブログ (http://liginc.co.jp)で執筆
「インタラクティブコンテンツを作ろう!milkcocoaで5分のチャットアプリ制作」
http://liginc.co.jp/web/programming/server/129348
2014年12月
Qiitaでmilkcocoa系記事執筆しはじめる
milkcocoa iOSテスト版を使ってiOSとWebサイトを連動させてみるミニマム構成〜IoTっぽいことをする入門 http://qiita.com/n0bisuke/items/6b04d0a21b8b2c1eeec2
milkcocoaで接続出来るドメインを制限してみる。 http://qiita.com/n0bisuke/items/5b00f094eada60a438ea
フロント開発でメチャ活躍するmilkcocoaがサーバー側(Node.js)でも活躍してくれた。 http://qiita.com/n0bisuke/items/c6fa760e4bb480e95d2f
最近(2014年12月)
milkcocoaを実案件で使っている
詳細は後ほど
milkcocoaを実案件で使ってみた話


1. milkcocoa ios SDK
2. milkcocoa Node.js SDK
milkcocoa iOS SDK
を使ったIoTな事例


milkcocoa iOS SDK
・注: SDKはまだ開発中です
・Swift向けに限定的に使わせて頂きました。
参考: Milkcocoa iOSテスト版を使ってiOSとWebサイトを連動させてみるミニマム構成〜IoTっぽいことをする入門
http://qiita.com/n0bisuke/items/6b04d0a21b8b2c1eeec2
import UIKit
import Milkcocoa
class ViewController: UIViewController {
let milkcocoa = Milkcocoa(url:"https://{アプリid}.mlkcca.com")
override func viewDidLoad() {
super.viewDidLoad()
let dataStore = milkcocoa.dataStore("ios")
dataStore.on("send", { data in
println(data.value["msg"].asString!)
})
dataStore.send(["msg":"hello! JS! I am iOS"])
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
シンプルな使い方
ViewController.swift

Milkcocoa.framework
を通常にliblary追加する時のように読み込ませる
Step1: ライブラリ読込
Step2 : Cooding
作ったもの
社内受付システム

ROMO
・手前味噌 iPhoneがラジコンになる知育ロボットRomoで遊んでみよう http://liginc.co.jp/web/programming/other-programming/130665

・教育用 ラジコンロボット
・iPhoneを本体に接続して利用
・iOS向けのSDKが公開されている
受付システム構成


デモっぽいもの
公開されてるROMOの二種類のライブラリ
・RMCore : キャタピラ,LED,角度など物理的な操作
・RMCharacter: 表情,声,感情,目線などキャラクター操作
Web屋がIoTやる時のジレンマとmilkcocoa
・色々なデバイスとWebを繋げるため、Web以外の色々な言語や知識が必要となる。
・色々な言語やデバイスを使うのは楽しい。けど、全てを習熟させられる程時間は無い
(接続部分を作るだけでも結構時間掛かってしまうことも...)
デバイスの連携がカンタンに出来ればプロダクトの設計などメタレイヤーに集中出来る

接続部分はmilkcocoaに任せる
milkcocoa Node.js SDK
を使った
サーバー負荷分散な事例


milkcocoa Node.js SDK
・注: SDKはまだ開発中です
・Node.js向けに試しに使ってみました。
参考: フロント開発でメチャ活躍するMilkcocoaがサーバー側(Node.js)でも活躍してくれた。
http://qiita.com/n0bisuke/items/c6fa760e4bb480e95d2f
月刊ライトニングトーク2014年10月号で
Technical Rockstarts 部谷氏が発表
var MilkCocoa = require("./milkcocoa");
var milkcocoa = new MilkCocoa("https://{アプリid}.mlkcca.com");
var ds = milkcocoa.dataStore("node");
ds.on("send", function(data) {
console.log(data);
});
ds.send({ msg : "Hellow Web I'm node.js"});
シンプルな使い方
app.js(Node.js)
・zipをダウンロード
・(zip内のindex.jsをmilkcocoa.jsに変更)
・require()するだけ
Step1: ライブラリ読込
Step2 : Cooding
$ wget http://cdn.mlkcca.com/nodejs/milkcocoa.zip
$ unzip milkcocoa.zip
$ cd milkcocoa
$ ls
README.md index.js sample.js
$ mv index.js milkcocoa.js
作っているもの

Twitter連動型のインタラクティブなサイト
作っているもの構成(初期)

※EC2とS3で分けるのは重要
作っているもの構成(今)

時間、お金、知識が無くても同時アクセスをさばけるよ!
作っているもの全体像

デモっぽいもの
...はまだ見せれません。
けど、
12月18日(木)にティザーサイト、
12月25日(木) クリスマスに
リリースします!
LIGブログをチェックしていて下さい!!
インタラクティブ時のジレンマとmilkcocoa
・インフラ側は同時アクセス数が大事
・アクセス時のオートスケールだったりに掛かる作業コストを含めた金額面は安く無い
ユーザーからの同時接続数を考える手間が無くなると、プロダクトの設計などメタレイヤーに集中出来る

接続部分はmilkcocoaに任せる
個人的に感じるmilkcocoaメリット
・フロントエンジニアでもインタラクティブコンテンツ
・マルチプラットフォーム
・チュートリアルやドキュメントが分かり易い
・Technical Rockstarsがサポートしてくれる
milkcocoaサポート

Node.jsのSDKで
文字化けが起こったけど
すぐに解決
milkcocoaサポート

iOS SDK使いたい!
といったら作ってくれた!
milkcocoaサポート

Swiftで使いたい!
といったらSwiftで
作ってくれた!
BaaSって他にも色々あるけど
Technical Rockstarsが
サポートしてくれるのがmilkcocoaの強みとして大きな要素
私の歴史(再掲)
1989年4月4日 宮城県栗原市で生誕
2014年4月1日 LIGに入社
2014年8月 milkcocoaを知る
2014年9月 milkcocoaハッカソン
2014年9月 ハッカソンでmilkcocoaを利用
2014年9月 html5minuts登壇
2014年10月 creators meetup登壇
2014年11月 milkcocoaでLIGブログ執筆
2014年12月 milkcocoaでQiitaに執筆
2014年12月 milkcocoaを案件で利用


milkcocoaが人生を変えた
milkcocoaと出会う前
milkcocoaと
出会った後
まとめ
・milkcocoa使うと自分の作りたいことに集中出来るよ
・milkcocoaはサポート強いから分からないことはどんどん聞こう
・人生変わったよ
まとめ
ありがとうございました。