prototype.jsクックブック０７「リストを動的に読み込む」
http://ya-lab.main.jp/prototype-js-cookbook/07_lazy_loading_list/index.html
またprototype.js全然関係ないんだけど、まぁ、ちょっと使ってるし…。もう、JavaScriptクックブックに名前変えようかなぁ。
最近たまに見かけるリストの動的な読み込み方法。Google Reader – Googleの左のエントリーリストみたいなものをイメージしてもらえばいいと思う。Google Readerを知らなければ、Google Mapをイメージしてもいい。大量のデータがあって一度に読み込むのが現実的じゃないけど、ページ切り替えをせずに滑らかなUIにしたい時の実装方法だ。
まず、サンプル画面を見てもらって動作イメージを掴んでもらいたい。で、次にそのサンプルのソースを見てください。実は、解説するのが、嫌なほど簡単です。サンプルだから、汎用性とか無視した書き捨てコードになってるけど、勘弁してください。
簡単に説明します。
- まず大きさを固定したdiv（class=list_viewer）を用意します（大きさを固定する事は必須ではないけれど…）。
- その中にリストアイテムを保持するdiv（class=container）を置き、中にアイテムであるdiv（class=list）を並べます。
- ユーザの動作に合わせて中のdiv.containerを上下に動かします。（動かし方はdiv.containerのスタイルをposition: relativeして、top属性で動かせばいいでしょう。）
- 移動した結果、アイテムをもっと表示出来るスペースがあれば動的に読み込みます（サンプルでは動的に読み込んだように見えるように実装してあります。）
- 終了
なんでこんな簡単なものを公開したかというと、知人に質問を受けたのがきっかけです。まさにサンプルにあるようなUIを実現したかったらしく、「どうやればいい？」と俺に聞いてきたわけです。「難しい」と思い込んでしまうと思考停止してしまうタイプなのかもしれません。後で聞いたところホットキーの実装方法、リストの移動の実装方法、動的読み込み（Ajax）の実装方法がごっちゃになっていて、難しく感じたそうです。
以上。
