Your SlideShare is downloading. ×
0
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Mustache入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mustache入門

1,106

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,106
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. mustache.js入門 @ina_ani 2013/11/16 AiSA
  • 2. 対象 デザイナー JavaScriptをバリバリ書けないデザイナー 上記デザイナーに仕事を引き継ぎたい人 エンジニア JSテンプレートエンジンを知らない人
  • 3. テンプレート(エンジン) ≒ひな形 Wordにもありましたね 自動でかけると嬉しいんじゃね? → プログラム お世話になっております。 株式会社 の 以上 よろしくお願いします。 です。
  • 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. いろんな書き方があります ejs, erb <%= name %> haml,jade (そもそもタグも独自記法) Smarty {$name}
  • 6. mustacheについて Logic-less templates 単純なテンプレート 多数の言語でサポート Ruby, JavaScript, Python,Erlang,PHP,Perl, Objective-C,Java, ….. 記法も単純 {{name}}
  • 7. JavaScript vs PHP どっちがいいの? 昔のやり方 ページください ブラウザ サーバ はいよっ ページください 最近のやり方 はいよっ ブラウザ データください はいよっ ページの一部を JavaScriptでつくる サーバ
  • 8. mustache.jsについて mustacheを理解するJavaScriptで書かれたテンプ レートエンジン
  • 9. jQueryとの比較 サーバから obj = {name: ‘ina_ani’}; が返却されたとしてそれをすでにあるdivのなかに spanで囲んで表示しよう $.(‘.name’).append($(‘<span>’).text(obj.name)) タグや、レイアウトの情報がJavaScriptに!! → これでは分業が辛い
  • 10. mustache.js( + jQuery)の場合 <h1><span id=”name”>{{name}}</span></h1> var template = $(‘#name’).html(); $(‘#name’).html( Mustache.render(template, obj) );
  • 11. 分業の範囲 JS HTML PHP 諸悪の根源 デザイナー エンジニア HTML + テンプレート JS スーパーデザイナー HTML + テンプレート デザイナー PHP バックエンドエンジニア JS PHP エンジニア
  • 12. さっそくつかってみる RSSを画面にいい感じに表示してみよう
  • 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. $(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. <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. 面倒なことは回避する手段がある 便利なものはつかっていきましょー

×