検索サイトを直してみる

なんとなくモチベーションが下がりまくりで、ネタを探しに近所の本屋へ行きふと手にした本

をパラパラめくり、http://labs.adobe.com/technologies/spryのSpryAccordion.jsというスクリプトの紹介記事を発見
かねてよりの懸案事項の岩手用の検索サイトの検索ボタンのはみ出しの対応が、保留になっていた件が対応できそうだったし、他にも面白そうなものが見受けられたので思わず購入
帰宅後、上記サイトにアクセスしてライブラリをダウンロード*1、検索サイトのソースをコピーして別名でプロトタイプ作成開始

scriptaculous.jsを使ったメニューからSpryAccordion.jsを使ったメニューに置き換え

(クリックでメニューを閉じることが出来る->クリックでメニューを表示へ)

  • 組み込み方法
    • メニュー全体を〈div〉〜〈/div〉でくくってidを付与、メニュー単位で〈div〉〜〈/div〉、メニューのタイトルで〈div〉〜〈/div〉、メニューの内容で〈div〉〜〈/div〉の順に入れ子にする
    • load時にnew Spry.Widget.Accordion("指定したid",{オプション});を実行する
  • 実際に行った作業
    • scriptaculous.jsをインクルードしていたのを削除、SpryAccordion.jsをインクルード
    • メニューをリスト構造にしていたのを修整
    • スタイルシートもタグ(dtやdd)で指定したのをclass指定に修整
  • 図書館を指定した場合に、予め図書館が含まれる地方のメニューを開いておく機能の作りこみ
    • SpryAccordion.jsのソースを読んだが、クリックイベントの発生させ方がいまいち分からない
      Spry.Widget.Accordion.prototype.onPanelClick(クリックしたいパネル)だとは思うのだが
    • とりあえず、指定した図書館に応じてデフォルト値を設定する方向で進める

画面イメージ

―県立―
―盛岡地方―
―県南広域―

入れ替えた感想

  • 逆にメニューが上下に短くなりすぎで殺風景な気が(特にあまり地方分けをしていない県)
  • 地方メニューをクリックして必要な図書館のボタンを開くことが分かりづらいのではないか?押下すれば地方メニューが閉じるならばその機能を知らなくても画面がスクロールして邪魔くさいと思うだけで使えないわけではないからなあ

新機能

  • 画面の中央部に表示している「Amazonでこの商品を買った人はこんな商品も買っています」で紹介している書籍が直接、検索サイトのISBNコードに反映できるともっと便利かなと
  • 画面イメージ(オススメの前の"*"に注目)
  • とりあえず、それぞれの書籍のAmazonへのリンクの前に自ページのURLへISBNコードと図書館ナンバー(最初に指定していれば)を付与したリンクを作成
    ->これではリロードになるので、実際にはちゃんとISBNコードにセット、図書館のボタンのクリックイベントを発生にしたいが、何も考えないでISBNコードのblurイベントに仕込むと常に最初に指定した図書館が開いてしまうので*2何らかの考慮をしないといけない*3

*1:さすがにAdobeなのでユーザ登録とかしなければならないのがやや面倒

*2:2回目にISBNコードを手入力したときと、オススメからISBNコードをセットしたときの区別がつかない

*3:毎回、一旦図書館を開いて閉じて別の図書館をクリックじゃ面倒でしょ