フルAjaxでサイトを構築したい時

新年明けましておめでとうございます。
新年初記事です。

最近、フルAjax でサイトを構築できないかと思って、少しずつ調べたりしています。
めっちゃ使ってる twitter のサイト。これも最近はAjaxの技術で動いているんですね。
twitter を参考に、お話をしてみたいと思います。

まず、先ほども例に出しました、 twitter。

早い話が、 twitter みたいな感じで実装したいなってことです。
（分かりづらいですかね。

では、twitter を ブラウザのURL欄に注意しながら ちょっと使ってみましょう。

twitter.com/#!/****

URL欄がこんな感じになってますよね？

気づきづらいかもしれませんが、 #*** とリンクをするとき、一般的にはページ内リンクとか言われてて、
#abc だと、ページ内で abc と名前をつけた場所までワープします。
また、 #abc をハッシュといったりします。

ところが、 twitter。
ページ内の移動どころの話ではないですよね？

ページの内容が丸々書き換わります。
しかも、ブラウザの「戻る」「進む」ボタンも使えます。

というわけで今日は、ページの内容が丸々書き換わるそれを、
実装するために使えるものを調べてみました。

1. jQuery hashchange

ｊQueryプラグインで、これについては自分も使ったことがあります。
本当にサクッと使えちゃうので、こんなのでいいの？って拍子抜けするくらいです。

＋ Ajaxやタブ切替には必須かも？ブラウザの「戻る」「進む」を有効にするjQueryのhashchangeプラグイン :: 5509
＋ http://5509.me/log/jquery-hash-change-event

この方がサンプルとして提示しているサイトを見ると、ものすごく感動します。

こちらも jQueryプラグイン。
先ほどの hashchange と何が違うの？っていうと、ルーティングに特化しているようです。
高機能？

＋ Sammy.jsでAjaxコンテンツのセッションを操る | Mach3.laBlog
＋ http://blog.mach3.jp/2010/09/sammy-js.html

2. に掲載したブログの作者さんが書かれたクラスです。
jQuery つかわないし、シンプルに行きたい。って時にいいかもしれないです。
また、ものすごく短いスクリプトで書かれていて、みるだけでも感心せざるをえません。

＋ JavaScriptでHashChangeのシンプルなクラスを書いてみる | Mach3.laBlog
＋ http://blog.mach3.jp/2011/09/js-hashchange-class.html

実際に使ってみてないので、メモ程度ですが、
使ってみたら、また報告するかもしれません。

また、これらを使ってサイトを構築する場合、SEOなどの点で注意が必要なようです。

初めに例示した、 twitter 。
ここの URL にも含まれている #! 。

この #! についてもいろいろ議論がなされています。

なので、使う場合はいっぱいいっぱい調べた上で使ったほうがいいですね。
でゎ。