【Polymer 1.0】インストールしてPolymerを始めよう

Polymerのインストール

Polymerを始めるためにはまずインストールを行う必要があります。インストールといってもZIPファイルを解凍すれば完了です。その他にもインストール方法があるのでその概要を記載します。

ZIPファイル: ZIPファイルにはPolymerが依存するライブラリを全て含むので、解凍してすぐに使いはじめることができます。ただしPolymerがバージョンアップされた場合は手動で再度新しいZIPファイルをダウンロードして解凍する必要があります。
Bower: Bowerでインストールすると、Polymerが依存するライブラリを自動でインストールしてくれます。またインストールしたライブラリのアップデートも行うことができます。
GitHub: GitHubからコンポーネントをインストール(クローン)した場合、ライブラリの依存関係を自分で管理する必要があります。

これ以降で各々のインストール方法について説明していきます。

ZIPファイルでインストール

ZIPファイルには依存する全てのライブラリがバンドルされています。このインストール方法はBowerなどをインストールする必要がないので簡単にPolymerを試す場合におすすめです。

ではZIPファイルをダウンロードしましょう。まずは「Polymer Catalog」を開き、ここからダウンロードを行います。「デベロッパーガイド」ではiron-inputとiron-flex-layoutを使用するので、最小構成としてこの2つのコンポーネントを選択してダウンロードを行います。

必要なコンポーネント (iron-input, iron-flex-layout の2つ) を選択します。下図のように対象のコンポーネントの星印を選択状態にしましょう。

f:id:masterpg:20160921184816p:plain

画面右上にある星印をクリックします。

f:id:masterpg:20160921184928p:plain

下図の手順でダウンロードを行います。

f:id:masterpg:20160921184958p:plain

次にダウンロードしたZIPファイルを展開します。展開するとbower_componentsというフォルダがあるので、このフォルダを自身のプロジェクトへコピーまたは移動します。下図は最終的な自身のプロジェクトのサンプル構成です。

f:id:masterpg:20160921185036p:plain

Polymerまたはコンポーネント(iron-input, iron-flex-layout など)をアップデートするには、新しいZIPファイルをダウンロードしてbower_componentsフォルダを置き換えてください。

Note: ZIPファイルでインストールしたあとからでもBowerを使用してアップデートを行うことができます。Bowerでインストールの作業を行ってください。

Bowerでインストール

BowerはTwitter社が作ったフロントエンド用のパッケージ管理ツールで、必要なライブラリを簡単にインストールできます。BowerでPolymerをインストールすることにより、Polymerが依存するライブラリのインストールやアップデートを自動で行ってくれます。

Bower自体のインストール

BowerをインストールするにはNode.jsが必要です。Node.jsはバージョン依存によって動作しなくなるパッケージが多々あります。このため複数のバージョンのNode.jsをインストールできることが望ましいでしょう。ですのでNode.jsのバージョン管理ツールのインストールもおすすめします。WindowsとMac OSXではNode.jsのバージョン管理ツールが異なるため、ここではOSによってインストールするべきツールの候補をあげておきます。

Window

nodist: Windows専用のNode.jsバージョン管理ツールです。

インストールの流れ: nodist → Node.js → bower

Mac OSX

Homebrew: Mac OSXでのソフトウェアのインストールやバージョン管理を行うためのパッケージ管理ツールです。ここではnodebrewをインストールするためにHomebrewのインストールをおすすめしますが、nodebrew以外にも様々なソフトウェアの管理を行うことができるので入れておいて損はないでしょう。
nodebrew: Mac OSXで用いられるNode.jsのバージョン管理ツールです。

インストールの流れ: Homebrew → nodebrew → Node.js → bower

プロジェクトの作成

まだ自身のプロジェクトにbower.jsonを作成していない場合、プロジェクトのルートディレクトリへ移動し、次のコマンドを実行してください。

bower init

コマンドを実行すると何回か質問されますが、bower.jsonが生成されたあと直接編集すればよいのでとりあえずすべてEnterで問題ありません。

次のコマンドはPolymerのバージョン1.0.0〜2.0.0未満の最新バージョンをインストールします。

bower install --save Polymer/polymer#~1.0.0

このコマンドの実行により、プロジェクトのルートディレクトリにbower_componentsフォルダが作成され、ここにPolymerと依存するライブラリが自動で追加されます。--saveを指定することにより、このコマンドがbower.jsonに保存されます。次はコマンド実行後のbower.jsonの例です。

{
  "name": "my-project",
  "version": "0.0.0",
  "dependencies": {
    "polymer": "Polymer/polymer#~1.0.0"
  }
}

Polymerのアップデート

新しいバージョンのPolymerが利用可能になった場合、プロジェクトのルートディレクトリへ移動し、次のコマンドを実行してください。

bower update

このコマンドはbower.jsonにもとづき、bower_componentsフォルダにある対象のライブラリをアップデートします。

Polymerコンポーネントのインストール

「デベロッパーガイド」ではiron-inputとiron-flex-layoutを使用するので、最小構成としてこの2つのコンポーネントをインストールすることをおすすめします。

コンポーネントをインストールするには「Polymer Catalog」を開き、対象のコンポーネント (iron-input, iron-flex-layout など) を選択します。選択すると左ペインのBower Commandにコンポーネントインストール用のコマンドが表示されるので、これをクリップボードにコピーします。

f:id:masterpg:20160921185205p:plain

次に自身のプロジェクトのルートディレクトリへ移動し、先ほどコピーしたコマンドを実行してください:

bower install --save PolymerElements/iron-input

実行すると、インストール対象のコンポーネントとそれに依存するコンポーネントも同時にインストールされます:

f:id:masterpg:20160921185137p:plain

また、bower.jsonにインストール対象のコンポーネントが、依存コンポーネントとして追加されます:

{
  "name": "my-project",
  "version": "0.0.0",
  "dependencies": {
    "polymer": "Polymer/polymer#~1.0.0",
    "iron-input": "PolymerElements/iron-input#~1.0.6"
  }
}