WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
>100 Views
April 10, 15
スライド概要
ITベンチャー3社の開発ツール チラ見せ♡ナイト LT
Developer
関連スライド
各ページのテキスト
やらいや！ gulp&yeomanで始める Polymer & WebComponents ITベンチャー3社の開発ツール チラ見せ♡ナイト LT
やらいや！
What’s YRAIYA? 鳥取県の方言 「やろうよ！」という意味 「WebComponentsやろうぜ！」
自己紹介
HIDE 岡本秀高 PHPエンジニア WordCamp Kansai 2015 広報チーム http://wp-kyoto.net/
年 今 り や も ！ す ま
年 今 り や も ！ す ま / m o c . k o o b e c 5 a f . 1 w 0 2 w i a w s / / n : s a p K t p ht m a C d r o W
WebComponents
こんなに便利
(GoogleMap)
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
<google-map
latitude=“-34.397“
longitude=“150.644”
zoom=“15”
map=“{{map}}"
fitToMarkers>
</google-map>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
こんなに便利
(GoogleMap)
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
<google-map
latitude=“-34.397“
longitude=“150.644”
zoom=“15”
map=“{{map}}"
fitToMarkers>
</google-map>
var map;
function initialize() {
var mapOptions = {
！
楽
ゃ
ち
っ
め
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
but…
I○nternet Exploler の壁
(´Д` )
Polymer
What’s Polymer? WebComponentsのライブラリ Google製、Material Design対応 日本語チュートリアルも存在する
日本語チュートリアル http://itshackademic.com/codelabs?locale=ja
Polymerを YeomanとGulpで 簡単に開発する
GitHub https://github.com/yeoman/generator-polymer
Yeomanでセットアップ npm install -g generator-polymer mkdir -p my-project && cd $_ yo polymer
localhost鯖で 開発する
BrowserSync & gulp
var gulp = require('gulp');
// browser Sync
var browserSync = require('browser-sync');
// Static server
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
gulp.task('default', ['browser-sync']);
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
// Watch scss AND html files, doing different things with each.
gulp.task('default', ['browser-sync'], function () {
gulp.watch("./*.html", ['bs-reload']);
});
http://shared-blog.kddi-web.com/activity/245
で ！ た き
まとめ
まとめ Yeomanで簡単セットアップ WebComponentsで簡単コーディング gulp＋BrawserSyncで簡単開発
Polymerとか WebCompoentnsとか React.jsとかの 勉強会行きたい （やりたい）
やらいや？
関西Polymer使い隊 http://kansai-polymer.connpass.com/
YARAIYA!!