milkcocoaで簡単にチャットアプリを作ってみる

スポンサーリンク

f:id:tasukujp:20141124160544p:plain

先日存在を知ったmilkcocoaを試してみましたので、使い方などをまとめておきます。チュートリアル見れば誰でも出来るくらい簡単なんですけどね。

アカウント作成

まずはアカウントの作成を行ないます。新規登録ボタンをクリックします。

f:id:tasukujp:20141124161947p:plain

アカウント作成をしたら確認メールが届きますので、メール内のリンクをクリックして登録を完了させます。

f:id:tasukujp:20141124162020p:plain

ログインボタンをクリックして登録したEmailとPasswordでログインします。

f:id:tasukujp:20141124162142p:plain

ログインできたら完了です。

f:id:tasukujp:20141124162210p:plain

ソースコードの準備

チュートリアルページにある index.html と main.js のコードをコピーして同じフォルダに作成します。

f:id:tasukujp:20141124163824p:plain

管理画面の「新しいアプリを作る」ボタンをクリックし、名前を決めて作成します。

f:id:tasukujp:20141124164745p:plain

作成されたらアプリリストに追加されています。

f:id:tasukujp:20141124164922p:plain

作成したアプリの管理画面に移動し、Javascriptで始めよう欄にあるコードをコピーします。

f:id:tasukujp:20141124165019p:plain

作成していた main.js の var milkcocoa 〜 の行を先程のコードで上書きします。これで完成です。次は実際に試してみます。

f:id:tasukujp:20141124165036p:plain

実際に使ってみる

ブラウザを2つ使って試します。まず左側(Chrome)に文字を入力して送信します。

f:id:tasukujp:20141124170246p:plain

そうすると右側(FireFox)のブラウザにも表示されました。

f:id:tasukujp:20141124170421p:plain

逆のパターンも試してみると

f:id:tasukujp:20141124170506p:plain

こちらも問題なく送信されてます。

f:id:tasukujp:20141124170516p:plain

実際にどのように送信されたか確認するには、アプリ管理画面のデータストアから見れます。

f:id:tasukujp:20141124170539p:plain

最後に

APIリファレンスを見るとまだそんなに機能は多くないですがアカウント管理とかも出来ます。現在はJavaScriptのAPIのみ公開されてますが、iOSやAndroidの対応も近いうちにされるそうです。

JavaScript API Reference | Milkcocoa

バックエンド知らなくてもチャットアプリがこんな簡単にできるってのは結構すごいですよね。HTMLさえ書ければそれなりのものが出来そうです。今後はこういった動きが増えていくのでしょうか。