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

第2回 Milkcocoaでチャットを作ってBaaSを体験してみよう!

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

前回はBaaSの概要等についてでした。今回からMilkcocoaを触って行きましょう。MilkcocoaでAppを作成し,そのAppを利用して簡単なチャットアプリケーションを作ってみましょう。

Milkcocoa入門

まずMilkcocoaでAppを作成し,クライアントライブラリを利用し,リアルタイム通信を試してみましょう。

最初にMilkcocoaのアカウントを取得してAppIDを手に入れます。その次に適当なHTMLとJSファイルを作成し,Milkcocoaクライアントコードを試して,リアルタイム通信の仕組みを体感してみましょう。

Milkcocoaの新規登録,ログイン

milkcocoaサイトトップの上部にあるボタンより,新規登録してログインすることができます。

図1 新規登録してログイン

図1 新規登録してログイン

Appリスト画面にて,Appの作成

アカウントを新規作成してログインしたら,次の画面になるはずです。これはユーザが作成したAppの一覧,作成,削除画面です。ここからAppを作成してみましょう。

図2 ユーザが作成したAppの一覧,作成,削除画面

図2 ユーザが作成したAppの一覧,作成,削除画面

作成したAppをクリックすると,そのApp管理画面に遷移します。

App管理画面でAppIDを取得

ここでAppの状態を管理します。この管理画面の詳細な使い方は,後ほど詳しく説明します。

図3 App管理画面

図3 App管理画面

ここで書かれているscriptタグとJSが見えますでしょうか? これをHTMLとJSのコードに追記すれば,MilkcocoaのBaaSの体験を始めることができます!

はじめのHTMLとJS

最初は簡単なマークアップをしておきましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>はじめのMilkcocoa</title>
</head>
<body>
    <script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
    <script src="main.js"></script>
</body>
</html>

main.js

var milkcocoa = new MilkCocoa("https://<<app-id>>.mlkcca.com");

ここまで書いたらindex.htmlをブラウザで開きましょう。そのコンソール(Chromeだったらデベロッパーコンソール)connectedと表示されていたら,Appとコネクションが張られています。

図4 コンソールにconnectedと表示されていたらAppとコネクションが張られている

図4 コンソールに“connected”と表示されていたらAppとコネクションが張られている

著者プロフィール

花田恒一(はなだのぶかず)

株式会社Technical Rockstars CTO

グラフィカル言語Flowerや,BaaSサービスであるMilkcocoaを開発。Lisper。言語オタクであり,様々な言語開発経験がある。特に好きな言語はLisp(Shen)である。最近ではUXDに関心があり,福岡のUXコミュニティに積極的に参加している。

Twitter:@nobkz

コメント

コメントの記入