Google Developers Summit Tokyo 2015 に参加してきました。
最後のセッションで Firebase というリアルタイム・バックエンドサービスが紹介されており、
面白そうだったのでチュートリアルだけやってみた。
（2015/04/23追記）
以下ではサンプルアプリのホスティング先として Google App Engine を使用してますが
Firebase にもホスティングサービスがあるのでそっちを使った方が楽です。
詳しくは
アカウント作成＆アプリケーション登録
Firebase のトップページ にアクセスし、
右上の「SIGN UP」ボタンからアカウントを作成する。
ログイン後の画面はこんな感じ。
MY FIRST APP というアプリケーションが既に用意されているようだが、
今回は新たにアプリケーションを作成する。
赤枠内をクリックして、
アプリケーション名を入力。
Google App Engine のプロジェクトを作成する
Google App Engine でアプリを構築するので、必要な初期ファイルを準備する。
今回はすべて静的ファイルだけでいいので、必要なものは index.html と app.yaml のみ。
ディレクトリ構成
(Project root)
├── app.yaml
└── public
└── index.html
app.yaml
application: zakiyama-firebase-tutorial version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: /(.+) static_files: public/\1 upload: public/(.*) - url: / static_files: public/index.html upload: public/index.html skip_files: - ^(.*/)?app\.yaml - ^(.*/)?app\.yml - ^(.*/)?#.*# - ^(.*/)?.*~ - ^(.*/)?.*\.py[co] - ^(.*/)?.*/RCS/.* - ^(.*/)?\..* - ^(.*/)?tests$ - ^(.*/)?test$ - ^test/(.*/)? - ^COPYING.LESSER - ^README\..* - \.gitignore - ^\.git/.* - \.*\.lint$ - ^fabfile\.py - ^testrunner\.py - ^grunt\.js - ^node_modules/(.*/)?
index.html（後で書き換えるので適当でいい）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> Hello, World! </body> </html>
この状態で dev_appserver.py を実行し、http://localhost:8080 にアクセスして画面が表示されれば OK。
Firebase チュートリアルをやってみる
https://www.firebase.com/tutorial/#gettingstarted
最終的に index.html はこんな感じになる。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Firebase Tutorial</title> <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> </head> <body> <div id='messagesDiv'></div> <input type='text' id='nameInput' placeholder='Name'> <input type='text' id='messageInput' placeholder='Message'> <script> // 自分が作成した Firebase アプリケーションの URL に変更する var myDataRef = new Firebase('https://**********.firebaseio.com/'); $('#messageInput').keypress(function (e) { if (e.keyCode == 13) { var name = $('#nameInput').val(); var text = $('#messageInput').val(); $('#messageInput').val(''); myDataRef.push({ name: name, text: text }); } }); myDataRef.on('child_added', function(snapshot) { var message = snapshot.val(); displayChatMessage(message.name, message.text); }); function displayChatMessage(name, text) { $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv')); $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight; } </script> </body> </html>
動かしてみる
iPhone でも見るには dev_appserver.py の起動時に --host=0.0.0.0 オプションを指定する。
詳しくは
Google App Engineの開発サーバー(localhost)にスマートフォンでアクセスする方法 - dackdive's blog
# プロジェクトのルートディレクトリで $ /usr/local/google_appengine/dev_appserver.py --host=0.0.0.0 .
実際に動かしてみた様子。
わかりづらいけど、左が PC のブラウザ、中央が iPhone （シミュレータ）。
また、右側には Firebase の Dashboard を表示してある。
PC・iPhone で入力した結果がリアルタイムで画面に反映されているだけでなく、Dashboard にもリアルタイムでデータが追加されているのがわかる。
Firebase すごい！
気になること
https://XXX.firebaseio.com のアドレスがばれちゃうと誰でもデータにアクセスできてしまうんじゃ？
セキュリティはどう考慮すればいいんだろう...
リファレンス
リアルタイム・バックエンドサービス「Firebase」を使ったWebアプリ作成 | infoScoop開発者ブログ
Google App Engine で静的サイトを構築する
Free Static Page Hosting on Google App Engine in a 5 minutes
