troop.js

概要

troop.js は jqAdvancedTResearchを jQuery のプラグインとしてまとめ直し、機能を追加したものです。

研究室同期の岡本巧くんの研究「閲覧履歴を基にした Web ページのユーザビリティ向上手法の提案と実装」を参考に作成しました。名前の由来は Takumi's Research is Offerd as Organized Plug-in です。ぶっちゃけ O 2つはこじつけました。

使い方

これを自分のサイトに仕込むには次の手順が容易です。

まず、以下のコードを head 要素内に書き込みます。

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://www.sw.it.aoyama.ac.jp/2010/oshima/troop.js" ></script>

次にメニューに任意の id を与えます。ここでは myMenu としました。

<div id="myMenu">
<h2>動物</h2>
<p><a ...>ひよこ</a></p>
<p><a ...>ひつじ</a></p>
<h2>植物</h2>
<p><a ...>さくら</a></p>
<p><a ...>ラベンダー</a></p>
</div>

最後に関数を実行します。メニューの直後に以下を挿入すると良いでしょう。

<script type="text/javascript">
$("#myMenu").troop.("myStorage", "font-size");
</script>

jQuery オブジェクトに含まれる全ての a 要素を表示が変化するメニューとします。.troop() の第一引数は任意の文字列です。この文字列は localStroage の名前ですのでサイト内で他に localStorage を用いているのであれば名前の競合に注意して下さい。普段は myStorage とかで構わないでしょう。第二引数は変化させる CSS プロパティが入ります。

ダウンロードは http://www.sw.it.aoyama.ac.jp/2010/oshima/troop.js　からどうぞ。

利用できる引数及び詳細

概要

troop は原則として2つないしは3つの引数を必要とします。

.troop(storageName, targetCSSPropertie, distination)

第一引数の storageName は web straoge の名前を指定する文字列です。任意の名前が利用できますが、 web storage は同ドメイン内では共有されるため競合のリスクが存在します。競合するような名前は与えないで下さい。この第一引数は必須です。

第二引数の targetCSSPropertie は変化させたい CSS プロパティを指定します。現状では以下のプロパティが利用可能です。尚、troop で border～ を指定した際に border～style が none の場合、 solid に troop が指定し直します。下記に font-size 及び color についてサンプルを用意しましたのでそちらも御覧ください。

第二引数はこれらの CSS プロパティに加え、並び替えをするためのプロパティである sort も利用が可能です。

第三引数の distination は変化の目標地点を指定します。 font-size 以外の場合は必須です。詳しくは各説明を御覧ください。

.troop() の戻り値は変化後の jQuery オブジェクトです。

font-size

利用例

<div id="troop_font">

(任意個の a 要素を含む html)

</div>
<script type="text/javascript">
$("#troop_font").troop("hiyoko_troop", "font-size", 18);
</script>

解説

多くクリックされたリンクのフォントサイズを大きくします。第三引数でフォントの最大値を px で指定が可能です。省略された場合、最大のフォントサイズは元々のサイズの3倍となります。

color を含む値

利用例

<div id="troop_color">

(任意個の a 要素を含む html)

</div>
<script type="text/javascript">
$("#troop_color").troop("hiyoko_troop", "font-color", 18);
</script>

解説

多くクリックされたリンクの指定されたプロパティを第三引数の色に近づけます。原則としてもっとも多くクリックされたリンクが第三引数で指定された色となります。他のリンクの色はもっとも多くクリックされたリンクとクリックされた回数を比較し、回数に比例して第三引数の色に近づきます。例外はクリック回数が4回以内の場合です。回数が4回以内の場合は最大のクリック回数を5回として扱い、どのリンクも第三引数の色にはなりません。

sort

利用例

<div id="troop_sort">

(任意個の a 要素を含む html)

</div>
<script type="text/javascript">
$("#troop_sort").troop("hiyoko_troop", "sort");
</script>

解説

リンクをクリックされた回数順に並べます。第三引数を指定しない場合は降順 (クリックされた回数が多い順) での並び替えです。第三引数に真となる値を指定した場合のみ昇順 (クリックされた回数が少ない順) となります。

Back