Mach3.laBlog

Sammy.jsでAjaxコンテンツのセッションを操る

この記事は賞味期限切れです。(更新から1年が経過しています)

この記事の情報は古くなっています。
Sammy.js はAPIも一新されてより強力なフレームワークになっています。
公式ドキュメントをご参照ください。

ページを移動させずにサクサクと展開していくのがAjaxコンテンツの魅力ですが、
移動しないが故にURLとしてセッションを保持出来ないという弱点があります。
オーソドックスな解決法は「location.hash」を用いる物ですが、
その処理を簡単にしてくれるのがSammy.jsです。

Sammy.js

おおざっぱな話

Sammy.js

Sammy :: Quirkey.com

Sammy.jsは、location.hashを用いたルーティングを
効率化してくれるjQueryプラグインです。

location.hashとは

通常ページ内リンク等に使用される、
URL末尾の#に続く文字列の事。

http://www.example.com/hoge.html#foobar

簡単な使い方

先ず、$.sammy()を使用してルーティングを定義します。
myRouteにはSammyオブジェクトが渡されます。
※あとで初期化を行う為に格納しておきます

var myRoute = $.sammy(function(){
    this.get("#/home", function(){
        // #/homeにアクセスした時の処理
    });
    this.get("#/profile", function(){
        // #/profileにアクセスした時の処理
    });
    this.get("", function(){
        // location.hashが空だった時の処理
    });
});

定義する為に用意されたgetメソッドには、
第一引数にlocation.hashの値
第二引数に実行したい処理(function)を渡します。
※get以外にもpost等がありますが、公式に任せて割愛

ルーティングを初期化する為には、runメソッドを呼びます。

$(function(){
    myRoute.run();
});

とても簡単ですね。

正規表現を使って一括管理

getメソッドの第一引数は、文字列の他に正規表現も渡せます。
これを使用して一つのfunctionで一括管理する事も出来ますね。

this.get( /^#\/[a-zA-Z0-9_-]+$/ , function(){
    switch( this.path ){
        case "#/home" :
            // do something
            break;
        case "#/profile" :
            // do something
            break;
        default:
            this.redirect("#/home");
            break;
    }
});

さりげなく使ってる、this.paththis.redirect()ですが、
function内のスコープはSammyオブジェクトになっていて、
色々な便利な機能が使えます。

path
location.hashの値が格納されています
redirect()
文字通り、別のlocation.hashにリダイレクトします

他にも色々ありますが、詳しくは公式のドキュメントをご参照ください。
Sammy – Documentation – API :: Quirkey.com

デモページ

デモページは閉鎖しています。

内容はやや複雑化してますが、
基本的にはそれぞれのリンクに相応するファイルをAjaxで読み込んでいるだけです。
ファイルが見つからない場合はconfirmでHomeにリダイレクトするか、
history.back()させるかを選択させています。

まとめ

postメソッド等を利用することでAjaxで展開するカートなんかが作れるようで、
チュートリアルも公式に掲載されていました。
Sammy – Tutorials :: Quirkey.com

似たような働きをするライブラリにFlash向けのswfaddressなんていうのもありましたね。
Sammy.jsはjQueryプラグインということもあって導入しやすく、期待大です。
色々試してみよう…

コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

ITキヲスク | 2010年8/19~8/25の週間ブックマークd41d8cd98f00b204e9800998ecf8427e