始めに
AdventCalenderに初めて参加します。Swiftカレンダーの先陣を切らせて頂きます。普段は台東区のWeb制作に務めていて、アプリは全くやったことが無いです。Swiftはまだまだ初心者ですがよろしくお願いします。
Milkcocoa
BaaSサービスの１つです。
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イベントが送信されるものを作ります。
<!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を読み込ませる
もうすぐ公開されます!!
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側は色の名前を送れるようにします。
<!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()
このような形で指定します。
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
それでは!