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

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

前回は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とコネクションが張られている

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メソッドが実行されていることがわかるはずです。

図5 リアルタイム通信を試す
図5 リアルタイム通信を試す

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

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

図6 ⁠データストア」を選択すると、pushされたデータが確認できる
図6 「データストア」を選択すると、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を表示してみましょう。

図7 ブラウザでレイアウトHTMLを表示
図7 ブラウザでレイアウト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を呼び出しています。

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

図8 実際にチャットを動作させてみる
図8 実際にチャットを動作させてみる

チャットに機能を増やす

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

第2回まとめ

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

おすすめ記事

記事・ニュース一覧