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

第9回 React.jsとmilkcocoa.jsでTwitterのリプライ通知を作ろう!

この記事を読むのに必要な時間:およそ 4 分

今回の目的

実践的なBaaSの利用法を学ぼう!

やること

React.jsとmilkcocoa.jsでTwitterライクなリプライ通知機能を実装してみます。

準備するもの

  1. reactmilk-tutorialをローカルに持ってきてください。
  2. (4月30日以前に記事を読んだ方)Firebaseのアカウントを作って,appを1つ作成してください(MilkcocoaがMQTT対応でメンテナンス中のため)⁠
  3. (5月1日以降に記事を読んだ方)Milkcocoaのアカウントを作って,appを1つ作成してください。

コードを読むだけで理解できる方は以下を読み進める必要はありませんが,順を追ってReactの使い方とBaaSの使い方の解説を入れて行きます。

手順

Reactの動作確認

gulpの準備

npm i gulp gulp-webserverしてください。

Reactの動作環境を作る
  <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react.js"></script>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>

  <script src="jsx/main.jsx" type="text/jsx;harmony=true"></script>

react本体とjsxコンパイラはcdnでホスティングされているので,練習にはそれを使いましょう。.jsxファイルを読み込んで,typeとしてtext/jsx;harmony=trueを付けましょう。これで実行時にES6とJSXを利用可能な状態として実行時に処理してくれます。

Milkcocoaの動作確認

Milkcocoaはちょうどメンテナンス期間で5月1日まで新規アプリケーションの作成を停止しているので,今日のところは筆者が作ったOSSのMilkcocoa互換インターフェースを使いましょう。

  <script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>

  <script src="https://cdn.pubnub.com/pubnub-dev.js"></script>
  <script src="lib/milkcocoa.js"></script>
  <script src="lib/load-milkcocoa.js"></script>

PubNubとFirebaseを無理矢理ひっつけて作ったので,ところどころ動作が不安定かもしれません。

すぐに本家Milkcocoaは復活するので,load-milkcocoa.jsの記述を書き換えてあげましょう。

load-milkcocoa.js

(function(global){
  var milkcocoa = new MilkCocoa("psuedo-twitter", 
"pub-c-3110c846-acee-4a93-b334-605c31524237", 
"sub-c-8472c902-d950-11e4-895c-02ee2ddab7fe");
  global.milkcocoa = milkcocoa;
  return global;
}(window));

著者プロフィール

落合渉悟(おちあいしょうご)

株式会社Technical Rockstars所属。スタートアップにおける高速開発の研究を行っている。現在,JavaScriptと3Dコンテンツに関する技術書を執筆中。

コメント

コメントの記入