2015/11/30

AngularJs ✕ Firebaseで爆速イメージストア環境の作成

以前、AngularJs ✕ Firebaseで爆速リアルタイムアプリケーションの作成という記事を書きましたが、
今回は画像をさくっとどこかにあげて利用したい時、firebaseを使えば、5分で環境が出来ます。
S3、Parseの利用を検討しましたが、
  • 無料
  • APIドキュメントがわかりやすい（Parseはファイルストレージが20GBだが、ドキュメントがわかりにくい）
  • リアルタイムにデータ同期しやすい
上記の点でAngularJs×Firebaseを採用。なんといってもリアルタイムデータ同期が魅力的。
※Milkcocoaは検討してませんw

Firebaseとは

いわゆるモバイルBassでWebアプリケーション、モバイル・アプリケーションの開発者向けにリアルタイムにスケーラブルなバックエンドサービスを提供しています。
一定の転送量、接続数、容量は無料で、クレジットなしで使用できます。
ストレージ1GBまで無料なので、まぁ問題ないレベル。
バックアップは無料プランでは取れません。
https://www.firebase.com/

AngularFire

そして、AngularJsからFirebaseを利用できる、
AngularFireというAPIも公開されていますので、
バックエンドのコードを書く必要も、サーバも必要なく、
必要な作業に集中できます。
AngularFireのAPIを利用することで、
Angularjsのモデルが自動的に同期され、Firebase上でリアルタイムにデータバインディングされます。
これでhtml側でのview, Angularjsでのmodel, firebaseでストアされたjsonのデータの3wayデータバインディングが可能となります。

angular-file-upload

FlashによるFileAPI代替を提供するモジュール
HTML5のFileAPIを利用,HTML5のFileAPIサポートしていないブラウザ（IE8、IE9など）にはFlashを利用して同等の機能を提供。
今回はbase64データのURL生成してアップロードしています。

サンプル:画像アップロードアプリ


わずか110行で簡単イメージストアアプリが作成できます。
var ref = new Firebase("https://.firebaseio.com/");
上記の箇所をfirebaseにサインアップして、URLを書き換えるだけですぐ使えます。
サインアップはこちらから
https://www.firebase.com/login/

※注意

無料プランでストレージは1GBまでです。

Firebaseにストアされたデータにindexをはる方法

設定で、json形式でkey,rulesの中に.indexOnを記述するだけ
詳細はこちら
https://www.firebase.com/docs/security/guide/indexing-data.html

Firebaseにストアされたデータのセキュリティに関して

jsonでのセキュリティルールの設定が可能。
認証されたユーザがどのようにデータを変更できるかを決める。
データの転送はSSL経由。
さらなる詳細はこちら
https://www.firebase.com/docs/security/

AngularFireの使用アプリ

好きなアーティストの音楽をランキング順の聴くことができるサービスです。
Recentの箇所をfirebaseでストアしています。
Lamusica
http://manchan.github.io/lamusica/
githubはこちら
https://github.com/manchan/lamusica

AngularFireのドキュメントはこちら

ng-file-uploadのドキュメントはこちら

おわりに

5分は長すぎたかもしれません。