AmplifyJSについて - blue_ham

amplify.jsという便利そうなライブラリを知ったのでメモ書き。詳しい情報は公式サイトをどうぞ。

概要

amplify.jsはウェブアプリケーションでよく使う機能をシンプルなAPIにして提供してくれるライブラリのよう。非常に軽量なライブラリで、主なメソッドは5つか6つぐらいだけ。

amplify.jsが提供してくれる機能は大きく分けて3つ。

パブリッシュ/サブスクライブパターン(Pub/Sub)
クライアントサイドでのデータ永続化操作(Store)
Ajax通信の管理(Request)

良いと思った機能は次の辺り。

Ajax通信の結果のキャッシングや永続化が簡単にできる
Ajax通信の定義が便利。URLの一部分のバラメータ化やキャッシュの設定など
APIがシンプルで分かりやすい

依存ライブラリはjQuery(var1.4以上)のみ。ただしJSONモジュールを標準でサポートしていない古いブラウザはstore機能でオブジェクトを保存するのにjson2.jsが必要。

パブリッシュ/サブスクライブパターンの使用(Pub/Sub)

jQueryやBackbone.jsでいうbindやtrrigerみたいなのを提供してくれる。

amplify.subscribe()

いわゆるbind。イベントの購読、つまりイベントリスナの登録ができる。

// 公式サイトの説明より http://amplifyjs.com/api/pubsub/
amplify.subscribe( string topic, function callback )
amplify.subscribe( string topic, object context, function callback )
amplify.subscribe( string topic, function callback, number priority )
amplify.subscribe( string topic, object context, function callback, number priority )

(見難くてごめんなさい。あとで直しときます)

topicが購読するイベント名。コンテキストや優先度の指定ができる。コンテキストとコールバック関数の順番がBackbone.jsと逆になっているのが少しアレだけど、優先度が指定できるのはいい。

優先度は値が小さいほうが先にコールバックされる。デフォルトは10。

コールバック関数の戻り値をfalseにすると、それ以降のコールバック関数(つまりそれより優先度の低いコールバック関数)の呼び出しを止めることができる。

amplify.publish()

いわゆるtrigger。イベントの発火ができる。

// 公式サイトの説明より http://amplifyjs.com/api/pubsub/
amplify.publish( string topic, ... )

topicが発火させるイベント名。イベントに渡すパラメータを引数に追加することもできる。

戻り値はtrueかfalse。いずれかのコールバック関数がfalseを返してイベントを中止していればfalseを返す。それ以外はtrueを返す。

amplify.unsubscribe()

イベントの購読をやめさせる。

以上(イベントの購読というかチャンネルの購読ですね、意味論的に言えば)。

クライアントサイドでのデータ永続化操作(Store)

ブラウザの実装に依らないデータ永続化操作を提供してくれる。ブラウザによってlocalStorageやuserData(IE5,6,7)などを使い分けてくれたり、オブジェクトを渡すと勝手にシリアライズしてから保存してくれたり。

amplify.store()

データの保存と取り出し。

amplify.store("foo", { bar: 100 });

保存。

amplify.store("foo");

取り出し。ちゃんと永続化されているのでブラウザをリロードしても取り出せる。

amplify.store();

保存したオブジェクトを全て取り出す。

amplify.store("foo", null);

データの削除。

amplify.store("foo", { bar: 100 }, { expires: 1000 });

保存期限の指定(ミリ秒)。この場合は1秒後にデータを破棄する。

amplify.store.localStorage("foo", 100);
amplify.store.sessionStorage("foo", 100);

保存先を明示的に指定することもできる。

以上。

Ajax通信の管理(Request)

ajaxリクエストを定義しておいたり、JSONPを使ったり、通信結果をキャッシュしたり。とにかく便利そう。

amplifyでajax通信をするにはまずajaxリクエストの定義をする。

amplify.request.define("foo", "ajax", {
  url: "/foo.json",
  dataType: "json",
  type: "GET"
});

"foo"がリクエストの名前(正確にはリソースの名前)。これをamplify.request()で指定するとajax通信ができる。

amplify.request("foo", function(data) {
  console.log(data);
});

通信結果をキャッシュすることもできる。

amplify.request.define("foo", "ajax", {
  url: "/foo.json",
  dataType: "json",
  type: "GET",
  cache: true // ここ
});

こんな感じで、cache: trueとすれば通信結果がメモリ上にキャッシュされて2回目以降のリクエストはキャッシュを取得するだけになる。

cache: 1000というふうに値を数字にすることで保存期限を指定できる(単位はミリ秒)。この例では一秒間だけキャッシュを保持するということになる。

cache: trueやcache: 1000だとメモリ上にキャッシュしているだけなのでリロードするとキャッシュは消えてしまう。リロードやページ遷移を経てもキャッシュを残したい場合はcache: "persist"を使う。これで通信結果をストレージ上にキャッシュできる。

ストレージ上に保存したキャッシュでも保存期限を指定したい場合はcache:{ type: "persist", expires: 1000 }というふうにする。これでリロードなどで消えずにかつ一定時間後に削除されるキャッシュができる。

urlにパラメータを用いることもできる。下のように{}で囲むことでその部分をパラメータ化できる。

amplify.request.define("foo", "ajax", {
  url: "/users/{user}.json",
  dataType: "json",
  type: "GET",
  cache: {
    type: "persist",
    expires: 1000
  }
});

これで

amplify.request("foo", { user: ore }, function(data) {
  console.log(data);
});

とすれば /users/ore.json へのajaxリクエストを飛ばすことができる。

JSONPによる外部スクリプトとの通信も簡単にできる。例えば

amplify.request.define("github-user", "ajax", {
  url: "https://api.github.com/users/BlackKetchupTea512",
  dataType: "jsonp",
  type: "GET",
  cache: {
    type: "persist",
    expires: 1000
  }
});

amplify.request("github-user", function(data) {
  console.log(data.data);
});

とすればGitHubのユーザーの情報を取得できる。

パラメータを使って書きなおすと

amplify.request.define("github-user", "ajax", {
  url: "https://api.github.com/users/{user}",
  dataType: "jsonp",
  type: "GET",
  cache: {
    type: "persist",
    expires: 1000
  }
});

amplify.request(
  "github-user", 
  { user: "BlackKetchupTea512" },
  function(data) {
    console.log(data.data);
  }
);

こんな感じ。

以上。

終わり

これで大体の機能の説明は終わり。機能のカスタマイズとかajax通信時のより詳細なコールバック設定とかデータの送信とかが説明できてないけどそこらへんは公式サイトを見てください。