インストールからコンポーネントを一つ出力まで
概要
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をインストールしておいてください。
適当に「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を編集
require('coffee-script/register');
require('./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']
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で定義された見出しやボタンなどが使えるようになります。