XML2JSON+javascriptテンプレートエンジンでRSS表示

drk7.jpさんでXML2JSON serviceという面白いサービスが開始されました。

ということで早速ハックしてみました。

前のエントリーで書いたJavascriptテンプレートと組み合わせてめちゃくちゃ簡単にRSSを表示できます。

サンプルはこちら

使い方ですが、多分ソースをみてもらったほうが速いです。

//サンプルHTMLから抜粋

javascript code
  1. Event.observe(window, "load", function(){
  2.         new XML2JSON("<a href="http://feeds.feedburner.com/Inforno">http://feeds.feedburner.com/Inforno</a>", {container: "test", template : {element:"template"}});
  3. });
  4.  

初期化コードはｺﾚだけです。 containerでinnerHTMLに結果を流し込みたいElementを指定します。 templateはLyase.View.renderの引数と同じです。 例ではtextareaエレメントのid:"tempalte"のinnerHTMLをテンプレートとして扱います。

html code
  1. //テンプレート
  2.   <textarea id="template" style="display:none;">
  3.  
  4. <h3>< %= context.channel.title %></h3>
  5.  
  6. <ul class="items">
  7.       < % context.channel.item.each(function(item,index){%>
  8.  
  9.     <li><a href="<%= item.link%>" target="_blank">< %= item.title%></a></li>
  10.         < % if(index > 5){throw $break;}%>
  11.       < %})%>
  12.    </ul>
  13.   </textarea>
  14.  

こんな感じでテンプレートがかけるので、デザインの変更が大変楽になります。 またJSONデータ取得時のonloadを好きなメソッドに置き換えることもできるのでLyase.Viewを使わなくてもXML2JSONライブラリだけで おいしくいただけます。すきに改造してやってください、たいしたものじゃないですし（笑

07.27.08/12am
Posted at:
02.20.06/01am
Tags:
Comments:
0
Permalink

埋め込みjavascriptを実装してみました。

naoyaさんのJemplateの記事に触発されて埋め込みjavascriptを実装してみました。

同様の実装としてAjax Pagesがあるのですが、よりシンプルに実装してみました。コードにして50行。

サンプルファイルダウンロード

これは今作っているフレームワークの一部です。シンプルですがわりと使えるかと。 実際の動作はサンプルファイルを見ていただくとして

lyase_view.jsの説明どおり

javascript code
  1. /*
  2. * using innerHTML
  3. * -------------
  4. * //in HTML
  5. * <textarea id="template" style="display:none">
  6. * The value of x is:< %= context.x%>
  7. * </textarea>
  8. * //code
  9. * document.write(Lyase.View.render({element:"template"}, {x : 10}));
  10. *
  11. * using a template file
  12. * -------------
  13. * //in /template.jhtml
  14. * The value of x is:< %= context.x%>
  15. * //code
  16. * document.write(Lyase.View.render({file:"/template.jhtml"}, {x : 10}));
  17. *
  18. * Of course, you can embed more complex codes.
  19. * //in HTML, with prototype.js
  20. * <textarea id="template" style="display:none">
  21. * < % context.list.each(function(pair){%>
  22. * The value of < %= pair.name %> is: < %= pair.value%>
  23. * < % }) %>
  24. * </textarea>
  25. * //code
  26. * document.write(Lyase.View.render({element:"template"},
  27. * {list :[{name : "x", value : 10}, {name : "y", value : 20}]}));
  28. */
  29.  

こんな感じでjavascriptのコードが読み込めます。

また

html code
  1. <h1>< %= context.title %></h1>
  2.  この文章はLyase.Viewを使用して< %= context.fileName %>の内容を表示しています。
  3.  
  4.  
  5. 以下のようにクロージャも問題なく使用できます。
  6.  
  7. < % var c = "," %>
  8. < % context.list.each(function(num){ %>
  9.   < %= num+c %>
  10.  
  11. < % })%>
  12.  
  13. < %= render({file :"./sample2.jhtml"}, context)%> <!--ココに注目--!>
  14.  

このようにテンプレート内で別のテンプレートを呼び出すことも可能です。

テンプレートには文字列、textareaなどのinnerHTML、テンプレートファイルが使用できます。 prototype.jsのAjax.Updaterあたりをハックすれば結構使えるものになるんじゃないかなあ、と思ってみたり。

・2006年2月16日追記 id:brazilさんもjavascriptのテンプレートについて書かれてますね。 実は僕もHTML生成関数は作成しています。DOM版とHTMLタグ生成版で。 今回のライブラリのようなアプローチとどっちがいいか、となるともう少し検討が必要かな・・・

07.27.08/12am
Posted at:
02.15.06/01am
Tags:
Comments:
(1)
Permalink

About

Author:yuin(http://inforno.net/)

文学部文化学科卒という生粋の文系趣味プログラマ。

主にRuby、Javascript、PHP、JAVA,Python,C,Scala,Schemeなどを使っています。今はPythonな感じかもしれない。今後作曲活動なども復活するかもしれない。

Links

Pages

Recently

Tags

SF1 activesupport1 api3 binary3 blog1 book1 cltc1 compiler1 craftlaunch2 cui1 development9 drecom1 electronics1 emulator6 erlang1 essay9 fckeditor1 feed1 gae3 gui2 javascript14 job4 language1 library10 life4 lingr1 linux1 nes5 network1 nicovideo1 nlp1 ocaml1 parser6 programing2 prototype_js7 python33 python30001 ruby5 rubyonrails2 scala6 scheme1 scrap1 scriptaculous1 sexp1 tasktools1 template2 text2 tk1 typo2 vim2 webpy2 windows3 wordpress2 xrea1 yahoo3

Monthly Archives