寒い冬はこたつでjavascriptを始めよう。iphoneで気軽に体験できるプログラミング学習

app01

ついに雪降りましたね。寒いです。我が家は諸事情によりこたつは出していませんが、こたつたまりませんよね。
こたつでうたた寝する幸福感とその後から襲ってくる罪悪感。最高です。

そんなこたつで罪悪感を感じる事なく、プログラミングの勉強ができるツールがリリースされたのでご紹介します。
codecademyというプログラミング学習サイトがあるのですが、その iphoneアプリです。

HOUR OF CODE APP

codecademyはご存知の方も多いかと思いますが、PCのブラウザ上で問題に答えながらプログラミングの勉強ができるサービスです。ステップバイステップで勉強が進められるので学習の導入用としてとてもいいサービスです。
そのiphoneアプリなのですが、データ型、変数、条件分岐など基礎的な部分を簡単な問題に答えながら進められます。

英語なんですが、それほど難しいくないと思います。
入力も、ほぼ選択式になっているので、簡単です。(でたらめに選んでも答えがあってしまいますが…)

あまり詳しい説明がでないので、ちょっとあれなんですが。
ゲーム感覚で、気軽にjavascriptのさわりを学べるので面白いと思います。

レスポンシブデザイン対策!デバイスのサイズに応じてjava scriptを呼び変える

スマホ対応のサイトを作る時に、CSSはMedia Queriesで対応する事が一般的です。ではjava scriptはどうしていますか?PCとスマホをワンソースで対応しなければならない時、java scriptの処理って割と重大な問題になってくると思います。たとえば、PCサイトでjava scriptを使ってリッチな表現をしたいけど、同じscriptをスマホで実行されたら困るとか、PCとスマホで別々の表現をしたいとか。

僕もあまり経験がないので、色々試行錯誤をしているのですが、個人的にベストプラクティス的な対策が見つかったのでシェアしたいと思います。
実機検証は、モバイル端末はiphone5だけなので、実践で使うには少し検証が必要だったりしますけど。

まず、ブレイクポイントによる分岐です(CSSでいうところのMedia Queriesですね)が、window.matchMediaを使って実現します。window.matchMediaを使うと、Media Queriesのようにウインドウの幅で処理を変える事が可能になります。

問題はIEの対応がIE10以降という事なんですが…
IE9以前に関しては、別途分岐をしてPCで読みこませるべきファイルをロードしてあげる必要があります。
この時点で、実用性が激落ですけど、なにか?

次にjava scriptの読み込みですが、window.matchMediaはjava scriptのコードなので当然その分岐の中にscriptタグで読み込む訳にはいきません。
代わりに使ったのが、jQuery.ajax()です。
.ajaxを使うことで動的にjava scriptファイルを読み込む事が可能になります。

で、実際のコードがこちら。

jQuery(document).ready(function($) {
	//PC環境の場合
	if (window.matchMedia( '(min-width: 484px)' ).matches) {
		$.ajax({
			url: 'pc.js',
			dataType: 'script',
			cache: false
	   });
	//モバイル環境の場合
	} else {
	    $.ajax({
			url: 'mob.js',
			dataType: 'script',
			cache: false
		});
	};
});

デモ
PCで表示すると「PCサイトです」と表示され、画面サイズが484px以下の環境だと「モバイルサイトです」と表示されます。この文字列は、それぞれ別々のjsファイルから表示されるようになっています。
[デモのファイルにviewportの設定を忘れていました。修正済みです]

簡略化するために、レスポンシブとはいえ、PCでの閲覧とモバイル(ポートレートモードのみ)の分岐で、ウインドウサイズを動的に変えた時に再読み込みは実装していないので、画面をグリグリ小さくした場合は、手動で再読み込みしなければなりません。(その辺は、window.matchMediaのaddListenerで対応できるようです)

大胆に割り切って使えば、割と実務に耐えられるんじゃないかと思っているのと、ウインドウサイズによってばさっとjsファイルを分けられるので、開発も簡単に進められるんじゃないかと思います。

モバイル対応は、もはや必須になりつつあり、さらに案件によってはあまりコストもかけられないという事もありますので、自前でモバイル用のワークフレームを用意しておいて、適用させれば、「なから」モバイルでも見れるようにしておくというのも必要かもしれませんね。

Javascriptだけで、複数のjsonを読み込んで時系列に並べ替えて出力したりしてみる話

ブログのタイトルって、難しいですよね。毎回悩みます。
さんざん悩んだ結果がこれだったりすると、悲しくなってきます。

はい、本題へ。ブログなどの外部jsonファイルを読み込んで表示する方法はいろいろあります。
そんな時に複数の情報をまとめてよって、オーダーがきたらどうしますか?
phpとか使える人はバックエンドで処理したりできるんでしょうが、大人の事情でそれもできなかったり、いやそもそも僕はphpわからないけど、という場合、java scriptで対応するしかありません。なかば、強引な理論で、今日はその辺のテクニックのご紹介をば。

実際のデモを先にご覧いただくと、こんな感じ。

複数のブログ更新情報を持ってきて時系列に並べ替えるデモ

APIを扱いやすかったので、うちの会社で運営しているブログを引っ張ってきました。
(自分のあまり更新しなくなったブログと、開発者様のブログのフィードを勝手に拝借しています。)
複数のブログからjsonpを読み込んでひとまとめにして表示しています。
どんな事をしているかというと…

読み込まれたデータを格納するためのグローバル変数を用意して
それぞれのjsonを拾ってきて、グローバル変数の中に配列としてぶち込む。
通信が終わったら、配列として用意されたデータを日付でソートして
htmlとして出力する。

って感じです。

ここで、ポイントとなるのが、jsonを読み込んだ後の処理です。
ご存知の通り、jsonの読み込みは非同期で行われるので、そのことを念頭において処理しないと
jsonの読み込みが終わっていない状態で日付のソート処理を走らせると当然、ソートすべき情報がないので、何も表示されなくなってしまいます。

通信が終わった後に処理をするという形にしなければなりません。
どうやって?

$.Deferredの登場

これを使うと、一定の処理を行った後に次の処理を行うという順番付けができるようになります。
えっと、詳しくは、下記のサイトを参考にしてください。

jQuery.Deferredって何 – Takazudo hamalog
爆速でわかるjQuery.Deferred超入門 – Yahoo! JAPAN Tech Blog

残念ながら、説明するだけの知識はもっておりません。

一応、コードを晒しておきます。


$(document).ready(function() {
//拾ってきた情報を入れるグローバル変数
var feedsAllItem = [];

  //feedを拾ってくる関数 その1
function getFeed01() {
var dfd =$.Deferred();
$.ajax({
url:’http://www.matsuaz.com/4_1/json.js?max=8&full=true’,
cache:true,
dataType:”jsonp”,
}).then(function(json){
for (var i = 0; i < json.item.length; i++) { feedsAllItem.push({ title: json.item[i].title, link: json.item[i].link, postDate: json.item[i].date }) }; dfd.resolve(json); },function(){ dfd.reject('半人前ブログの取得に失敗しました'); }); return dfd.promise(); };   //feedを拾ってくる関数 その2 function getFeed02() { var dfd =$.Deferred(); $.ajax({ url:'http://www.matsuaz.com/matsumotojs/json.js?max=8&full=true', cache:true, dataType:"jsonp", }).then(function(json){ for (var i = 0; i < json.item.length; i++) { feedsAllItem.push({ title: json.item[i].title, link: json.item[i].link, postDate: json.item[i].date }) }; dfd.resolve(json); },function(){ dfd.reject('Matsumoto.jsの取得に失敗しました'); }); return dfd.promise(); };   //それぞれのFeedを読み込んでから、日付でソートして、HTMLの出力をする $.when( getFeed01(), getFeed02()) .done(function(){ feedsAllItem.sort(function(a, b){ return ( a.postDate < b.postDate ? 1 : -1); }); for (var i=0; (i<10);i++) { var postedata = [{ link: feedsAllItem[i].link, postDate: feedsAllItem[i].postDate title: feedsAllItem[i].title }];   //出力するときは、handlebars.jsにお世話になっております。 var template = Handlebars.compile( $('#template').text() ); $('#feed').append( template(postedata) ); } }); }); [/javascript] で、結局なにが言いたいかというと ajaxは、割とよく使われるんですが、ついでに$.Deferredも少し覚えると、読み込んだ後に加工したり、というのが簡単にできるようになります。それって表現の幅が広がるという事で、とてもハッピーなことですよね。 クライアントにできません!っていわなくても済むし。(これ実話) そんな訳で、ちょっと背伸びした記事でしたが、参考になれば… というか、個人的にこの手の処理はすごく使うので、とても勉強になりましたです。はい。

Google Mapの色を変えてみるの巻

完全に自分向けのメモです…
Google Map V3にはstyled mapというAPIが用意されています。
これを利用すると、Google Mapの色を自由に変更できます。

方法は、専用のスタイル情報のjsonを読みこませるという形なんですが(詳しくは後ほど)
そのスタイル情報を生成するジェネレータまで用意されています。

マップ スタイル設定ウィザード

これを使うと、細かく色味の調整が可能になります。
個人的な感想ですが、地図のすべての要素の色をそれぞれ指定できます。すごく魅力的なんですが、ノンデザイナーな僕には途方も無い作業になり、挫折しました…
かわりに、全体の色味を調整することも可能ですので、そこから始めたほうがいいかもしれません。

マップ スタイル設定ウィザードの使い方

色の調整は、jsonファイルで設定可能です。もちろん、ロジックがわかっていて、この色にするってのが明確であれば、わざわざマップ スタイル設定ウィザードを使わなくてもいいかもしれませんが・・・可視的に調整しながら、設定したほうがいいと思いますので、ご紹介します。

1.色みの調整

Feature typeで適用させたい要素を選択します。
全体的に変更したい場合は、「ALL」を選んでおきます。

色みを調整する場合は、「Hue」にチェックを入れて、使いたい色を指定します。
「Saturation」は彩度になりますので、カーソルを左にずらすと色味がなくなります。
「Lightness」は明るさ、「Gamma」はガンマ値の調整になります。
調整して、いい感じになったら、右側の「add」をクリックするとスタイル情報が保存されます。今回はALLを選びましたが、地図の要素を個別に調整する場合は、それぞれ保存しておきます。

styledmap

2.不要な要素の削除

たとえば、道だけ消したいとか、そんなわがままも叶えてくれます。
消したい要素を選んで、「Visibility」を「off」にします。

その他、かなり細かく設定できます。割りと破綻しやすいっすけど・・・
色々調べてみたら、カヤックさんの中の人が変態的なジェネレータを作っていらっしゃいました。
個別にカスタマイズする場合はこちらの方が便利ですね。

Google Mapへの適用方法

マップ スタイル設定ウィザードで設定したjsonを吐き出しておきます。
後は、googleマップに適用させるだけです。

色情報のjsonを変数にセットして

var styles = [
 {
  stylers: [
   { "hue": "#00b2ff" },
   { "saturation": 49 },
   { "lightness": 20 },
   { "gamma": 1.15 }
  ]
 }
];

Google Mapのオプションに指定してあげるだけです。

       var options = {
         zoom: 16,
         center: new google.maps.LatLng(36.239081,137.96947),
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         scaleControl: true,
         styles: styles
       };

DEMO

非常に簡単です。
この方法ですと、デフォルトの色自体を変えてしまいますので、「いや、普通のも見せたいよ」っていう場合は、Google MapのmapTypeとして(航空地図と同じような位置づけ)定義する方法もあります。

詳しくは、Googleの公式ドキュメントをご覧ください。

このAPI自体は、前から知っていましたが、当時は使用制限があるようなことを聞いていたので手をつけずにいました。調べてみると、styledmap自体の制限はないようですね。
色を変えることで、サイトとの調和も取れるようになります。(黒ベースのサイトだと結構うきますからね、デフォルトの色味だと)
逆に見慣れない色ですとユーザーの使い勝手的にどうなのか?とかかっこよさを重視しすぎることで、視覚に障害がある人にとって使いにくくなる可能性もあります。
状況を考えて使っていった方がよさそうですね。

google mapでzoomしたり、マーカーをアニメーションさせたり、情報ウィンドウを閉じたりする

最近google mapをカスタマイズする機会が多いです。
少しづつですが、理解してきた部分もありますので、google mapの小ネタを3つほどご紹介します。

ズームレベルの調整

google mapを描画するときには、必ずズームレベルを指定しますが、これをイベント発生時に変更剃る方法です。
例えば、マーカーをクリックした時に情報ウィンドウを表示しながら、その場所をズームアップするとか。

DEMO

google.maps.event.addListener(marker, 'click', function() {
  map.setZoom(17);
  infowindow01.open(map,marker);
});

マーカーにアニメーションをつける

ネタってほどでもないのですが、たまに見かけるマーカーが降ってくるやつです。
デフォルトの関数で簡単に設定できます。
makerのオプション設定で
animation: google.maps.Animation.DROP
とするだけです。

デモでは、複数のマーカーを順番に落としています。
マーカーの場所を定義しておいて、それをsetTimeoutで時間差表示させています。

DEMO

var latlng = new google.maps.LatLng(36.230012,137.964749);
//markerの位置情報をセット
var positions = [
  new google.maps.LatLng(36.2306,137.964456),
  new google.maps.LatLng(36.238631,137.969306),
  new google.maps.LatLng(36.231085,137.982566),
  new google.maps.LatLng(36.242127,137.968919)
];

var map;
var markers = [];
var iterator = 0;

var options = {
    zoom: 12,
    center: latlng,
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map'), options);

//位置情報の配列から順番に表示させる
function drop() {
  for (var i = 0; i < positions.length; i++) {
    setTimeout(function() {
      addMarker();
    }, i * 200);
  }
}

function addMarker() {
  markers.push(new google.maps.Marker({
    position: positions&#91;iterator&#93;,
    map: map,
    draggable: false,
    animation: google.maps.Animation.DROP
  }));
  iterator++;
}
drop();
&#91;/javascript&#93;

<h4 class="subTitle"><span>情報ウィンドウを一つしか表示させない</span></h4>
google map v3になってから、情報ウィンドウは自分で閉じない限りいくつでも表示されてしまいます。あまりユーザビリティ的によくないので、情報ウィンドウは常に一つ以上表示させない方法です。

ざっくり紹介すると
情報ウィンドウの状態を記録する変数(currentInfoWindow)を用意しておいて、情報ウィンドウを開く時は、必ずcurrentInfoWindow.close()とすることで情報ウィンドウは一つだけしか表示させないということです。

<a href="http://googlemaps.googlermania.com/google_maps_api_v3/map_example_singleInfoWindow.html">Google Maps活用講座さん</a>を参考にしました。

<a href="http://meusonho41.com/demo/2013/06/04/index03.html">DEMO</a>

[javascript]
var currentInfoWindow = null;//情報ウィンドウの状態を記録する変数

var latlng = new google.maps.LatLng(36.230012,137.964749);
var options = {
    zoom: 12,
    center: latlng,
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), options);

var marker01 = new google.maps.Marker({
    position: new google.maps.LatLng(36.230012,137.964749),
    animation: google.maps.Animation.DROP,
    map: map
});

var infowindow01 = new google.maps.InfoWindow({
    content: "松本駅です"
});
google.maps.event.addListener(marker01, 'click', function() {
  //currentInfoWindowが空でなければ閉じる
    if (currentInfoWindow) {
      currentInfoWindow.close();
    }

  //情報ウィンドウを開いて、状態を記録する
    infowindow01.open(map, marker01);
    currentInfoWindow = infowindow01;
});

var marker02 = new google.maps.Marker({
    position: new google.maps.LatLng(36.238874,137.968962),
    animation: google.maps.Animation.DROP,
    map: map
});

var infowindow02 = new google.maps.InfoWindow({
    content: "松本城です"
});
google.maps.event.addListener(marker02, 'click', function() {
    if (currentInfoWindow) {
      currentInfoWindow.close();
    }
    infowindow02.open(map, marker02);
    currentInfoWindow = infowindow02;
});

markerを表示するあたりがかなり冗長な書き方をしていますが、ご愛嬌ということで。
via Google Maps活用講座|Maps API v3でv2のように、1つだけの情報ウィンドウが開くようにする

ノンプログラマーな僕らからすると、googleマップいちいち表示させるのめんどくせぇってこともありますが、基本を理解していると意外と簡単に色々なことができたりします。
今回紹介したのは、その一部ですが、こういったテクニックを覚えておくと地味に便利だったりするかと思います。というか、今回のネタのいくつかは実際に少しはまったりしたことだったりしますので、備忘録として。はい。

java scriptの配列をソートしたり、トリミングしたりの話

完全に自分向けのメモですが、javascriptの配列やらオブジェクトの扱いでハマったので備忘録としてまとめます。

配列のソート

配列をソートする時は、sort()関数を利用すると簡単にできます。

$(document).ready(function() {
  var array= [
     {date:'2013/1/5', title:'あああああ'},
     {date:'2012/10/1', title:'いいいいい'},
     {date:'2012/2/1', title:'ううううう'},
     {date:'2013/3/5', title:'ええええ'},
     {date:'2011/8/25', title:'おおおおおお'},
     {date:'2010/10/1', title:'かかかかか'},
     {date:'2015/10/1', title:'ききききききき'},
     {date:'2013/2/1', title:'くくくくく'},
     {date:'2012/11/4', title:'けけけけけけけ'},
     {date:'2009/8/25', title:'ここここここここ'}
   ];

     array.sort(function(a, b) {
          return ( a.date < b.date ? 1 : -1);
     });

     for (var i=0;i<array.length;i++) {
          $('#show').append(array&#91;i&#93;.date + ':' + array&#91;i&#93;.title + '<br>');
     }

});

sortの引数で、ソートしたい項目を指定してあげるだけです。

return ( a.date < b.date ? 1 : -1);
&#91;/javascript&#93;

<a href="http://meusonho41.com/demo/2013/03/13/demo01.html">DEMO</a>

DEMOを見るとわかるように日付もそのまま使えます。
rssなどの日付は「Fri, 02 Nov 2012 16:01:44 +0900」みたいな形式で返ってきますが、その形式でも大丈夫なようです。

<h4 class="subTitle"><span>配列のトリミング</span></h4>
トリミングという表現が正しいのかわかりませんが、要はたくさんある情報から始めから必要な分だけ取り出したいという事です。

[javascript]
for (var i=0;(i<array.length && i<5);i++) {
  $('#show').append(array&#91;i&#93;.date + ':' + array&#91;i&#93;.title + '<br>');
}

このようにすれば、配列の始めから5つ分だけ取り出せます。

DEMO

jQueryなど、web制作の際には不可欠なものとなってきていますが、java scriptの根っこの部分をきちんと理解していないと、思わぬ落とし穴にはまってしまうことも多いかと思います。ちゃんと勉強しなきゃと思う日々でございます。

jqueryのセレクタの挙動に関する考察

なんとも硬いタイトルでございますが、うまくタイトルが思いつかなかったのでご許しを。
何を書きたいかというと、jqueryで

$('li:even').addClass('even');

みたいなセレクタの挙動について、最近ハマったことをお伝えしたかったんです。

普通に書くとこんな感じになります。

<h1>孫家の人々</h1>
<ul class="list">
 <li>孫悟空</li>
 <li>孫悟飯</li>
 <li>チチ</li>
</ul>
$(document).ready(function(){
 $('ul.list li:even').addClass('even');
});

DEMO1
普通に奇数行にスタイルがつきます。

では、ulが複数あった場合はどうでしょうか?

<h1>孫家の人々</h1>
<ul class="list">
 <li>孫悟空</li>
 <li>孫悟飯</li>
 <li>チチ</li>
</ul>

<h1>サイヤ人な人々</h1>
<ul class="list">
 <li>孫悟空</li>
 <li>孫悟飯</li>
 <li>ベジータ</li>
 <li>ナッパ</li>
 <li>ラディッツ</li>
</ul>

DEMO2

あれ?
2つ目のリストがずれている?

そうなんです。
上記のような記述方法だと、ulそれぞれに対してではなく、2つ目以降のulも一つ目のulの続きとして認識されてしまいます。そのため、DEMO2のような表示になってしまうという訳です。

ではどうすれはいいのか?

$('ul.list').each(function(){
 $(this).find('li:even').addClass('even');
})

こんな感じで.each()を使って、ループを回してあげると対象のエリアが限定されて意図通りの表示ができるようになります。

DEMO3

地味な事ですが、知らないとちょっと困ってしまうトピックスでした。

jQueryがもたらしてくれる、あの面倒くさい流し込みを楽にしてくれる方法

完全にタイトルで釣ってみました。。。
えっと、釣りは釣りなんですが、jQueryがもたらしてくれる、あの面倒くさい流し込みを楽にしてくれる方法に気付いたので、そのことを書きます。

ページの流し込みで大量の項目を入力しなければならない状況にありまして、
投稿毎に
フォームA 連番の数字 
フォームB A+固定の文字列
フォームC 同じような感じ
みたいな感じでフォームに項目を入力しなければなりませんでした。

手入力でも、ぜんぜんできる範囲の事ですが、あまり多いと精神衛生的によくないです。

で、考えたのが、jQueryを使って項目Aに入力されたら、その値を取得してフォームB、Cに自動で文字列を挿入してやろうということ。

実際のコードはこんな感じです。

$('input#a').change(function () {
  var myNo = $(this).val();
  var Bitem = 'Bだよ' + myNom+ 'hogehoge';
  var Citem = 'Cだよ' + myNom+ 'mumumu';
  $('input#b').val(Bitem);
  $('input#C').val(Citem);
});

今までは、どちらかというと、エンドユーザーに少しでも良い体験をしてもらうためにjqueryを使っていましたが、逆転の発想で、自分が更新する時に面倒なことを処理してもらうために使った訳です。
大した事ではないのですが、これだけでも、作業時間が大幅に短縮されました。

で、何が言いたいかというと、コーダーもこうゆうテクニックを覚えて手抜きをしてもいいんじゃないかということです。手抜きというか、効率化ですか。
巷では色んなジェネレータが紹介されていますが、それ以外にも身近なところでも業務を効率よくこなすテクニックは隠れているかもしれませんね。

Handlebarsがいいかもという話

このブログでも何度か登場していますが、jqueryのテンプレートエンジンであるhandlebars.jsがとても扱いやすいと思いますので、備忘録も兼ねて、使い方をまとめてみたいと思います。

Handlebars.jsとは?

handlebars.jsは、jqueryのテンプレートエンジンです。jsonやxmlを展開してhtmlを生成する時にテンプレートとして利用できます。
jqueryでは.append()のようなコンテンツを追加するプロパティが用意されています。ただこれだけだと、複雑な構造を吐き出すときは、どうてもメンテナンス性が悪くなってしまいますので、handlebar.jsのようなテンプレートエンジンを利用したほうが、コードがすっきりします。

なんでそんなものを使うの?

一番は、メンテナンス性だと思います。
例えば、

<div class="entry">
  <h2>タイトルだよ</h2>
  <p>本文だよ</p>
</div>

こんな形で動的にコードを展開しなければならない場合、
jqueryの.append()で書くと

append('<div class="entry"><h2>'+ title + '</h2><p>' + content+ '</p></div>')

※title とか contentが変数として動的に入る部分です。

こんな風に書かなければなりません。
この程度ならなんとかなりますが、もっと複雑なコードの場合、メンテナンスどころではなくなってしまいます。

Handlebars.jsだとどうなるの?

まずjqueryとhandlbars.jsを読み込みます。
次に、htmlとして展開するテンプレートを定義します。

先述のような形に吐き出したい場合は

<script id="template" type="text/x-handlebars-template">
{{#each this}}
<div class="entry">
  <h2>{{title}}</h2>
  <p>{{content}}</p>
</div>
{{/each}}
</script>

この様に定義します。
先ほどのコードよりもかなり見通しが良くなったと思います。
Handlebars.jsの場合、動的に入る部分は{{title}}、{{content}}のように表現します。

あとは、jsonなりxmlを読み込んで、予め定義してある{{title}}とか{{content}}に要素を放り込んで、このテンプレートで生成したhtmlを吐き出したい場所に.append()してあげればよい訳です。

$.ajax({
  url: '[path]',
  dataType: 'json',
  success: function(data){
          var posts = data.posts;
          //jsonを展開して、feedsItemという配列に必要な要素を放り込む
          for (var i = 0; i < posts.length; i++) {
                    var post = posts&#91;i&#93;;
                    var feedsItem = &#91;{
                    title:post.title,
                    content:post.content
          }&#93;;
          //事前に定義したテンプレートを呼び出だす
          var template = Handlebars.compile($('#template').text());
          //呼び出されたテンプレートに展開された情報を流し込んで、表示される
          $('#feed').append( template(feedsItem) );
          }
     }
});
&#91;/javascript&#93;

jsonを展開する部分は、読み込むjsonによって変数を変えなければならないので、そのままコピペでは動かない場合があります。

<h4 class="subTitle"><span>ちょっと高度な使い方 htmlをエスケープしない</span></h4>
個人的にこのテンプレートエンジンを使ってよくやるのが、ブログなどのrss情報を引っ張ってきて、コンテンツを生成することですが、jsonの中にhtmlタグがある場合、エスケープされて、タグも文字列として表示されてしまいます。

こんな時はテンプレート側で{{{content}}}
のように、かっこを3つにしてあげると、htmlタグがエスケープしないで、タグとして表示してくれます。
便利です。

[javascript]
<script id="template" type="text/x-handlebars-template">
{{#each this}}
<div class="entry">
  <h2>{{title}}</h2>
  <p>{{{content}}}</p>
</div>
{{/each}}
</script>

ブログのRSSを引っ張ってきて表示する程度であれば、このくらいの知識で十分です。
(jsonpで吐き出されていない場合はクロスドメインの対策が必要になりますが)

DEMO

また、ヘルパー関数という、テンプレートエンジン側で表示を制御する関数(ifとかeach)も用意されていますので、そういった機能を利用するとスマホサイトとか、アプリといった複雑な案件でも利用が出きるんじゃないかと思います。今までサーバー側でしかできなかったような表現が、java scriptだけで実現できるようになりますので、覚えておくといいかもしれませんね。

超低機能のメールフォームバリテーション

なんの釣りでもありませんが、メールアドレスのチェックだけというニッチなメールフォームのバリテーションをjQueryで作ってみたのでご紹介します。

さっそくデモを

メールアドレス欄にメール以外を入力するとエラーメッセージが表示されます。
また、その下の確認に先に入力したメール以外が入力されるとエラーが表示されます。

それだけです。

エラーもただのテキストなのでそのまま送信できちゃうという無配慮ですw

ただ、jQueryだけで書かれてるので、既存のフォームにも組み込みやすいかと思います。

簡単にロジックを説明すると、
メールフォームの値が変更になったかどうかを判定して、入力された値を取得します。
そして、その値がいわゆるメールアドレスなのか正規判定で調べて、違っていたらエラーを返します。

確認も同様にメールフォームの入力を判定して、先に入力されているアドレスと一致していなければ、エラーを返すという感じです。

//初期設定
var message = "正しいメールアドレスを入力してください";
$('input#mail').after('<div class="error">'+message+'</div>');

var messege_check = "メールアドレスが異なります";
$('input#mail_check').after('<div class="error_check">'+messege_check+'</div>');


//メールアドレスの判定
$('input#mail').change(function () {
 var mailStr = "";
 
mailStr = $(this).val();
  if($(this).val() && !$(this).val().match(/.+@.+\..+/g)){
        $('.error').show('fast');
   }else{
        $('.error').hide('fast');
   }
}).change();

//一致するか
$('input#mail_check').change(function () {
var mail_checkStr = "";
 
 mail_checkStr = $(this).val();
  if(mail_checkStr != $('input#mail').val() ){
        $('.error_check').show('fast');
   }else{
        $('.error_check').hide('fast');
   }
}).change();

html側は、メールアドレスと確認用のメールアドレスのinputにそれぞれ、#mailと#mail_checkを付けるだけです。

もう少しブラッシュアップしなければ、実務では使えないかもしれませんが、実はバリテーションは簡単な仕組みでもできるんだよというお話でした。