Polymer.js + Material Design で何かやってみる1

# インストールからコンポーネントを一つ出力まで


## 概要
### Material Designとは…
Material Designは、プラットフォーム間で統一したGUI・インタラクションをユーザーへ提供するために作られたGoogleのデザインガイドラインです。


### Polymer.jsとは…
Polymer.jsは、ブラウザへの実装が待たれるWeb Components APIを先行して実行するために開発・提供されているPolyfillライブラリの一つです。



### Web Componentsの恩恵
Web Componentsは、GUIの部品をカプセル化し、再利用しファンクショナルな実装を目的としたAPIの一つです。現在、ウェブアプリケーションの多くは似たような実装方法で一部カプセル化を行っています。例えばMVWフレームワーク **Angular** や **Vue** , **Backbone**や**Ember**の設計方法に近いですが、MVWは一部を除いて導入コストに対して割高であることなどから小規模のウェブアプリケーションやウェブサイトには不向きです。また標準APIであることから導入コストが下がる（ハズ）ことがメリットとしてあげられます。

ですので、機能をカプセル化して再利用することの多い管理画面などにWeb Componentsの考え方は有効であると思われます。


## 1. とりあえずPolymerをいれてみる

### bowerとnode.jsを使ってインストール

※npmコマンドを使うために[node.js](http://nodejs.org/)をインストールしておいてください。
適当に「polymer-materialdesign」などのフォルダを作成して、bower initで指示通り進む。フォルダ以下にbower.jsonが生成されれば成功。
ついでにnode.jsのパッケージも作成しておく。こちらも指示通り進む。

```
mkdir polymer-materialdesign
sudo npm install -g bower
bower init
npm init
npm install --save bower
```

bower.jsonにPolymerをインストール。

```
bower install --save Polymer/polymer
bower install --save Polymer/core-elements
bower install --save Polymer/paper-elements
```

今回glupでjadeを使用するのでそれぞれインストール。
glupfile.coffeeでパッケージ管理するためにCoffeeScriptも導入。

```
sudo npm install -g gulp
sudo npm install --save gulp gulp-coffee coffee-script
sudo npm install --save gulp-jade
sudo npm install --save main-bower-files
sudo npm install --save gulp-load-plugins
sudo npm install --save readable-stream
sudo npm install --save source-map
sudo npm install --save gulp-browserify
sudo npm install --save isarray
sudo npm install --save core-util-is
sudo npm install --save gulp-connect
sudo npm install --save gulp-watch
```

*余談ですが、polymer.jsだけ使うならbowerだけすれば使うことができます…。
gulpだのnode.jsだの興味ないわいという方は途中の工程は飛ばしても大丈夫です。*

gulpfile.coffee, .jsの作成とjadeを格納するフォルダsrc/jadeを作成

```
touch gulpfile.js
touch gulpfile.coffee
mkdir src
mkdir src/jade
```

gulpfile.coffee, .jsを編集

```lang:gulpfile.js
require('coffee-script/register');
require('./gulpfile.coffee');
```

```lang:gulpfile.coffee
gulp = require 'gulp'
gutil = require 'gulp-util'
bowerFiles = require "gulp-bower-files"
$ = require('gulp-load-plugins')()

# config
$dest = './dist'
$src = './src'
config =
    path:
        jade: $src + '/**/*.jade'
    
# tasks
gulp.task 'html', ->
    gulp.src(config.path.jade)
    .pipe $.jade()
    .pipe gulp.dest($dest)

# watch
gulp.task 'watch', ->
    gulp.watch config.path.jade, ['html']

# load
gulp.task 'default', ['watch']

```


```lang:index.jade
doctype html
html(lang="en")
  head
    title Polymer + Material Design #1
    script(src="/bower_components/platform/platform.js")
    link(rel="import" href="/bower_components/core-toolbar/core-toolbar.html")
    link(rel="import" href="/bower_components/core-header-panel/core-header-panel.html")
    link(rel="import" href="/bower_components/core-icons/core-icons.html")
    link(rel="import" href="/bower_components/paper-tabs/paper-tabs.html")
    link(rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html")
    link(rel="import" href="/bower_components/paper-checkbox/paper-checkbox.html")
    link(rel="import" href="/bower_components/paper-toggle-button/paper-toggle-button.html")
    link(rel="import" href="/bower_components/paper-radio-group/paper-radio-group.html")
    link(rel="import" href="/bower_components/paper-fab/paper-fab.html")
    link(rel="import" href="/bower_components/paper-slider/paper-slider.html")
    link(rel="import" href="/bower_components/paper-progress/paper-progress.html")
    link(rel="import" href="/bower_components/paper-input/paper-input.html")
  body
    h1 Polymer + Material Design #1
    #button
        paper-button(label="flat button")
            | Button
    
```

gulpを実行

```
gulp
```

でMaterial Designで定義された見出しやボタンなどが使えるようになります。