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

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

Milkcocoa入門

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

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

Milkcocoaの新規登録、ログイン

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

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

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

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

App管理画面でAppIDを取得

ここで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とコネクションが張られています。

DataStore.pushとDataStore.onメソッドを試す

一旦ここで、簡単にリアルタイムな通信を試してみましょう。index.htmlとmain.jsに次のコードを追記してください。

index.html

<body>
    <button id="btn">push!</button>
    <script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
    <script src="main.js"></script>
</body>

main.js

var dataStore = milkcocoa.DataStore("helloworld");

document.getElementById("btn").onclick = function(e){ 
    dataStore.push({ message : "Hello " });
}

dataStore.on("push",function(d){
    console.log( d.value.message + "World!" );
});

簡単にコードを解説すると、milkcocoa.DataStore("helloworld")で「データストア」と言うものを作っています。これはMilkcocoaのApp側にデータを永続化させる場所です。

dataStore.pushメソッドにより、データストアにデータが正しく保存されます。dataStore.on("push", ＜コールバック関数＞)により、自分のブラウザ上でも他人のブラウザ上でも、dataStore.pushが呼ばれたときに＜コールバック関数＞を実行します。

さて、ウィンドウを分割してリアルタイム通信を試してみましょう。片方の「push!」ボタンを押すと、両方のブラウザでdataStore.onメソッドが実行されていることがわかるはずです。

管理画面でデータストアに保存されたデータを確認する

管理画面に戻り、データストアの状況を確認してみましょう。管理画面のサイドバーの「データストア」を選択すると、pushされたデータが確認できます。

データストアが確認できない場合は、リロードしてもう一度試してみてください。

Milkcocoaを利用してチャットアプリケーションを作成する

ここでMilkcocoaのリアルタイム通信の機能を利用して、簡単なチャットアプリケーションを作成してみましょう。

流れとしては、まずレイアウトをHTMLで書き、それに合わせて動的DOM生成のJSコードを書いてオフラインのチャットUIを構築し、その後Milkcocoaでリアルタイム通信を埋め込み、チャットアプリケーションを完成させていきます。

チャットのレイアウトHTMLを作る

簡単にチャットのレイアウトのHTMLを書きましょう。

layout.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MilkcocoaでChat!</title>
</head>
<body>
    <input id="text" type="text">
    <button id="button">送信!</button>
    <div id="borad"></div>
        <div>
            <p>こんにちは!</p>
        </div>
        <div>
            <p>どうもはじめまして!</p>
        </div>
        <div>
            <p>やぁやぁ</p>
        </div>
        <div>
            <p>どもども</p>
        </div>
    </div>
</body>
</html>

一旦ブラウザでレイアウトHTMLを表示してみましょう。

このレイアウトをJSのDOMで動的に生成すれば良いのです。

オフラインで動くように実装する

まずオフラインで動くように実装します。chat.htmlで、静的DOMを生成するHTMLを作成します。

chat.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MilkcocoaでChat!</title>
</head>
<body>
    <input id="text" type="text">
    <button id="button">送信!</button>
    <div id="board"></div>
    
    <script src="offline-chat.js"></script>
</body>
</html>

offline-chat.jsのファイルを作りを編集しておきましょう。

offline-chat.js

(function(){
    var input = document.getElementById("text");
    var btn =  document.getElementById("button");
    var messageBoard = document.getElementById("board");

    // DOM構築のための、簡易関数
    function Elm(name,children){
        var elm = document.createElement(name);
        for(var i in children ){
            elm.appendChild(children[i]);
        }
        return elm;
    }

    function Text(nodeValue){
       return document.createTextNode(nodeValue);
    }


    // クリックした時に呼び出される関数
    function onClick(event){
        var chatText = input.value;
        pushMessage(chatText);
    }

    // 通信のスタブ
    function pushMessage(chatText){
        onMessage(chatText);
    }

    // メッセージが受信した時に呼び出される関数
    function onMessage(chatText){
        var messageElement = 
            Elm("div",[
                Elm("p",[Text(chatText)])
            ]);
        messageBoard.appendChild(messageElement);
    }

    btn.onclick = onClick;
}());

これでオフラインで動くように実装しました。ただし、後でリアルタイム通信の挙動を実装するために、今後通信するであろうところのコードを分離しました。pushMessage関数がそれです。リアルタイムな実装をするときは、この部分を修正すれば良いだけです。

Milkcocoaでリアルタイム通信を実装して、チャットアプリケーションを完成させる

Milkcocoaのクライアントライブラリを使ってチャットを完成させましょう。先程のpushMessage関数を修正すれば良いだけです。

chat.jsを実装する前に、milkcocoaのクライアントライブラリのスクリプトを埋めこみましょう。

chat.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>MilkcocoaでChat!</title>
</head>
<body>
    <input id="text" type="text">
    <button id="button">送信!</button>
    <div id="board"></div>
    
    <script src="http://cdn.mlkcca.com/v0.2.8/milkcocoa.js"></script>
    <script src="chat.js"></script>
</body>
</html>

これで実装していきましょう。

chat.js

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

    var input = document.getElementById("text");
    var btn =  document.getElementById("button");
    var messageBoard = document.getElementById("board");

    // DOM構築のための、簡易関数
    function Elm(name,children){
        var elm = document.createElement(name);
        for(var i in children ){
            elm.appendChild(children[i]);
        }
        return elm;
    }

    function Text(nodeValue){
       return document.createTextNode(nodeValue);
    }


    // クリックした時に呼び出される関数
    function onClick(event){
        var chatText = input.value;
        pushMessage(chatText);
    }

    // 通信のスタブ
    function pushMessage(chatText){
        dataStore.push({ message : chatText })
    }

    dataStore.on("push",function(d){
        onMessage(d.value.message);
    });

    // メッセージが受信した時に呼び出される関数
    function onMessage(chatText){
        var messageElement = 
            Elm("div",[
                Elm("p",[Text(chatText)])
            ]);
        messageBoard.appendChild(messageElement);
    }

    btn.onclick = onClick;
}());

pushMessageの内部で、messageがpushされます。またdataStore.onのメソッドで、データストアのpushイベントを監視しているため、pushされたときにonMessageを呼び出しています。

これでチャットアプリケーションの完成です！　実際にチャットを動作させてみましょう！

チャットに機能を増やす

まだまだチャットには機能が足りてないかもしれません。チャットアプリケーションの、たとえば投稿者名の表示、ブラウザ起動時に以前の会話を表示する機能、などいろいろあります。これらはMilkcocoaの他のライブラリ関数を使ったり、もしくは単純にローカルな実装で済むこともあります。この点については皆さんの課題としましょう。ぜひ皆さんでいろいろな拡張を考えて、実装してみてください。

第2回まとめ

今回はまず、Milkcocoaのリアルタイム通信を体験し、簡単にチャットアプリケーションが実装できることが実感できたと思います。そしてMilkcocoaを使い、まずGUIの実装をし、その後にMilkcocoaでリアルタイム通信を実装する流れを説明しました。