爆速でfirebaseお試しwith jsFiddle

前々から気になってたfirebaseについて試す＆書いてみようっていうエントリーです

• 所要時間は5分ほど
• jsfiddleを使いますがローカルでもいけると思います

はじめに

使ってみるほうメインで説明ははぶくつもりですが軽くだけ

Firebaseとは

サーバ管理不要で、高速・スケーラブル・リアルタイムなバックエンドを提供するサービス。
一定の転送量・接続数・容量まで無料で、クレジッドカード無しで始めることができる。
こちらから引用させて頂きました

jsFiddleとは

HTML + CSS + Mootools、jQuery、Prototype、Dojo などの各種 JavaScript フレームワークで、遊んでみようというサイトです。
こちらから引用させて頂きました

ということで

使ってみる

ながれ

• firebaseにサインアップ
• チュートリアルのサンプル作る

これだけなので簡単ですね！

※jsFiddleも登録必要ですがそちらも簡単なのでやってみてください
※どーしてもイヤな方はローカルでも十分です＼(^o^)／

firebaseにサインアップ

下記のURLにてサインアップ
https://www.firebase.com/signup/

必要なもの

• アドレス
• パスワード

これのみです。メール開いて確認もいりません
※ってことは使ってみるだけならダミーアドレスでもいいかも？

入力するとサインアップは終わってるのでパスワードはお忘れなく
これだけでサインアップ完了です

サインアップするとこんな画面になります

サインアップは以上です。簡単！

チュートリアルのサンプル作る

チュートリアルのサンプルを作りますがチュートリアルに沿いません。
とにかく試したいんだよ！読みたくないよ！
っていう自分のためにこんな流れにします

• チュートリアルstep7に移動
• ソースをjsfiddleに貼り付けとか
• 挙動確認

チュートリアルstep7に移動

5 min tutorialをクリックしてチュートリアルstep7に移動
2、3回のクリックで7までイケます

ソースをjsfiddleに貼り付けとか

貼り付ける順番はありませんが、必要なのはこれだけです

• html部
• javascript部
• 左サイドメニューExternal Resources

ってことでっそく

■ html

<div id='messagesDiv'></div>
<input type='text' id='nameInput' placeholder='Name'>
<input type='text' id='messageInput' placeholder='Message'>

■ javascript

var myDataRef = new Firebase('https://dya872np1ze.firebaseio-demo.com/');
$('#messageInput').keypress(function (e) {
    if (e.keyCode == 13) {
        var name = $('#nameInput').val();
        var text = $('#messageInput').val();
        myDataRef.push({name: name, text: text});
        $('#messageInput').val('');
    }
});
myDataRef.on('child_added', function(snapshot) {
    var message = snapshot.val();
    console.log(message);
    displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
    $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
    $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
};

■ 左サイドメニューExternal Resources

下記のスクリプトを読み込み
https://cdn.firebase.com/js/client/1.0.11/firebase.js
https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js

で、動かした結果がこちら

もしかしたら時間がたって
デモ用firebaseURLが変更になって動かないかもしれませんが心配いりません。
これ↓

var myDataRef = new Firebase('https://dya872np1ze.firebaseio-demo.com/');

既にサインアップ済みなので自分用URLができています。
デモ用firebaseURLをサインアップした際のこのULRに変更しましょう

補足

チュートリアルも英語とはいえすぐ終わる内容なので読んでみると良いかもです

現時点(2014/05/08)では、こんな内容のチュートリアルになってます

1. Installing Firebase(scriptタグでfirebase.js読み込み)
2. Accessing Data(データのインスタンスGET)
3. Writing Data(データをSETしてみる)
4. Writing Objects(オブジェクトでSETしてみる)
5. Writing Lists(オブジェクトをPUSHしてみる)
6. Reading Data(イベント登録してDATAがpush(set)されたのをlistenしてみる)
7. Using Snapshots(listen登録したcallbackでpushされたデータを表示してみる)

まとめ

フロント試したいけどバックエンドめんどくさいなーって時には最適ですね＼(^^)／