dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

follow us in feedly

Firebaseのチュートリアルをやってみた(Google App Engineで)

Google Developers Summit Tokyo 2015 に参加してきました。

最後のセッションで Firebase というリアルタイム・バックエンドサービスが紹介されており、
面白そうだったのでチュートリアルだけやってみた。

(2015/04/23追記)
以下ではサンプルアプリのホスティング先として Google App Engine を使用してますが
Firebase にもホスティングサービスがあるのでそっちを使った方が楽です。

詳しくは

アカウント作成&アプリケーション登録

Firebase のトップページ にアクセスし、
右上の「SIGN UP」ボタンからアカウントを作成する。

ログイン後の画面はこんな感じ。
MY FIRST APP というアプリケーションが既に用意されているようだが、
今回は新たにアプリケーションを作成する。

f:id:dackdive:20150410094219p:plain

赤枠内をクリックして、

f:id:dackdive:20150410094240p:plain

アプリケーション名を入力。

f:id:dackdive:20150410094321p:plain

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

ソースコードGitHub

https://github.com/zaki-yama/firebase-tutorial