MilkcocoaでBaaSを体験!~バックエンドの仕組みと使い方~

第6回 iOS(Swift)でも簡単リアルタイム通信! Milkcocoa iOS SDKを使ってみよう!

この記事を読むのに必要な時間:およそ 5.5 分

iOSアプリの色をWebから制御してみる

少し応用的な処理をしてみたいと思います。見た目でリアルタイム通信を感じられるようにiOSアプリケーションの画面の色をWebから操作してみます。

Web側の実装

先ほど作成したapp.htmlを微修正します。

app.html

01:<!doctype html>
02:<html lang="ja">
03:<head>
04:    <meta charset="UTF-8">
05:    <title>simple chat!</title>
06:    <script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
07:    <script>
08:
09:        var milkcocoa = new MilkCocoa("https://io-xxxxxx.mlkcca.com/");
10:        var iosDS = milkcocoa.dataStore('ios');
11:
12:        function clickEvent(color){
13:            iosDS.send({
14:                msg:'hello! iOS! I am JS',
15:                color: color
16:            });
17:        }
18:
19:        iosDS.on('send',function(data){
20:            console.log('receive:',data.value.msg);
21:        });
22:    </script>
23:</head>
24:<body>
25:
26:<button name="button" onClick="clickEvent('red')">red</button>
27:<button name="button" onClick="clickEvent('green')">green</button>
28:<button name="button" onClick="clickEvent('yellow')">yellow</button>
29:
30:</body>
31:</html>

最初のapp.htmlから変更した部分の解説をします。

  • 12~17行目:clickEvent()が実行されたら引数であるcolorの値をsendメソッドcolorというキー名で送信しています。
  • 26~29行目:red,green,yellowのそれぞれの色を送るためのボタンを3つ設置します。

このような感じで3つのボタンが表示されるページが出来ます。

図19 3つのボタンが表示されるページ

図19 3つのボタンが表示されるページ

iOS側の実装

こちらも先ほどのViewController.swiftを修正します。

ViewController.swift

01:import UIKit
02:import Milkcocoa
03:
04:class ViewController: UIViewController {
05:    let milkcocoa = Milkcocoa(url:"https://io-ci1s1iu9p.mlkcca.com")
06:
07:    override func viewDidLoad() {
08:        super.viewDidLoad()
09:        let dataStore = milkcocoa.dataStore("ios")
10:
11:        dataStore.on("send", { data in
12:            println(data.value["msg"].asString!)
13:            //送信された色によって背景色を変更する
14:            var color = data.value["color"].asString!
15:            if color == "red" {
16:                self.view.backgroundColor = UIColor.redColor()
17:            }else if color == "green"{
18:                self.view.backgroundColor = UIColor.greenColor()
19:            }else if color == "yellow"{
20:                self.view.backgroundColor = UIColor.yellowColor()
21:            }else if color == "white"{
22:                self.view.backgroundColor = UIColor.whiteColor()
23:            }
24:        })
25:
26:        dataStore.send(["msg":"hello! JS! I am iOS","color":"white"])
27:    }
28:
29:    override func didReceiveMemoryWarning() {
30:        super.didReceiveMemoryWarning()
31:    }
32:
33:}

if文などが入ってきますが,SwiftのコードはJavaScriptなどに文法が似ているので読むことは可能だと思います。

  • 14~23行目:sendイベントで受信したcolorの値によって背景色を変更しています。
  • 26行目:アプリケーション起動時にsendメソッドを実行しますが,その際にcolorの値としてwhiteを送信しています。

実行して確認

先ほどと同じようにiOSアプリケーションをエミュレータでビルドしましょう。その状態でWebページ上の色のボタンを押すとiOSアプリケーションの画面色がリアルタイムに変化するのが分かると思います。

図20 Webページ上の色のボタンを押すとiOSアプリケーションの画面色がリアルタイムに変化する(サムネイルでは表示が崩れます。ご了承ください。)

図20 Webページ上の色のボタンを押すとiOSアプリケーションの画面色がリアルタイムに変化する

実機でのアプリケーション実行の仕方は今回は紹介していませんが,実機でもちゃんと動作します。

図21 実機でも動作する(サムネイルでは表示が崩れます。ご了承ください。)

図21 実機でも動作する

まとめ

このような感じでMilkcocoaを使うことでiOSとWebの連携をカンタンにすることができました。

Webエンジニアである筆者にとって,iOSとWebの連携は当初は凄く難しいイメージがあったのですが,Milkcocoaはその敷居を格段に下げてくれました。Milkcocoaを初めて触って数分でWebチャットアプリを作ったときにも感じましたが,やはりシンプルで分かり易いというのはライブラリやサービスでは重要な要素だと思います。

説明が無くても直感的に分かるシンプルさが筆者がMilkcocoaが好きな理由です。それと,ユーザへの対応も丁寧にしてくれるという点もあり,凄く応援しています。

最後になりますがiOS SDKは開発途中なので,興味のある方はcontact AT mlkcca.com(⁠⁠AT」「@」に変更)まで連絡をよろしくお願いします。また,情報が少ないと思いますので,FacebookでMilkcocoaのユーザーグループがありますのでこちらで質問などを投げかけると答えが見つかりやすくなるかもしれません。

著者プロフィール

菅原のびすけ(すがわらのびすけ)

株式会社LIG エンジニア。1989年生まれ。岩手県立大学在籍時にITベンチャー企業の役員を務める。

同大学院を卒業後,株式会社LIGにWebエンジニアとして入社し,Web制作に携わる。

最近は特にIoT領域,インタラクティブな企画実装などに従事している。

マッシュアップアワードを始めとしたハッカソン等で入賞歴あり。

家賃0円クリエイターズシェアハウス第1期生。ジーズアカデミー第1期メンター。

LIGinc,HTML5Experts.jp,さくらのナレッジ,gihyo.jpなどでも執筆・寄稿をしている。

Milkcocoaエバンジェリスト,特技はわんこそば,趣味は雪合戦。

Twitter:@n0bisuke

LIGincプロフィール:http://liginc.co.jp/member/member_detail?user=nobisuke