Ajax Rico-コンテンツをアコーディオン形式表示

ユーザービリティーを考えた場合、下に長く続くページは、スクロールの面倒さ。前項目にすぐに戻れない。既読コンテンツを見失う、見つけにくいといったことを感じさせます。これを解消しようと考えたとき、Ajaxを使ってみるといいかと思いました。

自分の中では、今のところ「Ajaxはワンクリックでユーザーにストレスを感じさせることなく、コンテンツを読ませることができるツールである」という認識でいます。他にもいろいろと使い勝手はあると思いますが。

本来、長文コンテンツの場合、見出しを使っていくつかにコンテンツを区切ります。従来、ユーザービリティーを考えて、その各見出しの頭出しができるようにコンテンツトップ部分に<ul><li></li></ul>や<dl><dt></dt><dl></dl></dl>などのタグを使って同コンテンツ内でのナビゲーションリンクを生成や”上に戻る”などのリンク表示をしてきました。そんな手法もAjaxを使うことで手間の解消とユーザービリティー向上を図ることができると思います。

特に当ブログで情報発信しているMT系のエントリーはコード表示もしていますので、長文になってしまいます。エディタとしての才能がないのもあって、ユーザーにはわかりにくい部分が多々あり、もう一度既読部分を読み直すとか照らし合わせるといった感じではないかと思います。そんなときアコーディオン形式でコンテンツを分けてすぐに頭出しができれば、すぐに既読コンテンツの再確認にも役立つのではないかと思いました。

今回は、Ricoのアコーディオンを実際に使って、その使いやすさを堪能してみてください。もちろん使い方もご紹介します。

うまく説明できませんが、prototypeをベースにAjaxを手軽に表現できるテンプレートとした捉え方でいいと思います。

ボックス角丸表示から背景のフェードアニメーション表示やアコーディオンタブ、コンテンツを任意の場所にドロップできる、長いリストを瞬時に表示できることなど様々な使い方ができます。

使うソースもとてもシンプルにされています。ベースのスクリプトもシンプルなんですが、コンテンツ内でのスクリプトがとってもシンプルなのでメンテナンスにもコードがわかりにくくなることがありません。

特にボックス角丸表示は、枠線の角丸指定もできることで使われている方も多いと思います。今回のアコーディオンも結構つかっている方がいると思います。

アコーディオン表示は、今のところ知る限りでRicoとYahoo　UI　Libraryを使ったソースがdeliciousの中でブックマークされています。

Rico

http://openrico.org/rico/home.page

ダウンロードするソースは、二つです。Rico 1.1.2 と Prototype 1.4.0になります。リンク部分にマウスをあて、右クリックで「リンク先を名前をつけて保存」で、”rico.js””prototype.js”で保存します。あとは、自分のブログのフォルダの中にアップすればOKです。

無料ブログサービスをお使いの方は、そのままイメージ画像としてアップロードすることで使うことができます。

あとは、各ページの</head>前に

<script type="text/javascript" 
     src="保存先アドレス/prototype.js">
</script>
<script type="text/javascript" 
     src="保存先アドレス/rico.js">
</script>

上記を追加するだけになります。MovableTypeをお使いの方は、

<script type="text/javascript" 
     src="<$MTBlogURL$>prototype.js">
</script>
<script type="text/javascript" 
     src="<$MTBlogURL$>rico.js">
</script>

上記のコードを</head>前に追加します。

<div id="accordionExample">

	<div id="panel1">
	  <div id="panel1Header"  class="accordionTabTitleBar">
	  	<p>１コンテンツ頭出し</p>
	  </div>
	  	<div id="panel1Content" class="accordionTabContentBox">
			<div style="padding:5px">
				<p>１コンテンツ</p>
	  		</div>
		</div>
	</div>
	
	<div id="panel2">
	  <div id="panel2Header"  class="accordionTabTitleBar">
	  	<p>2コンテンツ頭出し</p>
	  </div>
	  	<div id="panel2Content" class="accordionTabContentBox">
			<div style="padding:5px">
				<p>2コンテンツ</p>
	  		</div>
		</div>
	</div>
	
	<div id="panel3">
	  <div id="panel3Header"  class="accordionTabTitleBar">
	  	<p>3コンテンツ頭出し</p>
	  </div>
	  	<div id="panel3Content" class="accordionTabContentBox">
			<div style="padding:5px">
				<p>3コンテンツ</p>
	  		</div>
		</div>
	</div>
	
</div>
<script> { new Rico.Accordion( 'accordionExample', {panelHeight:400} ); } </script>

<div id="panel1">
	  <div id="panel1Header"  class="accordionTabTitleBar">
	  	<p>１コンテンツ頭出し</p>
	  </div>
	  	<div id="panel1Content" class="accordionTabContentBox">
			<div style="padding:5px">
				<p>１コンテンツ</p>
	  		</div>
		</div>
	</div>

<div id="panel1"></div>で各タブコンテンツを区切ります。

<div id="panel1Header" class="accordionTabTitleBar"></div>はタブタイトルです。

<div id="panel1Content" class="accordionTabContentBox"></div>はコンテンツになります。

コンテンツ毎にこのテンプレートコードで区切ります。idセレクタの中の番号指定も忘れずに。

すべてのコンテンツを<div id="accordionExample"></div>でくくります。

最後に<script> { new Rico.Accordion( 'accordionExample', {panelHeight:400} ); } </script>を追加して表示されるようになります。

{ new Rico.Accordion( 'accordionExample', {panelHeight:400} ); } について

accordionExampleは、アコーディオンを表示するセレクタ指定のあるブロック要素を指定します。

panelHeight:400は、アコーディオンのデフォルト表示での高さ指定です。

一般的なWEBサイト表示寸法が800×640が主流なので、640以下で設定するといいと思います。

各タブタイトル部分とコンテンツ部分は、padinng指定がされていません。コンテンツが窮屈に表示されます。CSSで独自に各div要素にpadinng指定すると表示が崩れます。

各div要素の中に要素を作り、その要素をCSSで指定するようにします。今回の紹介したコードでコンテンツ部分のみpadinng5px指定した要素を入れて表示しておきました。タブタイトル部分は、各自にて設定する必要があります。

各タブ背景・文字色の設定・枠の設定について

各セレクタのプロパティで指定することで表示を変えることができると思います。

もしくは、rico.jsのファイルの中の181行目から190行目の中の指定を変更することでも可能です。

表示コンテンツについて

今回このエントリーもアコーディオンで表示しています。実際に他のブラウザ（safari・N7・opera）での表示確認をしていません。コンテンツが長くなった場合は、デフォルトでoverflowコンテンツはスクロール表示されます。

表示長さの指定ですが、パラーメーターの数値以上の長さ指定をすると表示が崩れるとあります。ちょっと未だパラーメーターについての知識が曖昧なのでどこの部分の数値かわかりませんが、また調べてご報告します。