Slide 1

Slide 1 text

Web CREation WIth Polymer Takanori Oki Polymer Japan Cafe

Slide 2

Slide 2 text

自己紹介 • 大木尊紀（オオキタカノリ） / @takanorip • 株式会社スマートドライブ • フロントエンドエンジニア • React、Vue.js、Polymer、ウェブ制作全般 • Polymer Japan 翻訳チーム • 「イヌでもわかるWeb Components」  Boothにて販売中！

Slide 3

Slide 3 text

技術書典4当選しました！！

Slide 4

Slide 4 text

Polymerで始めるWeb制作

Slide 5

Slide 5 text

Webサイト制作における課題 • 環境構築がめんどくさい • グローバルなHTML/CSS • HTML/CSSを共通化したい

Slide 6

Slide 6 text

PolymerでWeb制作をするメリット • 環境構築をほとんどしなくて良い • HTML/CSSがscoped • コンポーネント指向なマークアップができる • custom CSS propertiesや  custom CSS mixinsを使うことができる

Slide 7

Slide 7 text

これらのことを Web標準技術で実現するのが Polymer

Slide 8

Slide 8 text

実際に作ってみる（ダイジェスト）

Slide 9

Slide 9 text

環境構築

Slide 10

Slide 10 text

polymer-cliを使う以上！

Slide 11

Slide 11 text

今回は polymer-2-starter-kit というテンプレートを使用

Slide 12

Slide 12 text

$npm install -g polymer-cli $polymer init ? Which starter template would you like to use? polymer-2-element - A simple Polymer 2.0 element template polymer-2-application - A simple Polymer 2.0 application › polymer-2-starter-kit - A Polymer 2.x starter application template, with navigation and "PRPL patter n" loading shop - The "Shop" Progressive Web App demo $polymer serve info: Files in this directory are available under the following URLs applications: http://127.0.0.1:8081 reusable components: http://127.0.0.1:8081/components/polymer- starter-kit/

Slide 13

Slide 13 text

├── README.md ├── bower.json ├── bower_components ├── images ├── index.html ├── manifest.json ├── package.json ├── polymer.json ├── service-worker.js ├── src │ ├── my-app.html │ ├── my-icons.html │ ├── my-view1.html │ ├── my-view2.html │ ├── my-view3.html │ ├── my-view404.html │ └── shared-styles.html ├── sw-precache-config.js └── test

Slide 14

Slide 14 text

カスタムエレメント作成

Slide 15

Slide 15 text

:host { display: block; }

Hello Polymer

class SampleView1 extends Polymer.Element { static get is() { return 'sample-view1'; } } window.customElements.define(SampleView1.is, SampleView1);

Slide 16

Slide 16 text

polymer-element • Custom Elementを定義するためのコンポーネント • Polymerではこのpolymer-elementΛ֦ுͯ͠ɺ  ಠࣗͷΤϨϝϯτΛఆٛ͢Δ

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Shadow DOM • PolymerのエレメントでShadow DOMを定義するにはとを使う • はShadow DOM全体（HTML/CSS/JS）をラップする • にはShadow DOMのHTML部分を記述する

Slide 19

Slide 19 text

Hello Polymer

Slide 20

Slide 20 text

Shadow DOMとCSS • CSSはタグの中のタグ中に記述 • <template>の中に書かれたCSSは<template>に  書かれているHTMLにしか適用されない、”scoped”な CSSになる • :hostは、定義しているカスタムエレメントと一致する

Slide 21

Slide 21 text

:host { display: block; }

Hello Polymer

Slide 22

Slide 22 text

Shadow DOMを登録 • 定義したエレメントのタグをブラウザに認識させる  ためには、エレメントを登録する必要がある • Polymer.Elementを拡張してエレメントを登録する • is()で返す値とdom-moduleのidはしないといけない • PolymerではES2015+の書き方をするので注意が必要

Slide 23

Slide 23 text

class SampleView1 extends Polymer.Element { static get is() { return 'sample-view1'; } } window.customElements.define(SampleView1.is, SampleView1);

Slide 24

Slide 24 text

:host { display: block; }

Hello Polymer

class SampleView1 extends Polymer.Element { static get is() { return 'sample-view1'; } } window.customElements.define(SampleView1.is, SampleView1);

Slide 25

Slide 25 text

カスタムエレメントを使う

Slide 26

Slide 26 text

HTML imports • でHTMLを HTMLの中にインポートする • （HTML modulesに置き換わる予定…）

Slide 27

Slide 27 text

:host { display: block; }

Hello Polymer

class SampleView1 extends Polymer.Element { static get is() { return 'sample-view1'; } } window.customElements.define(SampleView1.is, SampleView1);

Slide 28

Slide 28 text

データバインディング

Slide 29

Slide 29 text

Data Binding • ReactやVueのpropsのようなもの • 外部からエレメントに値を渡すことができる仕組み • [[buttonText]]

Slide 30

Slide 30 text

Slide 31

Slide 31 text

:host { display: block; } [[buttonText]]

Slide 32

Slide 32 text

class SampleButton extends Polymer.Element { static get is() { return "sample-button"; } static get properties() { return { buttonText: { type: String } } } constructor() { super(); } } customElements.define(SampleButton.is, SampleButton);

Slide 33

Slide 33 text

イベントリスナー

Slide 34

Slide 34 text

[[num]]

Slide 35

Slide 35 text

class SampleButton extends Polymer.Element { static get is() { return 'sample-button'; } static get properties() { return { num: { type: Number, notify: true, reflectToAttribute: true, value: 1 }, } } count() { this.num++; } } window.customElements.define(SampleButton.is, SampleButton);

Slide 36

Slide 36 text

Event Listener • 普通のJSと少し書き方が異なるので注意 • notify • 値が変更されるとイベントを発火させる • reﬂectToAttribute • 値の変更を反映する • value • 初期値

Slide 37

Slide 37 text

子要素を使う

Slide 38

Slide 38 text

slot • カスタムエレメントの子要素を取得するには  エレメントを使う • は、子ノードのレンダリング先を示す  プレースホルダと考えることができる

Slide 39

Slide 39 text

Menu Shadow DOM

Slide 40

Slide 40 text

複雑なCSS編

Slide 41

Slide 41 text

CSS variables • PolymerではCustom CSS property implementationを使うことができる • CSSの中で変数を使うことができる • var(--my-custom-property, defaultValue)

Slide 42

Slide 42 text

body { --sample-color1: #1E88E5; --sample-color2: #333333; } :host { display: block; background-color: var(--sample-color1, currentcolor); }

Slide 43

Slide 43 text

Custom property mixins • Sassのmixinのようなもの • 変数の中に複数のプロパティを持つことができる

Slide 44

Slide 44 text

html { --my-custom-mixin: { color: white; background-color: blue; } } :host { @apply --my-custom-mixin; }

Slide 45

Slide 45 text

ルーティングの設定

Slide 46

Slide 46 text

ルーティングの設定 • app-location、app-route、iron-pagesの3つの  エレメントを使う • 一番親のエレメントでルーティングの設定をする

Slide 47

Slide 47 text

sample-app.html sample-view2.html sample-view1.html sample-view3.html ルーティングするとコンポーネントが切り替わる sample-header.html ルーティングとかヘッダー/フッターとか

Slide 48

Slide 48 text

Slide 49

Slide 49 text

番外編：PWA • PWA(Progressive Web Apps)の略 • iOS 11.3のSafari 11.1からService Workerに対応！ • オフライン対応やPush通知などネイティブアプリに近い挙動を実現する技術の総称 • Service Worker • Push Notiﬁcation • ネイティブアプリに近いUI

Slide 50

Slide 50 text

polymer-2-starter-kitには PWAを実現するための機能が備わっている

Slide 51

Slide 51 text

使い方

Slide 52

Slide 52 text

polymer build --add-service-worker

Slide 53

Slide 53 text

このコマンドを叩くと service-worker.js sw-precache-conﬁg.js が生成される

Slide 54

Slide 54 text

index.html

Slide 55

Slide 55 text

if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('service-worker.js', { scope: Polymer.rootPath, }); }); }

Slide 56

Slide 56 text

sw-precache-conﬁg.js

Slide 57

Slide 57 text

module.exports = { staticFileGlobs: [ '/index.html', '/manifest.json', '/bower_components/webcomponentsjs/webcomponents-lite.js', '/images/*' ], navigateFallback: '/index.html', navigateFallbackWhitelist: [/^(?!.*\.html$|\/data\/).*/] }

Slide 58

Slide 58 text

Polymerの課題

Slide 59

Slide 59 text

課題 • 配信されているコンポーネントが少ない • 今後に期待 / 自分で作って公開する • Sassなどを簡単に使うことができない • Gulpなど使う必要がある / ディレクトリ構成が複雑 • bower • Polymer3.0に期待

Slide 60

Slide 60 text

ありがとうございました！