スマートフォン向けサイトでよく見る「もっと見る」を押す度に延々と下にスクロールしていくアレをlyase_viewで楽に実装する
twitterとかgmailとかでやってる、一番下までスクロールすると「もっと見る」みたいなリンクがあって、それをクリックすると下にもっと広がるアレ。
やってることは、クリックされるたびにjavascriptで
- データを用意する
- テンプレートを用意する
- テンプレートにデータを埋め込んで既存のDOMにappendする
みたいな。いくらでも実装はあるけど、基本こんなの。
同じ事をしたいと思ったときに自分で0から実装するのがめんどかったので、javascriptでテンプレートエンジンいいの無いかなーと探してもどれもイマイチだったんだけど、lyase_viewというのがかなり良かった。
軽いし分かりやすいし、javascript何でも書けるし、ERBとタグ同じだし。
inforno :: 埋め込みjavascriptを実装してみました。
というわけでサンプル作った。
https://github.com/hirafoo/lyase_sample
…いや、styleは無いよ。サンプルだし。別にbuttonでなくてもいいし、適当なDOMにイベント割り当てればよし。
javascript
lyase_viewはprototype.jsに依存している。使ってもいいんだけど、ロードするライブラリは減らしたいし、jQuery使いたいし、いや共存できるけどちと書くときにめんどいので、prototype.jsに依存しないように書き換えた。
ソース読んだらなんて事は無い、テンプレートを用意するために外部ファイルを読み込んでいるところでAjaxオブジェクト作っているところでしか使って無かったので、jQuery.ajaxで置き換えた。
% diff lyase_view.js lyase_view_org.js
88,95c88
< $.ajax({
< async: false,
< type: "GET",
< url: options.file,
< success: function(data) {
< template = data;
< }
< });
---
> template = (new Ajax.Request(options.file,{asynchronous : false})).transport.responseText;asyncをfalseにしないと非同期で実行してしまうのでfalseにするだけ。
これでjQueryだけで使えるようになった。
これを書き換えて使うのはいいのかと思った。ソースの先頭のコメントを見るとどうもArtistic Licenseっぽい。
調べたら、オリジナルの入手元を明らかにする義務しかないっぽい。
元から書いてあるから大丈夫だな、多分。
perl
で、テンプレートを用意するところは出来た。次はデータの用意。
静的なページ読み込んでもしょうがないので、サンプルでは /perl_js/json.pl にアクセスすると適当に動的にデータを返すapiでっちあげた。
テンプレート側では受け取った、json値を表す文字列をevalしてデコードしてやる。
別にjsonでなくてもperlでなくてもどうにでもなる。あくまでサンプル。
その他
外部ファイルにテンプレートを用意する手法の欠点として、簡単に外部ファイルが見られてしまうというのが挙げられる。
隠したければ頑張れば何とでもできるけど、めんどい。XSSなどへの対策がしっかり出来てればいんじゃないのというスタンス。
というわけで。「もっと見る」以外にも使いどころは沢山ありそう。
