Polymerを試し始めるまでの手順を淡々とまとめました。
PolymerはWeb Componentsの機能をいろいろなブラウザで利用するためのライブラリです。詳しくはこちらなどを参照してください。

環境

OSX 10.9.3
VirtualBox 4.3.2
Vagrant 1.6.3

VagrantによるUbuntuのセットアップ

今回はhttp://www.vagrantbox.esからUbuntu 14.04 daily Cloud Imageというboxを選んで使いました。

今回は知ってる手順で適当にやったのですが、最近は https://vagrantcloud.com/discover/popular あたりで適当なものを見繕ってダウンロードするのが良さそうです。

適当なディレクトリを作って

vagrant box add precise1404 https://cloud-images.ubuntu.com/vagrant/trusty/current/trusty-server-cloudimg-amd64-vagrant-disk1.box

を実行。しばらくダウンロードに時間がかかります。

終わったらVagrantfileを作成します。

vagrant init precise1404

後でOSX側からUbuntu上のHTTPサーバにアクセスしたいので、カレントディレクトリのVagrantfileに

config.vm.network "forwarded_port", guest: 8080, host: 8080

とポートフォワーディングの設定を追記しておきます。

設定が終わったら

vagrant up

を実行して仮想マシンを起動します。

成功したら、

vagrant ssh

を実行すると、(Linux/OSXの場合)仮想マシンに自動でSSH接続してくれます。
Windowsの場合はSSHクライアントをインストールする必要があると思います。

node.jsのインストール

以下、セットアップしたUbuntu上で実行します。

https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager#ubuntu-mint-elementary-os
を参照して

sudo apt-get install nodejs-legacy npm

を行いnodeとnpmをインストールします。

bowerのインストール

よく知らなかったのですが、Webサイトを見ると、フロントエンド周りのリソースのためのパッケージマネージャのようです。以下を実行するだけです。

npm install -g bower

Polymerのインストール

というわけで本丸のPolymerをインストールします。(公式マニュアルを参考にしました) 以前のバージョンだとgitリポジトリをcloneする手順だったようですが、依存関係のために最近はbowerを使用してのインストールが推奨されているようです。

bower init
bower install --save Polymer/polymer

を実行すると、カレントディレクトリにbower_components/が作成され、polymerのコア部分がインストールされます。以下、bowerを用いてインストールしたパッケージはbower_components/以下に格納されます。

Polymerプロジェクトで作成された既存のカスタムエレメントをインストールするには

bower install --save Polymer/polymer-elements Polymer/polymer-ui-elements

を実行します。

試す

プロジェクトで用意されているカスタムエレメントをざっと見て、名前が面白そうな<polymer-ui-clock>と<polymer-ui-weather>というエレメントをインストールして表示してみます。

カスタムエレメントのインストール

bower install Polymer/polymer-ui-clock
bower install Polymer/polymer-ui-weather

カスタムエレメントを利用したHTMLの記述

公式チュートリアルを参考に以下のように記述しました。ファイル名はindex.htmlとします。

<!DOCTYPE html>
<html>
  <head>
    <!-- 1. Load platform.js for polyfill support. -->
    <script src="bower_components/platform/platform.js"></script>

    <!-- 2. Use an HTML Import to bring in the element. -->
    <link rel="import"
      href="bower_components/polymer-ui-clock/polymer-ui-clock.html">
    <link rel="import"
      href="bower_components/polymer-ui-weather/polymer-ui-weather.html">
  </head>
  <body>
    <!-- 3. Declare the element. Configure using its attributes. -->
    <polymer-ui-weather></polymer-ui-weather>
    <polymer-ui-clock></polymer-ui-clock>
  </body>
</html>

<link>タグでインストールしたカスタムエレメントに対応するHTMLをインポートしたら普通にタグが使える状態になります。

HTTPサーバを起動する

今回はnpmでインストール可能なHTTPサーバとしてhttp-serverを使用しました。

npm install -g http-server

あとは以下のコマンドでサーバを起動すると

http-server

ブラウザからカレントディレクトリ以下にアクセスすることができます。

先ほど、Vagrantの設定でホストOS側にポートフォワードしたので、ホストOS(OSX)側からhttp://localhost:8080/index.htmlにアクセスすると以下のような画面を見ることができました。

f:id:kimito_k:20140610233252p:plain

試してみて

npm/bowerがあるおかげで比較的サクッと試すことができました。やっぱりパッケージマネージャは必要ですね。ただ、bowerについてはバージョン管理がうまく行っていないのか、依存ライブラリのバージョンがコンフリクトしている警告が出たりしました。(深追いしてないので原因はよくわかりませんが)

実際やってみて、やはりHTML上で標準以外のタグが使えるというのに可能性を感じました。こうなるとHTMLをある種のDSLとしてとらえて使用することが考えられそうです。

ということで、時間をみて自分でエレメントを作成してみようと思います。

自由課題

学んだり、考えたり、試したりしたこと。

Web ComponentsのライブラリPolymerを試しはじめるまでの記録

環境