忍者ブログ

2018
07
24

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2018/07/24 (Tue.)

2013
04
15

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

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

■ jTemplate.0.1.1

重要な改良点

「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>
"

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

// 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 Engine7つ」 より。

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

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

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

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

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

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

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

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

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

06 2018/07 08
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア