2014/12/24

AngularJs ✕ Firebaseで爆速リアルタイムアプリケーションの作成

AngularJs ✕ Firebaseで爆速リアルタイムアプリケーションの作成


Firebaseとは

いわゆるモバイルBassでWebアプリケーション、モバイル・アプリケーションの開発者向けにリアルタイムにスケーラブルなバックエンドサービスを提供しています。
つい最近（今年10月）、Googleに買収されています。
一定の転送量、接続数、容量は無料で、クレジットなしで使用できます。
Baasとして有名なParseは、Facebookに買収されていますし、
FirebaseもGoogleがつい先日買収と、もはやBaasの2大巨塔ですね、この２つは。


AngularFire

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


サンプル:チャットアプリ

100行以内で簡単チャットアプリが作成できます。
var ref = new Firebase("https://<your-firebase>.firebaseio.com/");

上記の箇所をfirebaseにサインアップして、URLを書き換えてください。


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のドキュメントはこちら

https://www.firebase.com/docs/web/libraries/angular/index.html

2014/12/22

iOS 8 todays widgetの作成

iOS 8 今日のウィジェットの作成



今回はiPhoneで今日のウィジェットを表示させるアプリのサンプルを作ります。


iOS8 からの新機能、 Today ウィジェット、通知センターの左側に表示されます。

はじめにウィジェットの概念について。
既存のアプリに付属する拡張のようなものです。
ウィジェット単体では申請できません。既存のアプリに追加する形となります。
既存のアプリにエクステンションを追加するイメージ
あくまで、アプリに内包されて配布するものです。

以下、簡素化したステップ
1. 新規アプリ開発、Single View Applicationで言語はObjective-cを選択。
2. File > New > Target にて Application ExtensionにてToday Extensionを選択
3. Product NameをWidgetと入力、finishを選択したあと、Scheme追加ダイアログが出て、activateを選択。
4. TargetのWidgetを確認すると、Link Binary With LibrariesにNotificationCenter.frameworkが入っていることを確認。
5. デフォルトでビルド実行すると、ノティフィケーションセンター左の今日のウィジェットを確認すると、アプリ名の中に"Hello World”を確認。
6. ウィジェットで表示されるアプリ名の変更はinfo.plistのBundle display nameを変更
7. MainInterface.storyboardにて、label, progress viewを追加
8. Constraintsを追加。それぞれの制約を設定、詳細は以下github。
9. ビルドして実行、確認。※ビルドターゲットはエクステンションの方を選択
10. リアルなデータを結びつける。
11. labelとprogress viewをアウトレット接続する,propertyの追加
12. システムサイズとフリー、ユーズドのサイズを測定するメソッドを定義
13. それらをnsuserdefaultでキャッシュする。
14. そしてそれらをUIに表示、更新する
15. 値に更新があった場合のメソッドを定義 ビルド実行で確認。値の再計算メソッド。
16. もっと情報を表示させる。まずUIの変更、それぞれの高さを設定。
17. 詳細ラベルの更新。
18. タッチの検出と値の更新。
19. アニメーションの追加。
20. ビルド実行で確認


ソースはこちら

参考: iOS 8: Creating a Today Widget
登録: 投稿 (Atom)