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

 
date:2010.05.31   posted by:oikawa
 

お世話になります。デザイニウムの及川です。
今回はアンカー制御を行った場合の困った点と解決方法についてお話したいと思います。

 

[JS]イベントhistoryとCookieを使った履歴
アンカーでの制御を行った場合、そのページを訪れたかどうかの履歴が同一ページとして記録されます。つまりリクエスト先の情報を取ってきてもページが遷移するわけではないので、リンク先を訪れたかどうかブラウザでは認識してくれないわけです。

制御する方法はいろいろあるかもしれませんが、今回はmootoolsのCookieを使って制御するサンプルを紹介したいと思います。

 

Mootoolsを使ったHistory KeeperとCookieの設置サンプル

var dsn = {
  init: function() {
  },
  dominit: function() {
    //DOMの準備が出来次第historyFuncを呼び出してhistoryChangeイベントを設置
    this.historyFunc();
    //履歴を管理するための処理
    this.cookieInitFunc();
  },
  cookieInitFunc: function() {
    //履歴を判別するために全てのaタグにrelを設置
    $$('a').each(function(obj, i) {
       var objURL = obj.get('href');
       //リンク先の指定にアンカーとサイトのドメインがあればrelを設置
       if(objURL.contains('#') && objURL.contains('www.hoge.com')) {
        var objRel = objURL.split('#')[1];
        obj.set('rel', objRel);
       }
    });
    //Cookieがすでにあった場合、各aタグへ処理を加える
    if(Cookie.read("dsn")) {
      //Cookieの値を配列として蓄える
      visited = Cookie.read("dsn").split(",");
      //Cookieの情報とリンク先を比較し、履歴がある場合はclass"visited"を追加
      for(c = 0; c < visited.length; c++) {
        var linkVisited = visited[c];
        with ({linkVisited:linkVisited}) {
          $$('a').each(function(obj, i) {
            var objRel = obj.get('rel');
            if(objRel == linkVisited) obj.addClass('visited');
          });
        }
      }
    }
  },
  cookieFunc: function(pwd) {
    //履歴の重複をチェック
    var checkHistory = false;
    for(c = 0; c < visited.length; c++) {
      var linkVisited = visited[c];
      if(pwd == linkVisited) checkHistory = true;
    }
    //履歴が重複していなかった場合
    if(!checkHistory) {
      $$('a').each(function(obj, i) {
        var objRel = obj.get('rel');
        if(objRel == pwd) {
          //アンカー以降を配列に追加し、Cookieに書き込む。
          visited.push([objRel]);
          Cookie.write("dsn", visited, { duration: 10, path: "/", domain: "www.hoge.com", secure: false });
          //aタグがclass"visited"を持っていなかった場合
          if(!obj.hasClass('visited')) obj.addClass('visited');
        };
      });
    }
  },
  historyFunc: function() {
    unFocus.History.addEventListener('historyChange', dsn.historyListener);
    if(stockHash.split('#')[1]) this.historyListener();
  },
  historyListener: function() {
    //アンカーが変わるごとに以下の操作をします
    stockHash = location.hash;
    var pwd = unFocus.History.getCurrent();
    this.cookieFunc(pwd);
  }
}

//ページURLのアンカーを取得
var stockHash = location.hash;
//履歴を蓄えるための配列
var visited = new Array();

window.addEvent('domready', function(){ dsn.dominit() });
window.onresize = function() {};
window.onload = function() { dsn.init(); };

関連リンク: MooTools Docs – Utilities/Cookie

ということで次回は「並列リクエスト処理」についてお話したいと思います。

download buy snow leopard
 
"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