Lesson 08 Cookieを利用したパス型パンくずリスト - Webデザイン表現&技法の新・ナビゲーション編

Webデザイン 表現&技法の 新・スタンダード

Lesson08

Cookieを利用した パス型パンくずリスト

制作・文

栗林宏之（ビーズスタジオ）

閲覧したページの履歴をパンくずリスト化する「CookieCrumbs.js」。いわゆる「パス型（どのような経緯でたどり着いたのか）」のパンくずリストで、移動してきたページタイトルをCookieを利用して順番に表示する。

まず「CookieCrumbs.js」を公開サイト（ http: //tomcoote.co.uk/code-bank/cookie-crumbs/） から入手する。ページ中段の「Download the source」をクリックしてスクリプトをダウンロードしよう【1-1】。


【1-1】データはRAR形式でダウンロードできる

head 内でダウンロードした Cookie Crumbs.js を読み込む設定をする【2-1】。


【2-1】

リストを表示したい場所に既定のコードを記述する。ソース内の Cookie Crumbs(5) の数字が表示する履歴の数となるので、目的の数に変更する【3-1】。なお、設定した履歴の数を超えると先頭から消えていく仕様になっている【3-2】【3-3】。


【3-1】数字を変更すると基本的な作業は完了


【3-2】5ページ目のパンくずの状態


【3-3】6ページ目のパンくずの状態

実際のサイトで使用する場合は、履歴の対象をサイト全体にする必要があるためCookieCrumbs.js 内の56行目と66行目でCookie対象パスを変更する【4-1】。また、階層を表す「>」の文字を変更する場合は、189行目と193行目の「>」を変更する。10進数の文字参照で書かれているが半角英数を直接入力しても反映される【4-2】。


【4-1】56行目と66行目に「/（スラッシュ）」を足す


【4-2】半角英数であれば、文字をそのまま入力してもよい