2024
04
25
2013
04
15
シンプルな JavaScript テンプレート・エンジン - jTemplate 改良版
「シンプルな JavaScript テンプレート・エンジン - jTemplate」の改良版を公開しました。
重要な改良点
「jTemplate 0.0」と比較すると、次の点が大きな変更点です。
- 配列による繰り返し処理
- キー・バリュー形オブジェクトの第二層の取り込み
また、バージョンアップしたら、お知らせします。
PR
2013/04/15 (Mon.) Comment(0) JavaScript
2013
03
31
シンプルな 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 テンプレート・エンジン
※ infinite loop「クライアントサイドで動くJavaScript Template Engine７つ」 より。
2013/03/31 (Sun.) Comment(1) JavaScript
2012
10
11
iPhone/iPod Toutch用ブックマークレット
前回の記事「ピンイン表示ブックマークレット」でブックマークレットを紹介しました。しかし、これはiPhone/iPod ToutchのSafari（モバイルサファリ）では使えません。
なぜなら、モバイルサファリでは、テキストを選択状態にしても、ブックマーク操作を行った瞬間に選択が解除されてしまうからです。
モバイルサファリで選択したテキストを利用する場合には、最初にブックマークレットを起動しておき、その上でテキストを選択し、ジェスチャー操作を行うことによって、スクリプトを動作させるという方法がよいでしょう。
Hello! ブックマークレット
まず、簡単なサンプルを紹介します。
モバイルサファリでブックマークレットを登録するには、適当なページをブックマークしておき、それを編集でURLを書き換えます。
上記のスクリプトをコピペして、ブックマークレットを登録してみて下さい。登録後、適当なページでそのブックマークを選択し、戻ったページでジェスチャー操作をすると「Hello!」とアラートされます。なお、ジェスチャー操作とは、画面の上で親指と人差し指をこするような指の動きを言います。
テキスト選択 ブックマークレット
次に一段階前に進みます。ブックマークレットを起動後、テキストを選択し、ジェスチャー操作をすると、その選択したテキストがアラート表示されます。
encodeURIComponent ブックマークレット
もう一段階前に進みます。ブックマークレットを起動後、テキストを選択し、ジェスチャー操作をすると、その選択したテキストをURIエンコードした文字列がアラート表示されます。
ピンイン変換 ブックマークレット
さらに前に進みます。ブックマークレットを起動後、テキストを選択し、ジェスチャー操作をすると、その選択したテキストを簡体字とピンイン(pinyin)に変換したものをアラート表示します。
インターネットに接続していないと、APIを使用できません。
スクリプトの簡単な説明
簡体字とピンインの取得は、一橋大学附属図書館・情報検索サポート・漢字ピンインハングル読み変換APIを使用しています。"http://www.lib.hit-u.ac.jp/cgi-bin/pinyin/pinyin_json.cgi?MESG="に変換すべき文字をエンコードしたものを添えて投げると、callbackを関数名とするJSONP形式のデータが返ってきます。
返ってきたデータの処理方法をcallbackで定義します。上記では、簡体字とピンインをアラート表示させています。
Script要素を追加することによって、上記のAPIにリクエストを送ります。
p=d.createElement('script');
p.src='http://www.lib.hit-u.ac.jp/cgi-bin/pinyin/pinyin_json.cgi?MESG='+encodeURIComponent(s);
d.body.appendChild(p);
2012/10/11 (Thu.) Comment(0) Bookmarklet
2012
10
02
ピンイン表示ブックマークレット
中国語の勉強用に、ピンイン表示ブックマークレットを作成しました。
文字列を選択して、お気に入りに追加したブックマークレットをクリックすると、選択文字列の後ろに[pinyin]が追加されます。
ソース
ブラウザのお気に入りに新しいブックマークを追加して、適当な名前をつけ、プロパティのURLに上記コードをコピペして下さい。
使用前
使用後
「神楽坂雯麗 Google+」より
2012/10/02 (Tue.) Comment(0) Bookmarklet
2012
05
09
カウントダウンのスクリプト
ロンドン・オリンピック開幕が３か月を切りました。 「あと何日」とカレンダーの日付の下にメモしていましたが、ちょっと考えれば、自動的に計算できるもの。 JavaScript で算出してHTMLに表示すればいい。 インラインフレームに埋め込めるようにしておけば、あちらこちらに貼り付けられますね。
そう考えて作ってみたのが、これ、「ロンドンオリンピック開幕日・カウントダウン」
基準とする日時はいろいろ考えられますが、ロンドンのサマータイムの2012年７月27日午前0時としました。時差があるので、日本の午前8時ですね。
ちょっとした説明は「Count Down London」に掲載しました。
JavaScript を学び始めた頃、最初に嵌ったのが Date() オブジェクト。ちっと、その頃の感覚を思いだしました。
2012/05/09 (Wed.) Comment(0) JavaScript
