Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

始めに

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

Milkcocoa

https://mlkcca.com/

BaaSサービスの1つです。
Parse.comやFirebaseといったBaaSの有名サービスはさまざまですが、milkcocoaは日本発のサービスです。
インタラクティブコンテンツを作ろう!milkcocoaで5分のチャットアプリ制作

現時点で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を読み込ませる

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

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側に送られます。

確認できましたか?

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アプリ側の背景を変えることができました。

まとめ

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

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

それでは!

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away