Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mustache入門

2,554 views

Published on

MustacheとYQLを使った簡単なデモ

Published in: Technology
  • Be the first to comment

Mustache入門

  1. 1. mustache.js入門 @ina_ani 2013/11/16 AiSA
  2. 2. 対象 デザイナー JavaScriptをバリバリ書けないデザイナー 上記デザイナーに仕事を引き継ぎたい人 エンジニア JSテンプレートエンジンを知らない人
  3. 3. テンプレート(エンジン) ≒ひな形 Wordにもありましたね 自動でかけると嬉しいんじゃね? → プログラム お世話になっております。 株式会社 の 以上 よろしくお願いします。 です。
  4. 4. テンプレートエンジンの例(PHP) PHPがまさにそれ <html> <head> <title> </title> </head> <body> <h1>ようこそ さん </h1> </body> </html> <html> <head> <title><?php echo $title; ?></title> </head> <body> <h1>ようこそ<?php echo $name; ?>さん</h1> </body> </html>
  5. 5. いろんな書き方があります ejs, erb <%= name %> haml,jade (そもそもタグも独自記法) Smarty {$name}
  6. 6. mustacheについて Logic-less templates 単純なテンプレート 多数の言語でサポート Ruby, JavaScript, Python,Erlang,PHP,Perl, Objective-C,Java, ….. 記法も単純 {{name}}
  7. 7. JavaScript vs PHP どっちがいいの? 昔のやり方 ページください ブラウザ サーバ はいよっ ページください 最近のやり方 はいよっ ブラウザ データください はいよっ ページの一部を JavaScriptでつくる サーバ
  8. 8. mustache.jsについて mustacheを理解するJavaScriptで書かれたテンプ レートエンジン
  9. 9. jQueryとの比較 サーバから obj = {name: ‘ina_ani’}; が返却されたとしてそれをすでにあるdivのなかに spanで囲んで表示しよう $.(‘.name’).append($(‘<span>’).text(obj.name)) タグや、レイアウトの情報がJavaScriptに!! → これでは分業が辛い
  10. 10. mustache.js( + jQuery)の場合 <h1><span id=”name”>{{name}}</span></h1> var template = $(‘#name’).html(); $(‘#name’).html( Mustache.render(template, obj) );
  11. 11. 分業の範囲 JS HTML PHP 諸悪の根源 デザイナー エンジニア HTML + テンプレート JS スーパーデザイナー HTML + テンプレート デザイナー PHP バックエンドエンジニア JS PHP エンジニア
  12. 12. さっそくつかってみる RSSを画面にいい感じに表示してみよう
  13. 13. そーすこーど! <script type="text/javascript" src="http://ajax. googleapis.com/ajax/libs/jquery/1.10.2/jquery. min.js"></script> <script src="mustache.js"></script>
  14. 14. $(function(){ $.ajax({ type: 'GET', url: 'https://query.yahooapis.com/v1/public/yql?callback=?', data: { q:"select * from rss where url='http://feeds.feedburner. com/hatena/b/hotentry'", format:'json', doagnostics:"true" }, dataType:'jsonp', success:function(obj){ console.log(obj); // debug var template = $('#item-template').html(); var l = obj.query.results; var s = Mustache.render(template,l); $('#contents').html(s); } }); });
  15. 15. <h1>mustache.js + YQL</h1> <script id="item-template" type="text/tmpl"> {{#item}} <div> <h2><a href="{{link}}" target="_blank"> {{title}}</a></h2> <p>{{description}}</p> </div> {{/item}} </script> <div id="contents"></div>
  16. 16. 面倒なことは回避する手段がある 便利なものはつかっていきましょー

×