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

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

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

サンプルはこちら

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

サンプルHTMLから抜粋

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

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

//テンプレート
  <textarea id="template" style="display:none;">

<h3>< %= context.channel.title %></h3>

<ul class="items">
      < % context.channel.item.each(function(item,index){%>

    <li><a href="<%= item.link%>" target="_blank">< %= item.title%></a></li>
        < % if(index > 5){throw $break;}%>
      < %})%>
   </ul>
  </textarea>

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


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

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

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

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

lyase_view.jsの説明どおり

/*
 *   using innerHTML
 *   -------------
 *   //in HTML
 *   <textarea id="template" style="display:none">
 *     The value of x is:< %= context.x%>
 *   </textarea>
 *   //code
 *   document.write(Lyase.View.render({element:"template"}, {x : 10}));
 *
 *   using a template file
 *   -------------
 *   //in /template.jhtml
 *   The value of x is:< %= context.x%>
 *   //code
 *   document.write(Lyase.View.render({file:"/template.jhtml"}, {x : 10}));
 *
 *   Of course, you can embed more complex codes.
 *   //in HTML, with prototype.js
 *   <textarea id="template" style="display:none">
 *     < % context.list.each(function(pair){%>
 *          The value of < %= pair.name %> is: < %= pair.value%>
 *     < % }) %>
 *   </textarea>
 *   //code
 *   document.write(Lyase.View.render({element:"template"},
 *     {list :[{name : "x", value : 10}, {name : "y", value : 20}]}));
 */

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

また

<h1>< %= context.title %></h1>
 この文章はLyase.Viewを使用して< %= context.fileName %>の内容を表示しています。


以下のようにクロージャも問題なく使用できます。

< % var c = "," %>
< % context.list.each(function(num){ %>
  < %= num+c %>

< % })%>

< %= render({file :"./sample2.jhtml"}, context)%> <!--ココに注目--!>

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

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


Typoでのlive search文字化けについては多くのブログで解決策が示されています。

最新でもやっぱり文字化けしているわけで。 僕も直してみました。

Index: app/views/shared/_search.rhtml
===================================================================
--- app/views/shared/_search.rhtml      (revision 850)
+++ app/views/shared/_search.rhtml      (working copy)
@@ -7,4 +7,4 @@
     :loading => "Element.show('search_spinner')",
     :complete => "Element.hide('search_spinner')",
     :update => "search-results",
-    :with => "'q=' + escape($F('q'))" -%>
+    :with => "'q=' + encodeURIComponent($F('q'))" -%>

という感じで1行直せばイケルはずです。(ブラウザはあまり確認してませんが・・・) あ、このファイルはテーマにも含まれてますので注意です。 てゆーかなんでencodeURIComponentじゃなくてescapeなんだろ・・・ ただこの方式だとキャッシュを再構築しないとダメなんでちょっとイヤだなー・・・。