WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
•
2 likes•3,476 views
ITベンチャー3社の開発ツール チラ見せ♡ナイト LT
Recommended
More Related Content
Similar to WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
Similar to WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう (20)
More from Hidetaka Okamoto
More from Hidetaka Okamoto (20)
Recently uploaded
Recently uploaded (10)
WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
- 2. やらいや！
- 4. 自己紹介
- 7. 今年もやります！
- 10. こんなに便利 (GoogleMap) <google-map latitude=“-34.397“ longitude=“150.644” zoom=“15” map=“{{map}}" fitToMarkers> </google-map> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script> 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>
- 11. こんなに便利 (GoogleMap) <google-map latitude=“-34.397“ longitude=“150.644” zoom=“15” map=“{{map}}" fitToMarkers> </google-map> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <script> 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> めっちゃ楽！
- 12. but…
- 14. (´Д` )
- 15. Polymer
- 20. Yeomanでセットアップ npm install -g generator-polymer mkdir -p my-project && cd $_ yo polymer
- 21. localhost で 開発する
- 23. 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
- 24. できた！
- 25. まとめ
- 28. やらいや？
- 30. YARAIYA!!