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

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

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

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

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

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

twitter.com/#!/****

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

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

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

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

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

1. jQuery hashchange

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

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

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

2. sammy.js

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

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

3. HashChange.js

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

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

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

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

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

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

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

コメント

タイトルとURLをコピーしました