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

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

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

SwiftとMilkcocoaのHello World

それでは実際に作って行きたいと思います。前回までと同様にio-xxxxxxxというMilkcocoaのアプリIDを取得しておきましょう。

SDKの確認

株式会社テクニカルロックスターズに連絡をするとMilkcocoa.frameworkというiOS向けのライブラリが提供されます。

図6 Milkcocoa.frameworkというiOS向けのライブラリが提供される

図6 Milkcocoa.frameworkというiOS向けのライブラリが提供される

このファイルがMilkcocoa iOS SDKのコアになりますので,大事に保管しましょう。

Web側の実装

まずはWeb側を作って行きたいと思います。io-xxxxxxとなっているアプリIDの部分だけ各々のものに書き換えてください。

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:        var milkcocoa = new MilkCocoa("https://io-xxxxxx.mlkcca.com/");
09:        var iosDS = milkcocoa.dataStore('ios');
10:
11:        function clickEvent(){
12:            iosDS.send({msg:'hello! iOS! I am JS'});
13:        }
14:
15:        iosDS.on('send',function(data){
16:            console.log('receive:',data.value.msg);
17:        });
18:    </script>
19:</head>
20:<body>
21:    <button name="button" onClick="clickEvent()">send!</button>
22:</body>
23:</html>

基本的に今までのMilkcocoaの説明と同様です。Milkcocaのメソッドの詳細はドキュメントをご確認ください。

  • 6行目:MilkcocoaのSDKをcdnから読み込みます。
  • 8行目:Milkcocoaアプリケーションに接続します。
  • 9行目:iosというデータストアにアクセスします。
  • 11~13行目:iosデータストアに対してsendメソッドを実行するclickEvent()を設定します。
  • 15~17行目:iosデータストアに対するsendイベントonメソッドで監視します。sendメソッドが実行されたタイミングで16行目が実行されます。
  • 21行目:clickEvent()を発火するボタンを設置します。

画面的にはsend!とだけ書かれたwebページになります。

図7 ⁠send!」とだけ書かれたwebページ

図7 「send!」とだけ書かれたwebページ

コンソールにconnectedと表示されていればMilkcocoaとの接続に成功しています。

図8 ⁠connected」と表示されていればMilkcocoaに接続されている

図8 「connected」と表示されていればMilkcocoaに接続されている

iOS側(Swift)の実装

Milkcocoa.frameworkの読み込み準備

Xcodeのプロジェクトの設定でBuild Phases⁠左上の)New Copy Files PhaseCopy Filesの項目を表示させます(環境によってはデフォルトでCopy Filesの項目が表示されている場合もあるかもしれません⁠⁠。

図9 順に項目を選択する(サムネイルでは表示が崩れます。ご了承ください。)

図9 順に項目を選択する

Copy Filesの部分にMilkcocoa.frameworkをドラッグ&ドロップ(または)で追加します。モーダルが表示されるので,Copy items if neededにチェックを入れてFinishを選択します。

また,Destinationの項目はFrameworksにしておきます。

図10 順に設定する(サムネイルでは表示が崩れます。ご了承ください。)

図10 順に設定する

Copy items if neededのチェックを入れることでプロジェクトのフォルダ内にもMilkcocoa.frameworkのファイルがコピーされます。

図11 読み込み前

図11 読み込み前

図12 読み込み後

図12 読み込み後

左側のフォルダツリーにMilkcocoa.frameworkが表示されていることを確認しましょう。

図13 ⁠Milkcocoa.framework」が表示されていることを確認

図13 「Milkcocoa.framework」が表示されていることを確認

この左側のフォルダツリーに表示されているMilkcocoa.frameworkをドラッグ&ドロップでLink Binary With Librariesに追加します。

図14 ⁠Milkcocoa.framework」をドラッグ&ドロップで「Link Binary With Libraries」に追加(サムネイルでは表示が崩れます。ご了承ください。)

図14 「Milkcocoa.framework」をドラッグ&ドロップで「Link Binary With Libraries」に追加

これでライブラリを読み込む準備が整いました。

著者プロフィール

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

株式会社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