リアルタイムなToDoアプリをMilkcocoaとJavaScriptで作る(基本編)

Posted: / Tags: JavaScript



複数回に分けてToDoアプリを題材に、Milkcocoaの使い方を紹介します(シンプルにするため、機能は「ToDoを追加する」だけにします)。最終的にはチームでToDoを共有できる、プライベートなToDoアプリを作成します。

以下の流れで行います。

  1. データを保存しないToDoアプリを作る(今回)
  2. Milkcocoaでデータを保存&リアルタイムに編集する(今回)
  3. 認証機能利用の準備をする(次回以降)
  4. 自分だけしか編集できないようにする(次回以降)
  5. チームだけしか編集できないようにする(次回以降)

データを保存しないToDoアプリを作る

まず、データを保存せずに、「追加」ボタンを押すと入力した内容が表示されるだけのアプリを作成します。フレームワークは使用せずに作ります。

HTMLを用意する

まず、index.htmlを用意しましょう。

<div>
    <div>
        <input id="new_content" type="text" />
        <button id="create_btn">追加</button>
    </div>
    <div id="todos">
    </div>
</div>

JavaScriptを書く

次に、「追加」ボタンを押すと入力した内容を表示するJavaScriptを書きます。

(function(global){
    global.onload = onload;
    function onload() {
        var new_content = document.getElementById('new_content');
        var create_button = document.getElementById('create_btn');
        var todos = document.getElementById('todos');
        create_button.addEventListener('click', function(e) {
            var element = document.createElement('div');
            element.textContent = new_content.value;
            todos.appendChild(element);
            new_content.value = '';
        });
    }
}(window))

ここまでのソースコード一式はこちらです。

Milkcocoaでデータを保存&リアルタイムに編集する

次にMilkcocoaを使って「データの保存」と「リアルタイム編集」を以下の流れで、実装します。

  • dataStoreメソッドで、データストアを用意
  • streamメソッドで、ロード時にデータストア内のToDoデータの取得
  • pushメソッドで、データストアへToDoを追加
  • onメソッドで、データストアへのToDo追加の監視

Milkcocoaを利用する前に、少しソースコードをリファクタリングします。「受け取ったToDoをレンダリングする」は何度も使うので、関数化しておきます。

function render_todo(todo) {
    var element = document.createElement('div');
    element.textContent = todo.content;
  // todo.contentとなっているのは、pushメソッドでデータのkey名を'content'にしたためです
    todos.appendChild(element);
}

dataStoreメソッドで、データストアを用意

では、Milkcocoaを使い始めます。

Milkcocoaに登録していない方は、Milkcocoaで登録をして、アプリの管理画面のapp idを控えておいてください。

Milkcocoaインスタンス(メソッドを呼び出すための変数)を作成した後、dataStoreメソッドを使ってデータを保存するデータストアを作成します。

var milkcocoa = new Milkcocoa('your-app-id.mlkcca.com');
var todoDataStore = milkcocoa.dataStore('todos');

streamメソッドで、ロード時にデータストア内のToDoデータの取得

データストアを用意したら、ToDoデータを取得するコードを書いてロード時に実行するようにします。sort('desc')は「降順に取得」、size(20)は「20個取得する」という意味です。

取得してきたtodoを、render_todo()でレンダリングしています。

todoDataStore.stream().sort('desc').size(20).next(function(err, todos) {
    todos.forEach(function(todo) {
        render_todo(todo.value);
    });
});

pushメソッドで、データストアへToDoを追加

次にデータストアへの追加です。以下のコードで、「追加」ボタンがクリックされたときに、new_contentに書いた内容をデータストアに追加します。(今回は、contentというkey名にしています)。

create_button.addEventListener("click", function(e) {
  todoDataStore.push({
    content : new_content.value
  });
  new_content.value = "";
});

onメソッドで、データストアへのToDo追加の監視

次に、上記の「データストアへの追加」を監視するコードを書きます。onメソッドを使って、pushを監視すると、データストアにデータが追加された瞬間に、render_todoが実行されます。

これでリアルタイムが実現できます。

todoDataStore.on('push', function(pushed) {
    render_todo(pushed.value);
});

ここまでのソースコード一式はこちらです。

次回は認証機能を利用してプライベートなアプリにします

今回は、基本的なリアルタイムアプリの作成方法を紹介しました。ただしこのままでは、誰でも書き込むことができてしまいます。

なので、次回以降は認証機能を利用して「自分のみ」や「特定のチームのみ」が利用可能なToDoアプリにする方法を紹介します。

次回:リアルタイムなToDoアプリをMilkcocoaとJavaScriptで作る(認証編)