Milkcocoa iOSテスト版を使ってiOSとWebサイトを連動させてみるミニマム構成〜IoTっぽいことをする入門


##始めに
AdventCalenderに初めて参加します。Swiftカレンダーの先陣を切らせて頂きます。普段は台東区のWeb制作に務めていて、アプリは全くやったことが無いです。Swiftはまだまだ初心者ですがよろしくお願いします。

##Milkcocoa 

https://mlkcca.com/

![](http://i.gyazo.com/28cbaa38d62a78bf9bc8f3480746dccc.png)

BaaSサービスの１つです。
Parse.comやFirebaseといったBaaSの有名サービスはさまざまですが、milkcocoaは日本発のサービスです。
[インタラクティブコンテンツを作ろう！milkcocoaで5分のチャットアプリ制作](http://liginc.co.jp/web/programming/server/129348)

現時点でMilkcocoaはJavascript向けのSDKが公開されていて、Webアプリケーションには活用出来ます。今回はまだ公開されていないSwift用のSDKをβテストな形で使わせて頂きました。

##環境
* Mac OS X 10.9
* Xcode6.1
* iOS8.1
* Milkcocoa Javascript SDK 0.2.8
* Milkcocoa iOS テストユーザー
 **iOS SDKは開発途中なので「テストユーザ用クライアント版」になります**

## SwiftとMilkcocoaのHello World

Milkcocoaを使ってSwiftとJSとでSocket通信をしてみます。

###Web側 (Javascript)

web側は単純にボタンを押すとSendイベントが送信されるものを作ります。

```milkcocoaSample.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>simple chat!</title>
    <script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
    <script>

        var milkcocoa = new MilkCocoa("https://io-ci1s1iu9p.mlkcca.com/");
        var iosDS = milkcocoa.dataStore('ios');

        function clickEvent(){
            iosDS.send({msg:'hello! iOS! I am JS'});
        }

        iosDS.on('send',function(data){
            console.log('receive:',data.value.msg);
        });
    </script>
</head>
<body>
<button name="button" onClick="clickEvent()">send!</button>
</body>
</html>
```

###iOS側 (Swift)テスト版

#### Milkcocoa.frameworkを読み込ませる
![](http://i.gyazo.com/be3427c13eb53c3299c59db0a98ceeb1.png)

`もうすぐ公開されます!!`

```ViewController.swift
import UIKit
import Milkcocoa

class ViewController: UIViewController {
    let milkcocoa = Milkcocoa(url:"https://io-ci1s1iu9p.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()
    }

}
```

###実行してみます。

iOS(Swift)側からは起動時に`hello! JS! I am iOS`とWeb(JS)側に送り,
iOS側からはsendを押したら`hello! iOS! I am JS`がWeb側に送られます。
![](http://i.gyazo.com/916077e9a54632460800feb6b65f7786.gif)

確認できましたか?

**iOSアプリ開発が初めての方でもカンタンにWebとiOSを連携させることが出来たと思います。** 実際に私もほぼほぼ初心者なのですが、ほんとに一瞬で動かすことが出来ました。

次は、少し応用して表現をしてみます。

## 応用。iOSアプリの色をWebから制御してみる
応用です。 ボタンを押して相手側の背景色を変えてみます。

###Web側 (JS)

Web側は色の名前を送れるようにします。

```milkcocoaSample.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>simple chat!</title>
    <script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
    <script>

        var milkcocoa = new MilkCocoa("https://io-ci1s1iu9p.mlkcca.com/");
        var iosDS = milkcocoa.dataStore('ios');

        function clickEvent(color){
            iosDS.send({
                msg:'hello! iOS! I am JS',
                color: color
            });
        }

        iosDS.on('send',function(data){
            console.log('receive:',data.value.msg);
        });
    </script>
</head>
<body>

<button name="button" onClick="clickEvent('red')">red</button>
<button name="button" onClick="clickEvent('green')">green</button>
<button name="button" onClick="clickEvent('yellow')">yellow</button>

</body>
</html>
```

###iOS側(Swift)テスト版

背景の色を変える場合は

```
self.view.backgroundColor = UIColor.redColor()
```

このような形で指定します。

```ViewController.swift
import UIKit
import Milkcocoa

class ViewController: UIViewController {
    let milkcocoa = Milkcocoa(url:"https://io-ci1s1iu9p.mlkcca.com")

    override func viewDidLoad() {
        super.viewDidLoad()
        let dataStore = milkcocoa.dataStore("ios")
        
        dataStore.on("send", { data in
            println(data.value["msg"].asString!)
            //送信された色によって背景色を変更する
            var color = data.value["color"].asString!
            if color == "red" {
                self.view.backgroundColor = UIColor.redColor()
            }else if color == "green"{
                self.view.backgroundColor = UIColor.greenColor()
            }else if color == "yellow"{
                self.view.backgroundColor = UIColor.yellowColor()
            }else if color == "white"{
                self.view.backgroundColor = UIColor.whiteColor()
            }
        })
        
        dataStore.send(["msg":"hello! JS! I am iOS","color":"white"])
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

}
```

###実行してみる

こんな感じでWebからのSendイベントをトリガーにしてiOSアプリ側の背景を変えることができました。

![](http://i.gyazo.com/1dd8c8eefe9c4600e9302d401dae3277.gif)


##まとめ
　このような感じでMilkcocoaを使うことでiOSとWebの連携をカンタンにすることができました。
　
　iOSとWebの連携は当初は凄く難しいイメージがあったのですが、その敷居を格段に下げてくれました。Milkcocoaを初めて触って数分でWebチャットアプリを作ったときにも感じましたが、やはりシンプルで分かり易いというのはライブラリやサービスでは重要な要素ですね。
　説明が無くても直感的に分かるシンプルさが私がMilkcocoaが好きな理由です。
それと、ユーザーへの対応も丁寧にしてくれるという点もあり、凄く応援しています。

最後になりますが **iOS SDKは開発途中** なので興味のある方は連絡は **contact@mlkcca.com** まで連絡をすると良いと思います :-D

それでは!