Suche senden
Hochladen
Mustache入門
•
2 gefällt mir
•
3,592 views
ina job
Folgen
MustacheとYQLを使った簡単なデモ
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 16
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
俺的フロントエンド開発
俺的フロントエンド開発
Kotaro Kawashima
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
Y Watanabe
Hachioji.pm15
Hachioji.pm15
Hon Dallica
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
Yuki Kuramochi
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
Hayato Mizuno
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
テンプレートエンジンの話 #jjug
テンプレートエンジンの話 #jjug
Yusuke Yamamoto
テンプレート・エンジンVelocity
テンプレート・エンジンVelocity
隆行 神戸
Empfohlen
俺的フロントエンド開発
俺的フロントエンド開発
Kotaro Kawashima
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
2013-09 テンプレートエンジンMixer2紹介 HTML5J&JJUG合同勉強会LT
Y Watanabe
Hachioji.pm15
Hachioji.pm15
Hon Dallica
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
「現場のプロが教えるWebデザイン新・スタンダードテクニック37」に載っているテクニックでLP作ってみた話
Yuki Kuramochi
CoffeeScriptってなんぞ?
CoffeeScriptってなんぞ?
Hayato Mizuno
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
テンプレートエンジンの話 #jjug
テンプレートエンジンの話 #jjug
Yusuke Yamamoto
テンプレート・エンジンVelocity
テンプレート・エンジンVelocity
隆行 神戸
Thymeleafでハマったこと
Thymeleafでハマったこと
eiryu
Thymeleafのすすめ
Thymeleafのすすめ
eiryu
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
祐磨 堀
HTTP/2の現状とこれから
HTTP/2の現状とこれから
shigeki_ohtsu
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
kwatch
UXはじめの一歩
UXはじめの一歩
井上 誠
HTTPとサーバ技術の最新動向
HTTPとサーバ技術の最新動向
Kazuho Oku
H2O - making HTTP better
H2O - making HTTP better
Kazuho Oku
Haxe で始める CreateJS
Haxe で始める CreateJS
クラスメソッド株式会社
PHP初心者セッション2013
PHP初心者セッション2013
Hideo Kashioka
090801 ライトニングトーク
090801 ライトニングトーク
雄一郎 安倍
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
テーマ作成のアプローチ
テーマ作成のアプローチ
Seto Takahiro
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Tsuyoshi.
2009 PHP初心者
2009 PHP初心者
Hideo Kashioka
WordPress テーマ作成&PHP超入門
WordPress テーマ作成&PHP超入門
Michinari Odajima
Phpcon tokyo 20120_bigginer
Phpcon tokyo 20120_bigginer
Hideo Kashioka
141115 making web site
141115 making web site
Himi Sato
Php初心者セッション2014ppt
Php初心者セッション2014ppt
Hideo Kashioka
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
WordPress のための PHP 超入門
WordPress のための PHP 超入門
Michinari Odajima
Weitere ähnliche Inhalte
Andere mochten auch
Thymeleafでハマったこと
Thymeleafでハマったこと
eiryu
Thymeleafのすすめ
Thymeleafのすすめ
eiryu
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
祐磨 堀
HTTP/2の現状とこれから
HTTP/2の現状とこれから
shigeki_ohtsu
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
kwatch
UXはじめの一歩
UXはじめの一歩
井上 誠
HTTPとサーバ技術の最新動向
HTTPとサーバ技術の最新動向
Kazuho Oku
H2O - making HTTP better
H2O - making HTTP better
Kazuho Oku
Andere mochten auch
(8)
Thymeleafでハマったこと
Thymeleafでハマったこと
Thymeleafのすすめ
Thymeleafのすすめ
コンポーネント単位で考えるWeb制作
コンポーネント単位で考えるWeb制作
HTTP/2の現状とこれから
HTTP/2の現状とこれから
HTMLデザインを崩さないテンプレートエンジンの作り方
HTMLデザインを崩さないテンプレートエンジンの作り方
UXはじめの一歩
UXはじめの一歩
HTTPとサーバ技術の最新動向
HTTPとサーバ技術の最新動向
H2O - making HTTP better
H2O - making HTTP better
Ähnlich wie Mustache入門
Haxe で始める CreateJS
Haxe で始める CreateJS
クラスメソッド株式会社
PHP初心者セッション2013
PHP初心者セッション2013
Hideo Kashioka
090801 ライトニングトーク
090801 ライトニングトーク
雄一郎 安倍
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
テーマ作成のアプローチ
テーマ作成のアプローチ
Seto Takahiro
Webapp startup example_to_dolist
Webapp startup example_to_dolist
Shinichiro Kumeuchi
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
Tsuyoshi.
2009 PHP初心者
2009 PHP初心者
Hideo Kashioka
WordPress テーマ作成&PHP超入門
WordPress テーマ作成&PHP超入門
Michinari Odajima
Phpcon tokyo 20120_bigginer
Phpcon tokyo 20120_bigginer
Hideo Kashioka
141115 making web site
141115 making web site
Himi Sato
Php初心者セッション2014ppt
Php初心者セッション2014ppt
Hideo Kashioka
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
WordPress のための PHP 超入門
WordPress のための PHP 超入門
Michinari Odajima
XOOPS and Twitter Bootstrap
XOOPS and Twitter Bootstrap
Yoshi Sakai
まだやれる Css preprocesser
まだやれる Css preprocesser
Shinya Sugo
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
tamotsu toyoda
Texteditor - Ohotech 並盛 #5
Texteditor - Ohotech 並盛 #5
NISHIHARA Shota
Web デザイナーが身に付けておきたい定番スキル ーPHP 初級編ー
Web デザイナーが身に付けておきたい定番スキル ーPHP 初級編ー
Kite Koga
WordPress と Bootstrap
WordPress と Bootstrap
株式会社ガリレオ(開発グループ)
Ähnlich wie Mustache入門
(20)
Haxe で始める CreateJS
Haxe で始める CreateJS
PHP初心者セッション2013
PHP初心者セッション2013
090801 ライトニングトーク
090801 ライトニングトーク
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
テーマ作成のアプローチ
テーマ作成のアプローチ
Webapp startup example_to_dolist
Webapp startup example_to_dolist
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
テーマ制作時の疑問とノンプログラマーにも優しいテーマを考える
2009 PHP初心者
2009 PHP初心者
WordPress テーマ作成&PHP超入門
WordPress テーマ作成&PHP超入門
Phpcon tokyo 20120_bigginer
Phpcon tokyo 20120_bigginer
141115 making web site
141115 making web site
Php初心者セッション2014ppt
Php初心者セッション2014ppt
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
WordPress のための PHP 超入門
WordPress のための PHP 超入門
XOOPS and Twitter Bootstrap
XOOPS and Twitter Bootstrap
まだやれる Css preprocesser
まだやれる Css preprocesser
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
Texteditor - Ohotech 並盛 #5
Texteditor - Ohotech 並盛 #5
Web デザイナーが身に付けておきたい定番スキル ーPHP 初級編ー
Web デザイナーが身に付けておきたい定番スキル ーPHP 初級編ー
WordPress と Bootstrap
WordPress と Bootstrap
Mehr von ina job
KubeWeekly読書メモの紹介
KubeWeekly読書メモの紹介
ina job
僕の 技術の無駄遣いを 紹介します
僕の 技術の無駄遣いを 紹介します
ina job
シェル入門
シェル入門
ina job
Voice remix!
Voice remix!
ina job
MTM07で電子楽器を展示してきた
MTM07で電子楽器を展示してきた
ina job
Erlangやってみた
Erlangやってみた
ina job
SVNのすすめ&Redmineでプロジェクト管理
SVNのすすめ&Redmineでプロジェクト管理
ina job
OooBasic
OooBasic
ina job
ICFP2009-いかにして我々は戦ったか
ICFP2009-いかにして我々は戦ったか
ina job
context free art
context free art
ina job
WxHaskell
WxHaskell
ina job
webを飾る技術
webを飾る技術
ina job
Mehr von ina job
(12)
KubeWeekly読書メモの紹介
KubeWeekly読書メモの紹介
僕の 技術の無駄遣いを 紹介します
僕の 技術の無駄遣いを 紹介します
シェル入門
シェル入門
Voice remix!
Voice remix!
MTM07で電子楽器を展示してきた
MTM07で電子楽器を展示してきた
Erlangやってみた
Erlangやってみた
SVNのすすめ&Redmineでプロジェクト管理
SVNのすすめ&Redmineでプロジェクト管理
OooBasic
OooBasic
ICFP2009-いかにして我々は戦ったか
ICFP2009-いかにして我々は戦ったか
context free art
context free art
WxHaskell
WxHaskell
webを飾る技術
webを飾る技術
Mustache入門
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.
面倒なことは回避する手段がある 便利なものはつかっていきましょー
Jetzt herunterladen