2015/08/30 ng-kyoto Angular Meetup #2
Polymerやってみた
おのうえ(@_likr)
1
自己紹介
✤ おのうえ(@_likr)
✤ ng-kyoto、GDG Kobeスタッフ
✤ 大学院でWebベース可視化システムの研究・開発
✤ こわくない
2
Polymer
✤ Google主導のオープンソースフレームワーク

https://www.polymer-project.org/
✤ WebComponents + α
✤ Webアプリ内の再利用性の高い機能を

コンポーネント化し利用し...
PolymerElementを使う
$ bower install hoge-element
<!DOCTYPE html>
<html>
<head>
<script
src=“bower_components/webcomponentsjs...
Element Catalog
✤ 公式が配布するPolymerElement集
✤ https://elements.polymer-project.org/
✤ マテリアルデザイン、Google API、アニメーション、
EC用フォーム、オ...
サンプル
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link r...
7
PolymerElementを作る
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="my-chart">
<link rel="s...
Polymer({
is: 'my-chart',
ready: function () {
nv.addGraph(() => {
const chart = nv.models.discreteBarChart()
.x((d) => d....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script
src=“bower_components/webcomponentsjs/webcomponents-lite.js"...
AngularJSから使う
<!DOCTYPE html>
<html>
<head>
<script src="bower_components/angular/angular.js"></script>
<script src=“bower...
まとめ
✤ Polymerで再利用性の高いコンポーネントを使う/作る
✤ サードパーティライブラリのラップもできる
✤ AngularJSからも使える
13
Polymerやってみた
of 13

Polymerやってみた

Polymerやってみました
Published on: Mar 4, 2016
Published in: Technology      
Source: www.slideshare.net


Transcripts - Polymerやってみた

  • 1. 2015/08/30 ng-kyoto Angular Meetup #2 Polymerやってみた おのうえ(@_likr) 1
  • 2. 自己紹介 ✤ おのうえ(@_likr) ✤ ng-kyoto、GDG Kobeスタッフ ✤ 大学院でWebベース可視化システムの研究・開発 ✤ こわくない 2
  • 3. Polymer ✤ Google主導のオープンソースフレームワーク
 https://www.polymer-project.org/ ✤ WebComponents + α ✤ Webアプリ内の再利用性の高い機能を
 コンポーネント化し利用しやすくする仕組み 3
  • 4. PolymerElementを使う $ bower install hoge-element <!DOCTYPE html> <html> <head> <script src=“bower_components/webcomponentsjs/webcomponents-lite.js”> </script> <link rel=“import” href=“bower_components/hoge-element/hoge-element.html”> </head> <body> <hoge-element></hoge-element> </body> </html> 使用するElementをbowerでインストール タグとして使用 Custom Elements, HTML ImportsのPolyfillをロード Elementをインポート 4
  • 5. Element Catalog ✤ 公式が配布するPolymerElement集 ✤ https://elements.polymer-project.org/ ✤ マテリアルデザイン、Google API、アニメーション、 EC用フォーム、オフライン… 5
  • 6. サンプル <!DOCTYPE html> <html> <head> <script src="bower_components/webcomponentsjs/webcomponents-lite.js"> </script> <link rel="import" href="bower_components/google-map/google-map.html"> <style> google-map { height: 600px; } </style> </head> <body> <google-map latitude="34.682933" longitude="135.506919" fit-to-markers> <google-map-marker latitude="34.682933" longitude="135.506919"> </google-map-marker> </google-map> </body> </html> index.html 6 google-mapをインポート Google Mapを表示 マーカーを作成
  • 7. 7
  • 8. PolymerElementを作る <link rel="import" href="bower_components/polymer/polymer.html"> <dom-module id="my-chart"> <link rel="stylesheet" href="bower_components/nvd3/build/nv.d3.css"> <style> .view { width: 600px; height: 600px; } </style> <template> <div class="view"><svg id="svg"></svg></div> </template> <script src="bower_components/d3/d3.js"></script> <script src="bower_components/nvd3/build/nv.d3.js"></script> <script src="my-chart.js"></script> </dom-module> my-chart.html 8 polymerをインポート 利用側に挿入されるHTML要素を定義 my-chart要素を定義
  • 9. Polymer({ is: 'my-chart', ready: function () { nv.addGraph(() => { const chart = nv.models.discreteBarChart() .x((d) => d.label) .y((d) => d.value) .staggerLabels(true) .tooltips(false) .showValues(true); d3.select(this.$.svg) .datum(exampleData()) .call(chart); nv.utils.windowResize(chart.update); return chart; }); } }); my-chart.js 9 my-chartの振る舞いを定義 ライフサイクルメソッド
  • 10. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src=“bower_components/webcomponentsjs/webcomponents-lite.js"> </script> <link rel="import" href="my-chart.html"> </head> <body> <my-chart></my-chart> </body> </html> index.html 10
  • 11. AngularJSから使う <!DOCTYPE html> <html> <head> <script src="bower_components/angular/angular.js"></script> <script src=“bower_components/webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="my-chart.html"> </head> <body ng-app="app"> <div ng-controller="MainController"> <span>{{hoge}}</span> <my-chart></my-chart> </div> <script> angular.module('app', []) .controller('MainController', function ($scope) { $scope.hoge = 'hoge'; }); </script> </body> </html> index.html 12 テンプレートの中でそのまま使える!
  • 12. まとめ ✤ Polymerで再利用性の高いコンポーネントを使う/作る ✤ サードパーティライブラリのラップもできる ✤ AngularJSからも使える 13

Related Documents