前回はBaaSの概要等についてでした。今回からMilkcocoaを触って行きましょう。MilkcocoaでAppを作成し、そのAppを利用して簡単なチャットアプリケーションを作ってみましょう。
Milkcocoa入門
まずMilkcocoaでAppを作成し、クライアントライブラリを利用し、リアルタイム通信を試してみましょう。
最初にMilkcocoaのアカウントを取得してAppIDを手に入れます。その次に適当なHTMLとJSファイルを作成し、Milkcocoaクライアントコードを試して、リアルタイム通信の仕組みを体感してみましょう。
Milkcocoaの新規登録、ログイン
milkcocoaサイトトップの上部にあるボタンより、新規登録してログインすることができます。
Appリスト画面にて、Appの作成
アカウントを新規作成してログインしたら、次の画面になるはずです。これはユーザが作成したAppの一覧、作成、削除画面です。ここからAppを作成してみましょう。
作成したAppをクリックすると、そのApp管理画面に遷移します。
App管理画面でAppIDを取得
ここでAppの状態を管理します。この管理画面の詳細な使い方は、後ほど詳しく説明します。
ここで書かれているscriptタグとJSが見えますでしょうか? これをHTMLとJSのコードに追記すれば、MilkcocoaのBaaSの体験を始めることができます!
はじめのHTMLとJS
最初は簡単なマークアップをしておきましょう。
ここまで書いたらindex.htmlをブラウザで開きましょう。そのコンソール(Chromeだったらデベロッパーコンソール)に“connected”と表示されていたら、Appとコネクションが張られています。
DataStore.pushとDataStore.onメソッドを試す
一旦ここで、簡単にリアルタイムな通信を試してみましょう。index.htmlとmain.jsに次のコードを追記してください。
簡単にコードを解説すると、milkcocoa.DataStore("helloworld")で「データストア」と言うものを作っています。これはMilkcocoaのApp側にデータを永続化させる場所です。
dataStore.pushメソッドにより、データストアにデータが正しく保存されます。dataStore.on("push", <コールバック関数>)により、自分のブラウザ上でも他人のブラウザ上でも、dataStore.pushが呼ばれたときに<コールバック関数>を実行します。
さて、ウィンドウを分割してリアルタイム通信を試してみましょう。片方の「push!」ボタンを押すと、両方のブラウザでdataStore.onメソッドが実行されていることがわかるはずです。
管理画面でデータストアに保存されたデータを確認する
管理画面に戻り、データストアの状況を確認してみましょう。管理画面のサイドバーの「データストア」を選択すると、pushされたデータが確認できます。
データストアが確認できない場合は、リロードしてもう一度試してみてください。
Milkcocoaを利用してチャットアプリケーションを作成する
ここでMilkcocoaのリアルタイム通信の機能を利用して、簡単なチャットアプリケーションを作成してみましょう。
流れとしては、まずレイアウトをHTMLで書き、それに合わせて動的DOM生成のJSコードを書いてオフラインのチャットUIを構築し、その後Milkcocoaでリアルタイム通信を埋め込み、チャットアプリケーションを完成させていきます。
チャットのレイアウトHTMLを作る
簡単にチャットのレイアウトのHTMLを書きましょう。
一旦ブラウザでレイアウトHTMLを表示してみましょう。
このレイアウトをJSのDOMで動的に生成すれば良いのです。
オフラインで動くように実装する
まずオフラインで動くように実装します。chat.htmlで、静的DOMを生成するHTMLを作成します。
offline-chat.jsのファイルを作りを編集しておきましょう。
これでオフラインで動くように実装しました。ただし、後でリアルタイム通信の挙動を実装するために、今後通信するであろうところのコードを分離しました。pushMessage関数がそれです。リアルタイムな実装をするときは、この部分を修正すれば良いだけです。
Milkcocoaでリアルタイム通信を実装して、チャットアプリケーションを完成させる
Milkcocoaのクライアントライブラリを使ってチャットを完成させましょう。先程のpushMessage関数を修正すれば良いだけです。
chat.jsを実装する前に、milkcocoaのクライアントライブラリのスクリプトを埋めこみましょう。
これで実装していきましょう。
pushMessageの内部で、messageがpushされます。またdataStore.onのメソッドで、データストアのpushイベントを監視しているため、pushされたときにonMessageを呼び出しています。
これでチャットアプリケーションの完成です! 実際にチャットを動作させてみましょう!
チャットに機能を増やす
まだまだチャットには機能が足りてないかもしれません。チャットアプリケーションの、たとえば投稿者名の表示、ブラウザ起動時に以前の会話を表示する機能、などいろいろあります。これらはMilkcocoaの他のライブラリ関数を使ったり、もしくは単純にローカルな実装で済むこともあります。この点については皆さんの課題としましょう。ぜひ皆さんでいろいろな拡張を考えて、実装してみてください。
第2回まとめ
今回はまず、Milkcocoaのリアルタイム通信を体験し、簡単にチャットアプリケーションが実装できることが実感できたと思います。そしてMilkcocoaを使い、まずGUIの実装をし、その後にMilkcocoaでリアルタイム通信を実装する流れを説明しました。