寝太郎の江戸風呂。ね！

[PR]

2024/11/26 (Tue.)

シンプルな JavaScript テンプレート・エンジン - jTemplate 改良版

「シンプルな JavaScript テンプレート・エンジン - jTemplate」の改良版を公開しました。

■　jTemplate.0.1.1

重要な改良点

「jTemplate 0.0」と比較すると、次の点が大きな変更点です。

• 配列による繰り返し処理
• キー・バリュー形オブジェクトの第二層の取り込み

また、バージョンアップしたら、お知らせします。

2013/04/15 (Mon.) Comment(0) JavaScript

シンプルな JavaScript テンプレート・エンジン - jTemplate

JavaScript で利用できるテンプレート・エンジンは、後記のものが有名なようです。でも、自作したほうが利用しやすい場合もあります。自分が利用する機能に絞れば、コードもわかりやすく、軽量なものにできます。

そこで作成したものが、シンプルな JavaScript テンプレート・エンジン - jTempalte。

テンプレート変数は、デフォルトでは、PHP のSmarty風の次のようなものを想定しています。

$template ="
<div class="item">
<h4>{$name}</h4>
<p>{$text}</p>
</div>
"

データは、次のようなオブジェクト（連想配列)です。

$values={
 "name" : "NAME",
 "text" : "TEXT",
｝

jTemplate関数は、次のように記述します。

$str = jTemplate($template, $values);

変換後は、次のようになります。

$str ="
<div class="item">
<h4>NAME</h4>
<p>TEXT</p>
</div>
"

テンプレート変数が上記以外にも対応しています。

$template ="
<div class="item">
<h4>{%name%}</h4>
<p>{%text%}</p>
</div>
"

このようにテンプレート変数が上記以外の場合は、第３引数を与えます。

// ver.0.0
$str = jTemplate($template, $values,['{%','%}']);
// ver 0.1.0
$str = jTemplate($template, $values,'{%*%}');

ユーティリティとして、テキストファイルの読み込み、JSON風テキストのオブジェクト化も用意しています。

$str = jTemplate($str,$values,$formats);
$str = jTemplate.load($filepath);
$str = jTemplate.render($filepath,$values,$formats);
$obj = jTemplate.json_decode($JSON);

HTML文書本体とテンプレートファイル、データファイルを分離して管理できます。

【参考】JavaScript テンプレート・エンジン

• Mustache
• Hogan
• Handlebars
• Underscore
• EJS
• jQuery.EJS
• PURE

※　infinite loop「クライアントサイドで動くJavaScript Template Engine７つ」　より。

2013/03/31 (Sun.) Comment(1) JavaScript

カウントダウンのスクリプト

ロンドン・オリンピック開幕が３か月を切りました。 「あと何日」とカレンダーの日付の下にメモしていましたが、ちょっと考えれば、自動的に計算できるもの。 JavaScript で算出してHTMLに表示すればいい。 インラインフレームに埋め込めるようにしておけば、あちらこちらに貼り付けられますね。

そう考えて作ってみたのが、これ、「ロンドンオリンピック開幕日・カウントダウン」

基準とする日時はいろいろ考えられますが、ロンドンのサマータイムの2012年７月27日午前0時としました。時差があるので、日本の午前8時ですね。
 

ちょっとした説明は「Count Down London」に掲載しました。

JavaScript を学び始めた頃、最初に嵌ったのが Date() オブジェクト。ちっと、その頃の感覚を思いだしました。

2012/05/09 (Wed.) Comment(0) JavaScript

ブックマークレット整形フォーム

ブックマークレット(Bookmarklet)用のスクリプトは、URIスキームに適合するよう１行書きにするとともに特定の文字をURIエンコードする必要があります。
そこで、改行文字(\n)を取り除き、半角スペースを"%20"に置き換えるフォームを作りました。

2011/12/14 (Wed.) Trackback() Comment(0) JavaScript

静的HTML向けパラメータ取得&クエリストリング構築用ライブラリ

パラメータからクエリストリングを組立てる、また、クエリストリングからキーと値を取得する。

各種のWEBサービスの API が JSON に対応しているので、静的な HTML でも、JavaScript を用いて、動的なページが作成できます。

WEBサービスの API にリクエストする URL を組み立て、返ってきたデータをコールバック関数で処理します。リクエストする URL の組み立てにあたっては、数種類のパラメータを組み合わせて、クエリストリングを作成する必要があります。今回は、パラメータからクエリストリングを組み立てる関数を考えましょう。

また、静的HTMLファイル自身に対してもクエリストリングを付加してリクエストできます。このクエリストリングをキーと値のペアに分解すれば、これをWEBサービスの API に対するパラメータとして使用できます。クエリストリングからキーと値のペアを取得するメソッドも作りましょう。

さて、これから作成する関数は、次の２つに対応することを主な目的とし、付随的なメソッドを付け加えることにします。

(1) ブラウザのアドレスバーに表示される URL からパラメータを取り出して、ハッシュオブジェクトにする。

　　これは、現在のページの URL が
　　http://rakuten.netarrows.nobody.jp/ranking.html?genreId=1234
    ならば
　　{genreId:'1234'}
    という形のハッシュオブジェクトを取得しようというもの。

(2) ハッシュオブジェクトから WEB API にリクエストする URL を生成する。

    {developerId:'abcd',
     operation:'ItemRanking',
     version:'2010-08-05',
     callBack:'callback',
     genreId:'1234'
    }
    という形のハッシュオブジェクトから
　　http://api.rakuten.co.jp/rws/3.0/json?
　　developerId=abcd
　　&operation=ItemRanking
　　&version=2010-08-05
　　&callBack=callback
　　&genreId=1234
    という API へのリクエスト用 URL を生成するもの。

[1] URLからのパラメータの取り出し。

これは、window.location.search の文字列から先頭の"?"を消去し、"&"で区切った文字列を、さらに"="で区切ります。

getParams=function(){
    var param={}

    var a=location.search.slice(1).split('&');

    for(var i=0;i

さらに特定のパラメータの値を取り出したいなら、

getParam=function(key){
    var param=getParams();

    return return param[key];;
}

[2] ハッシュオブジェクトから WEB API にリクエストする URL を生成する。

これは、(1)と逆のことを行います。 まず、ハッシュオブジェクトからクエリストリングを生成しましょう。

buildQueryString=function(param){
       var a=[];

       for(k in param){

         a.push(k+'='+param[k]);

       }

       return a.join('&');

}

次に元となるURL にパラメータを付加します。

buildUrl=function(param,baseUrl){
    var queryString=param?'?'+buildQueryString(param);''
    return baseURL+queryString;
}

[3]URL生成関数を統合する。

上記で個別に記述した関数を wL という名前の元に統合しましょう。 処理上、wL() と wL.get() に分けます。

(1) wL()

a) wL()

　引数がない場合、 　　window.location オブジェクトを返します。 　　したがって、wL().hash　は window.location.hash と同じです。

b) wL(param,url)

引数２つ。 　　第二引数に第一引数のパラメータをクエリストリングにした文字列を返します。 　　パラメータのクエリストリング化にあたっては、wL.get()を使用します。 　　第二引数の指定がない場合には、window.location.pathname が指定されたものとみなします。

wL=function(param,path){
  if(!param){
     return window.location;
  }else{
     path=path?path:window.location.pathname;
     window.location.href=wL.get(param,path);     
  }
}

(2) wL.get()

a) wL.get()

引数なし。

　　window.location にクエリストリングがある場合、キーと値をペアとするハッシュオブジェクトを返します。

　　例えば、"?p=A&q=B"の場合、 　　　　{p:"A", q:"B"} を返します。

　　内部的には、wL.get(window.location.search) を実行し、b) wL.get(param) を利用しています。クエリストリングがある場合には、3)の「引数が "=" のある文字列の場合」によって、ハッシュオブジェクトが取り出されます。

　　window.location にクエリストリングがない場合、null を返します。

b) wL.get(param)

引数１つ。

　　1) 引数が配列の場合

　　　　各配列要素を"&"で結合した文字列を返します。 　　　　例えば、["p=A","q=B"] の場合 　　　　　　　　 "p=A&q=B" を返します。 　　　　なお、配列の要素がハッシュオブジェクトの場合、次の「ハッシュオブジェクトの場合」で文字列に変換したうえで結合します。

　　2) 引数がハッシュオブジェクトの場合

　　　　キーと値を"="で結合した文字列をさらに"&"で結合した文字列を返します。 　　　　例えば、{p:"A",q:"B"} の場合 　　　　　　　　"p=A&q=B" を返します。

　　3) 引数が "=" のある文字列の場合

まず "&" で区切り、さらに"="で区切りキーと値のペアとなるハッシュオブジェクトを返します。

　　4) 引数がクエリストリングのキーの場合

　　　　その値を返します。 　　　　例えば、クエリストリングが"?p=A&q=B"の場合、 wL.get('p')　は "A" を返します。

　　5) #始まり文字列

　　　　そのまま返します。 　　　　window.location.hash に値を入れられるようにするためです。

　　6)それ以外

　　　　null を返します。 　　　　処理を分岐出きるようにするためです。

c) wL.get(param,path)

引数２つ。 　　第二引数に wL.get(param) の結果を付加した文字列を返します。 　　wL.get(param) の結果に　"="　が含まれている場合には、"?"を第二引数の後に付け加えます。 　　例えば、wL.get({p:"A",q:"B"},"http://www.example.com/api")は、 　　"http://www.example.com/api?p=A&q=B" を返します。

wL.get=function(param,path){
  if(!param){
    if(window.location.search){
      return wL.get(window.location.search);
    }else{
      return null;
    }
  }else if(!path){
    if(typeof param=='object' && param.length){
       for(var i=0,s='';i

jQuery の getJSON を利用する場合

param={
 q:'twitter',
 callback:'callback'
};
path='http://search.twitter.com/search.json';
$.getJSON(wL.get(param,path)+'&jsoncallback=?',callback);

参考

wL.js

2011/04/18 (Mon.) Trackback() Comment(0) JavaScript