Polymer Starter Kitで遊ぼう

  • 7
    いいね
  • 0
    コメント

この記事は FUN Advent Calendar 2016 7日目の記事です。

TL;DR

Polymer App Toolboxのチュートリアルの一部を軽く紹介する

背景

Polymerに限らずなんですが、Node.jsでなにかのフレームワークを使ってWebアプリを作ろうと思った時、用意する設定ファイルが多すぎて辛くなったことはありませんか?
これから紹介するPolymer App Toolboxを使えば、簡単にWebアプリの雛形が作れるだけでなくデプロイまでできてしまいます1

Polymer App Toolbox とは

以下原文

Polymer App Toolbox is a collection of components,tools and templates
for building Progressive Web Apps with Polymer. 

なるほど、Progressive Web Appを作るためのツール/テンプレート集のようなものと思って良さそうですね。早速チュートリアルを通して触ってみましょう。

環境

  • macOS Sierra 10.12.1

今手元にはmacOSの入ったマシンしかないため、Windowsでの検証はできていないです。

Node.jsをインストールする

@takachan_mirai さんの昨日の記事(Node-REDでTwitterにメッセージを投稿しよう)では、Homebrewを使ったインストール方法が紹介されていたので、今回はnodebrewを使ったインストール方法で進めます。(Windowsの方は公式から直接インストールして頂くかnodistのようなツールを使ってみてください。)

インストール方法については以下の記事からお願いします。

執筆時点での公式ドキュメントによると4.x系のNode.jsを使えとのことなのでバージョンを指定してインストールします。

$ nodebrew ls-remote # インストール可能なバージョンを確認する
...
v0.12.16  v0.12.17

v4.0.0    v4.1.0    v4.1.1    v4.1.2    v4.2.0    v4.2.1    v4.2.2    v4.2.3
v4.2.4    v4.2.5    v4.2.6    v4.3.0    v4.3.1    v4.3.2    v4.4.0    v4.4.1
v4.4.2    v4.4.3    v4.4.4    v4.4.5    v4.4.6    v4.4.7    v4.5.0    v4.6.0
v4.6.1    v4.6.2

v5.0.0    v5.1.0    v5.1.1    v5.2.0    v5.3.0    v5.4.0    v5.4.1    v5.5.0
...

$ nodebrew install-binary 4.6.2 # 4.2.6が最新なのでこれをインストールしましょう
Fetching: https://nodejs.org/dist/v4.6.2/node-v4.6.2-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

$ nodebrew use v4.6.2 # 使用するバージョンを指定します
use v4.6.2

$ node -v # 指定できたかを確認
v4.6.2

以上でNode.jsのインストールは完了です。

Polymer CLIとbowerのインストール

以下のコマンドでインストールできます。

$ npm install -g polymer-cli bower

少し待つとインストールが完了します

プロジェクトを作成する

さっそくプロジェクトを作っていきます。

$ mkdir my-app # 適当な名前でディレクトリを作成

$ cd my-app

$ polymer init starter-kit # starter-kit テンプレートを指定してプロジェクトを作成

$ bower install # 依存しているライブラリをインストール

プロジェクトを実行する

$ polymer serve --open
これだけでデフォルトブラウザが http://localhost:8080を開いて以下のようなページが見れます、めっちゃ楽ですね。
screenshot.png

あとはPolymerのドキュメントを見ながらWeb Componentsの世界に飛び込んでいきましょう!
以上、Polymer App Toolboxの紹介でした。


  1. 公式のドキュメントではGoogle App EngineやFirebaseを使ったデプロイ方法を紹介しており、いずれの方法でやるにしてもSDK等のツールのインストールが必須なのでご注意ください。