---
title: WebComponentsをPolymerとgulpとyeomanでさっくり使い始めよう
tags: 
author: [Hidetaka Okamoto](https://www.docswell.com/user/hideokamoto)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/LJL9Q2Q17R.jpg?width=480
description: ITベンチャー3社の開発ツール チラ見せ♡ナイト LT
published: April 10, 15
canonical: https://www.docswell.com/s/hideokamoto/ZM1XD6-webcomponentspolymergulpyeoman
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/LJL9Q2Q17R.jpg)

やらいや！
gulp&amp;yeomanで始める
Polymer &amp; WebComponents
ITベンチャー3社の開発ツール チラ見せ♡ナイト LT


# Page. 2

![Page Image](https://bcdn.docswell.com/page/47MZ1815JW.jpg)

やらいや！


# Page. 3

![Page Image](https://bcdn.docswell.com/page/P7R6L5LZE9.jpg)

What’s YRAIYA?
鳥取県の方言
「やろうよ！」という意味
「WebComponentsやろうぜ！」


# Page. 4

![Page Image](https://bcdn.docswell.com/page/PJXMWKW1EX.jpg)

自己紹介


# Page. 5

![Page Image](https://bcdn.docswell.com/page/3JKGV5VM7D.jpg)

HIDE
岡本秀高
PHPエンジニア
WordCamp Kansai 2015
広報チーム
http://wp-kyoto.net/


# Page. 6

![Page Image](https://bcdn.docswell.com/page/LE3NMKM2E5.jpg)



# Page. 7

![Page Image](https://bcdn.docswell.com/page/8EDW63667G.jpg)

年
今
り
や
も
！
す
ま


# Page. 8

![Page Image](https://bcdn.docswell.com/page/V7P9YPZZJ8.jpg)

年
今
り
や
も
！
す
ま
/
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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/2JVMG2WMJQ.jpg)

WebComponents


# Page. 10

![Page Image](https://bcdn.docswell.com/page/5EGG8RDXEL.jpg)

こんなに便利
(GoogleMap)
&lt;script src=&quot;https://maps.googleapis.com/maps/api/js?v=3.exp&quot;&gt;&lt;/script&gt;
&lt;script&gt;
&lt;google-map
latitude=“-34.397“
longitude=“150.644”
zoom=“15”
map=“{{map}}&quot;
fitToMarkers&gt;
&lt;/google-map&gt;
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById(&#039;map-canvas&#039;),
mapOptions);
}
google.maps.event.addDomListener(window, &#039;load&#039;, initialize);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;map-canvas&quot;&gt;&lt;/div&gt;
&lt;/body&gt;


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4JQX9V15EP.jpg)

こんなに便利
(GoogleMap)
&lt;script src=&quot;https://maps.googleapis.com/maps/api/js?v=3.exp&quot;&gt;&lt;/script&gt;
&lt;script&gt;
&lt;google-map
latitude=“-34.397“
longitude=“150.644”
zoom=“15”
map=“{{map}}&quot;
fitToMarkers&gt;
&lt;/google-map&gt;
var map;
function initialize() {
var mapOptions = {
！
楽
ゃ
ち
っ
め
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById(&#039;map-canvas&#039;),
mapOptions);
}
google.maps.event.addDomListener(window, &#039;load&#039;, initialize);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;map-canvas&quot;&gt;&lt;/div&gt;
&lt;/body&gt;


# Page. 12

![Page Image](https://bcdn.docswell.com/page/K746XMRVE1.jpg)

but…


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LJ1VN8Q4EG.jpg)

I○nternet
Exploler
の壁


# Page. 14

![Page Image](https://bcdn.docswell.com/page/GJWL4ZMZE2.jpg)

(´Д` )


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4EZM21QLJ3.jpg)

Polymer


# Page. 16

![Page Image](https://bcdn.docswell.com/page/Y76NVL6M7V.jpg)

What’s Polymer?
WebComponentsのライブラリ
Google製、Material Design対応
日本語チュートリアルも存在する


# Page. 17

![Page Image](https://bcdn.docswell.com/page/G755D16Q74.jpg)

日本語チュートリアル
http://itshackademic.com/codelabs?locale=ja


# Page. 18

![Page Image](https://bcdn.docswell.com/page/9J2N81MWER.jpg)

Polymerを
YeomanとGulpで
簡単に開発する


# Page. 19

![Page Image](https://bcdn.docswell.com/page/DEYP6ZX9EM.jpg)

GitHub
https://github.com/yeoman/generator-polymer


# Page. 20

![Page Image](https://bcdn.docswell.com/page/VJN5Z31D78.jpg)

Yeomanでセットアップ
npm install -g generator-polymer
mkdir -p my-project &amp;&amp; cd $_
yo polymer


# Page. 21

![Page Image](https://bcdn.docswell.com/page/YE9YZ958J3.jpg)

localhost鯖で
開発する


# Page. 22

![Page Image](https://bcdn.docswell.com/page/GE8619YZ7D.jpg)

BrowserSync &amp; gulp


# Page. 23

![Page Image](https://bcdn.docswell.com/page/LEL9QW41JR.jpg)

var gulp = require(&#039;gulp&#039;);
// browser Sync
var browserSync = require(&#039;browser-sync&#039;);
// Static server
gulp.task(&#039;browser-sync&#039;, function() {
browserSync({
server: {
baseDir: &quot;./&quot;
}
});
});
gulp.task(&#039;default&#039;, [&#039;browser-sync&#039;]);
// Reload all Browsers
gulp.task(&#039;bs-reload&#039;, function () {
browserSync.reload();
});
// Watch scss AND html files, doing different things with each.
gulp.task(&#039;default&#039;, [&#039;browser-sync&#039;], function () {
gulp.watch(&quot;./*.html&quot;, [&#039;bs-reload&#039;]);
});
http://shared-blog.kddi-web.com/activity/245


# Page. 24

![Page Image](https://bcdn.docswell.com/page/4JMZ19K5EW.jpg)

で
！
た
き


# Page. 25

![Page Image](https://bcdn.docswell.com/page/PJR6LGXZ79.jpg)

まとめ


# Page. 26

![Page Image](https://bcdn.docswell.com/page/PEXMWX617X.jpg)

まとめ
Yeomanで簡単セットアップ
WebComponentsで簡単コーディング
gulp＋BrawserSyncで簡単開発


# Page. 27

![Page Image](https://bcdn.docswell.com/page/3EKGVW1MJD.jpg)

Polymerとか
WebCompoentnsとか
React.jsとかの
勉強会行きたい
（やりたい）


# Page. 28

![Page Image](https://bcdn.docswell.com/page/L73NM1Q275.jpg)

やらいや？


# Page. 29

![Page Image](https://bcdn.docswell.com/page/87DW6X96JG.jpg)

関西Polymer使い隊
http://kansai-polymer.connpass.com/


# Page. 30

![Page Image](https://bcdn.docswell.com/page/VJP9YP9ZE8.jpg)

YARAIYA!!


