お世話になります。最近はDATABASEな日々の及川です。
今回はアンカーによるイベントの制御方法を少しお話したいと思います。
[JS]イベントhistoryの設置とアンカー制御
Javascriptを使えば各要素にClickやdomreadyなどの特定のイベントをトリガーとして扱うことができますが、今回オフィシャルサイトではunfocus projectsで公開されているHistory Keeperを使って、追加のイベントとしてhistoryChangeを設置してみました。
このイベントが追加されたことにより、ブラウザの戻るボタンや、アンカーリンクによるページのlocation.hash(URLの#以降の部分)が変更されたときにある特定の関数が実行されるようになっています。
なぜアンカーでの制御を行う必要があるのか？
まずFlashサイトを例に挙げてみます。「サイト内のどこどこのコンテンツを見てほしいんだけど」といった場合、アンカーから特定のページを指定することが出来るのでやり取りがしやすいほか、SEO対策にもなる利点があります。
またAjaxとアンカー制御を併用した場合、遷移なしにサイト内でデータのやり取りが可能になるので、たとえば曲をとぎらせることなくページの閲覧が可能になったりします。
このアンカー制御をうまく使った例が以下のサイトです。
• Mercedes-AMG
• アンカーを使うことによってFlash内の特定のコンテンツを指定することができる
• The Hype Machine
• アンカー制御により音をとぎらせることなくページが変更できる
※今回オフィシャルサイトではFlashをまったく使いませんでしたが、もしFlashでのサイト構築を考えている方はGaia Frameworkを使うのもいいかもしれません。
またHTML5では曲を流せるようになるとのことで、それを見越してサイト構築を考えている方はこのアンカー制御を取り入れてみてはどうでしょうか？
Mootoolsを使ったHistory Keeperの設置サンプル
var dsn = {
init: function() {
},
dominit: function() {
//DOMの準備が出来次第historyFuncを呼び出してhistoryChangeイベントを設置
this.historyFunc();
},
historyFunc: function() {
unFocus.History.addEventListener('historyChange', dsn.historyListener);
if(stockHash.split('#')[1]) this.historyListener();
},
historyListener: function() {
//アンカーが変わるごとに以下の操作をします
stockHash = location.hash;
var pwd = unFocus.History.getCurrent();
document.title = 'TheDesignium - ' + pwd;
$('history').set('html', pwd);
}
}
//ページURLのアンカーを取得
var stockHash = location.hash;
window.addEvent('domready', function(){ dsn.dominit() });
window.onresize = function() {};
window.onload = function() { dsn.init(); };
上記サンプルを改良したデモ： http://www.thedesignium.com/sample/history/#/about
Usabilityを気にする方ならこういった技術ベースの工夫も必要になってくるのではないでしょうか？
ということで次回は「イベントhistoryとGoogle Analyticsの設置」についてです。