オフィシャルサイトで使った技術その1in work

 
date:2010.05.25   posted by:oikawa
 

お世話になります。最近は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の設置」についてです。

 
"JavaScript"で関連する記事一覧 (シーケンスで表示する)
•2011.10.13-悩める漢のダイエットアプリ「漢のダイエット」リリース! in news
•2010.06.04-each関数を使ったテキスト上下中央揃え in work
•2010.05.31-オフィシャルサイトで使う予定だった技術 in work
•2010.05.31-オフィシャルサイトで使った技術その3 in work
•2010.05.31-オフィシャルサイトで使った技術その2 in work
•2010.05.25-オフィシャルサイトで使った技術その1 in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2009.05.27-もっとがほしいDSN in work
•2009.04.16-Webページで角丸のボックスを作る方法あれこれ in work
•2009.04.03-AJAX Libraries API in work
 
 
"lab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.06.04-each関数を使ったテキスト上下中央揃え in work
•2010.05.31-オフィシャルサイトで使う予定だった技術 in work
•2010.05.31-オフィシャルサイトで使った技術その3 in work
•2010.05.31-オフィシャルサイトで使った技術その2 in work
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-オフィシャルサイトで使った技術その1 in work
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.14-CSS3のアニメーション機能 in development
•2010.05.07-複数打ったはずのマーカーが1つしか表示されない in work
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-もっとがほしいDSN in work
•2009.04.16-Webページで角丸のボックスを作る方法あれこれ in work
•2009.03.02-みんなが大好きjQuery in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
 
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|JavaScript lab