「AngularJS」と「milkcocoa」で、簡単なチャットアプリを作ってみた！

公開日：2015/05/18

AngularJSの勉強を兼ねて、サーバーやデータベース系を気にせず「チャット」などのサービスを素早く構築できる「milkcocoa」を使ってみました。

こういう「バックエンド系」をサポートしてくれるサービスはいくつかあるのですが、やはり非常に便利ですね。
特にプロトタイプを作る際には、今後も積極的に活用していきたいところ…。

事前準備！

今回は、簡易的な「チャットアプリ」を作ってみようと思います。

まずは、milkcocoaを利用するために、無料のユーザー登録をしてから「アプリ作成ボタン」をクリックします！

（アプリ名は好きな名称でOK…）

　
作成したアプリの管理画面にある「コード」を、HTMLとJavaScriptファイルへそれぞれコピペします！

　
そして、AngularJSの初期設定も含めて、まずはこんな感じの初期ファイルが用意できたら、準備はOKです！

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>チャットサンプル</title>
    <script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
    <script src="chat.js"></script>
  </head>
  <body ng-app="chatApp">
    <div ng-conttoller="chatCtrl">
    </div>
  </body>
</html>

chat.js

angular.module("chatApp", [])
.controller("chatCtrl", function($scope){
  var milkcocoa = new MilkCocoa("apple??????.mlkcca.com");
});

あとは、AngularJSで作るコントローラー「chatCtrl」内で、ごにょごにょと処理を書いていこうと思います。

「milkcocoa」の機能を使う！

今回作るのは、あくまで簡易的なモノなので、「ユーザー名」と「メッセージ」を入力して送信するだけのシンプルなカタチにしようと思います。

同じURLにアクセスすれば、不特定多数の人とシンプルなチャットが出来ます。

ちなみに、メッセージデータはすべて自分のmilkcocoa上に保存されていき、いつでも管理画面が閲覧&編集が出来るようになっています。

　
それでは、まずHTMLを編集して「見た目」を作りましょう。

index.html

<body ng-app="myMilkApp">
　<div ng-controller="milkCtrl">
　　<input type="text" size="10" ng-model="user" placeholder="ユーザー名"><br/>
　　<input type="text" size="30" ng-model="msg" placeholder="メッセージを入力">
　　<button name="button" ng-click="sendMes()">送信</button>
　　<ul ng-repeat="msgbox in msgBoxes">
　　　<li>
　　　　{{msgbox.value.name}}: {{msgbox.value.text}}

　　　　<button ng-click="deleteMes($index)">削除</button>
　　　</li>
　　</ul>
　</div>
</body>

AngularJSで作ったモデル「user」と「msg」へ、入力したテキストをそれぞれ保管して「milkcocoa」にデータを送るようにします。

そして、「milkcocoa」から読みだしたデータは、「msgBoxes」にすべて入れておき「ng-repeat」で1つずつ表示するカタチにしました。

　
肝心のJSファイルですが、すでに以下のコードで「milkcocoa」が使えるようになっています。

var milkcocoa = new MilkCocoa("apple?????.mlkcca.com");

　
あとは、利用するデータベース名を指定する必要があります。

var myApp = milkcocoa.dataStore('ng-test');

これにより、「myApp」変数を使うことで、さまざまな「milkcocoa」コマンドが利用できたり、データを保存することが出来るようになります。

　
例えば、「milkcocoa」上に保存されているデータを読み出すには「stream」コマンドを使えば簡単です。

myApp.stream().next(function(err, data){});

この「data」の中に、保存されたデータがすべて入っているので、これを「msgBoxes」に入れることで、AngularJSからコントロールできるようになります。

chat.js

angular.module('myMilkApp', [])
.controller('milkCtrl', function($scope){
  var milkcocoa = new MilkCocoa("applei9jgtmjv.mlkcca.com");
  $scope.myApp = milkcocoa.dataStore('ng-test');
 
  $scope.readMes = function(){
    $scope.myApp.stream().next(function(err, data){
      $scope.msgBoxes = data;
      $scope.$apply();
    });
  }
});

「readMes」という関数を作り、これを呼び出すことで「milkcocoa」からデータを「msgBoxes」へ入れるようにしています。

また、重要なのは「$apply()」というAngularJSコマンド…。

これを書いておかないと、即座にデータが反映されません。これは、外部ライブラリである「milkcocoa」を利用して、$scopeの値を変更しようとしても変更できないというAngularJSの仕様によるものです。

　
また、「milkcocoa」では任意のタイミングで情報を更新できる「on」コマンドが用意されています。

これを利用すると、例えば何らかのデータを送信したタイミングで情報を更新したり、データを削除したタイミングで更新するという事が可能です。

つまり、

$scope.myApp.on('push', function(event){
    $scope.readMes();
});

とすれば、メッセージを送信(push)したタイミングで、「readMes」関数を呼び出すことが出来ます。

これだけで、メッセージを送信した直後に、入力したテキストが画面にすぐ表示される仕組みを作ることが出来るわけです。

　
最後に、「milkcocoa」へデータを送信するには「push」コマンドを利用します。

$scope.sendMes = function(){
    $scope.myApp.push({name: $scope.user, text: $scope.msg});
}

HTMLに記載したモデル「user」と「msg」のテキストを、そのまま「milkcocoa」へ送信するようになっています。
簡単ですね…。

　
最終的に、JSファイルは以下のようになります。

chat.js

angular.module('myMilkApp', [])
.controller('milkCtrl', function($scope){
  var milkcocoa = new MilkCocoa("applei9jgtmjv.mlkcca.com");
  $scope.myApp = milkcocoa.dataStore('ng-test');
  $scope.user = "";
  $scope.msgBoxes = "";
 
  $scope.readMes = function(){
    $scope.myApp.stream().next(function(err, data){
      $scope.msgBoxes = data;
      $scope.$apply();
    });
  }
 
  $scope.sendMes = function(){
    $scope.myApp.push({name: $scope.user, text: $scope.msg});
    $scope.msg = "";
  }
  $scope.deleteMes = function(num){
    $scope.myApp.remove($scope.msgBoxes[num].id);
  }
 
  $scope.myApp.on('push', function(event){
    $scope.readMes();
  });
 
  $scope.myApp.on('remove', function(event){
    $scope.readMes();
  });
});

データの削除に関しては、「remove」コマンドを利用して、「ng-repeat」の$index番号を使って個別の「id」を特定しています。

まとめ

「milkcocoa」を利用すれば、サーバーの知識やデータベースの構築といった面倒な作業をすべて丸投げできるのが魅力です。

無料プランでも充分使えますが、同時接続数が20なので「プロトタイプ作り」として使うのが良いでしょう。

今回は、AngularJSを利用しましたが、他の多彩なフレームワークとの相性も良さそうです。

手軽にバックエンドを利用する選択肢としては、なかなか良いのではないでしょうか…。

（参考）
「milkcocoa」公式サイト
「AngularJS」公式サイト

うえぶまなぶ