jqAdvancedTResearch

概要

jqAdvancedTResearch はメニューの中から頻繁に選択される項目のフォントサイズを選択頻度に合わせて大きくするだけの関数を提供する JS のファイルです。ライブラリを名乗れるくらいの量は無い。

研究室同期の岡本巧くんの研究「閲覧履歴を基にした Web ページのユーザビリティ向上手法の提案と実装」を参考に作成しました。名前の由来はjQuery を利用した Takumi Okamoto の Research の応用 (Advanced) です。

実際に使ってみた例が私のトップページです。メニューのうち、選ばれた回数が多いものはフォントサイズが大きくなるのがお分かり頂けると思います。目が見えないユーザの事はあまり考えられていない気もする。

使い方

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

まず、以下のコードを 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/jqAdvancedTResearch.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">
setupMenu("#myMenu p", "myStorage");
</script>

setupMenu 関数の第一引数はセレクタです。 a 要素が存在する要素を指し示して下さい。今回の場合は #myMenu 内の p 要素にリンクが含まれているためこのような指定になりました。第二引数は任意の文字列です。この文字列は localStroage の名前ですのでサイト内で他に localStorage を用いているのであれば名前の競合に注意して下さい。普段は myStorage とかで構わないでしょう。

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

Back