アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

Firebaseとアプリカンでリアルタイム通信アプリを作ってみる

2013年にGoogleによって買収されたFirebaseですが、サービスはそのまま継続されており、先日のGoogle I/OではiOS/Android対応が発表されるなどサービスの幅を広げています。

そんなFirebaseが得意としているのはリアルタイム通信の伴うアプリケーションになります。分かりやすい所ではチャットになるかと思います。今回はそんなFirebaseをアプリカンの中で使う方法について紹介します。

f:id:moongift:20150623134342p:plain

必要なもの

Firebaseでアプリを作成する

まず最初にFirebaseにユーザ登録し、管理単位であるアプリを作成します。ユーザ登録誤、管理画面でアプリを登録します。

f:id:moongift:20150623134354p:plain

今回はAPPLICANとして登録しました。

f:id:moongift:20150623134408p:plain

アプリを登録すると専用のURLが作成されます。今回は https://applican.firebaseio.com/ になります。

こちらがFirebaseの管理画面になります。まだデータは何もありません。

f:id:moongift:20150623134418p:plain

アプリカンでアプリを作成する

続いてアプリカンにログインしてプロジェクトを作成します。

f:id:moongift:20150623134426p:plain

ユーザ登録&ログインするとダッシュボードが表示されます。新しいプロジェクトを作成します。

f:id:moongift:20150623134436p:plain

今回はFirebaseというプロジェクト名にしています。

f:id:moongift:20150623134445p:plain

作成されました。

f:id:moongift:20150623134454p:plain

続いて下の方にある各種ライブラリをクリックして、シンプルというベースをダウンロード&解凍します。

HTML/JavaScriptを変更する

ではダウンロードしたHTMLファイルを次のように修正します。まず、FirebaseのJavaScriptファイルを読み込みます。ついでにGoogleがCDN配信しているjQueryも読み込みます。

<script src="https://cdn.firebase.com/js/client/2.1.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

次にbodyタグの内容を変更します。

<body>
  <input type="text" id="message" value="" />
  <div id="messages"></div>
</body>

これで完了です。

次にJavaScriptを書きます。全体像は以下の通りです。

<script>
var myFirebaseRef = new Firebase("https://applican.firebaseio.com/");

var onDeviceReady = function () {
  $("#message").on("keyup", function(e) {
    if (e.keyCode == 13) {
      myFirebaseRef.child('messages').push({
        'message': $(e.target).val()
      });
    }
  });
  myFirebaseRef.child('messages').orderByKey().on("child_added", function(obj) {
    $("#messages").append("<div>"+obj.val().message+"</div>");
  });
};

document.addEventListener("deviceready", onDeviceReady, false);
</script>

まず最初の行はライブラリの読み込みです。引数のURLは作成したアプリによって変わります。

var myFirebaseRef = new Firebase("https://applican.firebaseio.com/");

次にデバイスが準備できた時に呼ばれるイベントを指定します。ここではonDeviceReadyが呼ばれます。

document.addEventListener("deviceready", onDeviceReady, false);

onDeviceReadyではまずメッセージを投稿する処理について書いています。

var onDeviceReady = function () {
  $("#message").on("keyup", function(e) {
    if (e.keyCode == 13) {
      myFirebaseRef.child('messages').push({
        'message': $(e.target).val()
      });
    }
  });
  :
};

keyupイベントを取って、改行であればFirebaseに投稿しています。投稿は以下のコードだけです。

myFirebaseRef.child('messages').push({
  'message': $(e.target).val()
});

これを書くだけでFirebaseにデータが投稿されます。

f:id:moongift:20150623134508p:plain

次に既存のデータを取得する処理です。

var onDeviceReady = function () {
  :
  myFirebaseRef.child('messages').orderByKey().on("child_added", function(obj) {
    $("#messages").append("<div>"+obj.val().message+"</div>");
  });
};

child_addedは新しくデータが追加された時も呼ばれますが、初期表示の時点でも呼び出されます。今回はそれを #messages の中に追加しているだけです。

これで処理は終わりです。

アプリカンシミュレータで実行

HTML/JavaScriptを修正したらZipで圧縮してアプリカンにアップロードします。

f:id:moongift:20150623134521p:plain

web.zipをドラッグ&ドロップでアップロードします。

f:id:moongift:20150623134530p:plain

完了したらアプリカンシミュレータで確認します。iOS版Android版がありますので、必要な方をダウンロード&インストールしてください。

そしてアプリカンシミュレータを起動して、予め登録してあるユーザID/パスワードでログインします。そうすると作成したプロジェクトが一覧表示されますので、今回作ったFirebaseアプリを実行してみましょう。

左側はデスクトップ、右側はiPhoneでの表示です。iPhone側で入力した結果がデスクトップ側にもリアルタイムに反映されているのが分かるはずです。

f:id:moongift:20150623134540g:plain


Firebaseと組み合わせることでデスクトップやスマートフォンとリアルタイムで通信できるアプリが簡単に作成できます。チャットはもちろん、リアルタイムコラボレーション機能を提供したい時にもぜひ使ってみてください。

アプリカン | アプリ開発支援プラットフォーム