AngularJSやPolymerについて調べているのですが、開発環境構築が簡単といえば簡単、中身が見えなくてよくわからないといえばよくわからない、というそんな感じです。とにかく動かすということを優先すると、深く考えている時間はないので、ざっとやってみます。なお、RubyとNode.jsがインストールされている前提です。
Sass対応のためにcompassをインストールしておくと良いでしょう。
$ gem install compass
Yeomanは快適な開発ワークフローを提供してくれるツールです。Gruntはビルドツールです。GulpはGruntを改良したビルドツールです。Bowerはパッケージ管理ツールです。使い分ける必要がありそうですが、まずはインストールをしておくことにします。
$ npm install -g yo grunt-cli gulp bower
YeomanでWebアプリを作るためのジェネレータには、generator-webappというのがあるので、これを使ってみます。grunt serveで自動でWebブラウザが起動します。エディタでindex.htmlなどを編集して保存すると、それが即座にWebブラウザへ反映されるので、いろいろと試しながらデザイン調整やアプリ開発ができて便利です。
$ npm install -g generator-webapp $ mkdir -p $HOME/workspace/yeoman/sample-webapp $ cd $HOME/workspace/yeoman/sample-webapp $ yo webapp $ grunt serve
AngularJSアプリを作るためのジェネレータには、generator-angularというのがあるので、これを使ってみます。生成時にSassを使わないと指定した方が生成されたファイルの構成を理解するのは楽になりそうです。bowerコマンドで「–save」をつけると、bower
$ npm install -g generator-angular $ mkdir -p $HOME/workspace/angularjs/sample $ cd $HOME/workspace/angularjs/sample $ yo angular --minsafe sample $ bower install angular-bootstrap --save $ grunt serve
Polymerを使ったアプリは、Bowerコマンドがあれば作れるようです。
$ mkdir -p $HOME/workspace/polymer/sample $ cd $HOME/workspace/polymer/sample $ bower init $ bower install --save Polymer/polymer $ bower install --save Polymer/core-ajax
「bower init」を実行した時に、いくつか質問されます。次のように回答すればいいでしょう。
name: [bower_test] sample // 作成するプログラム名 version: [0.0.0] 0.0.0 // バージョン番号 main file: [] // エンドポイント（省略） add commonly ignored files to ignore list? (y/n): [y] y // 公開時に無視するファイルをignoreリストに追加するならy
「bower install –save Polymer/polymer」で「–save」を指定するとインストールするように指定したパッケージが bower.json へ追加されます。bower.jsonには依存関係があるパッケージを記述する必要があるので、インストールしながら追加をするときには「–save」を指定するようにしましょう。手動でbower.jsonを編集してから「bower install」を実行するという順番でもかまいません。
これから作成するPolymerのサイトで紹介されているサンプルアプリは次のような構成になります。
sample ├── bower.json ├── bower_components │ ├── core-component-page │ ├── polymer │ └── webcomponentsjs ├── elements │ └── my-element.html └── index.html
ファイル my-element.html, index.html は自分で作成します。
$ mkdir elements $ vi elements/my-element.html $ vi index.html
my-element.html は次の通り。
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<polymer-element name="my-element" noscript>
<template>
<span>I'm <b>my-element</b>. This is my Shadow DOM.</span>
<core-ajax url="http://example.com/json" auto response="{{resp}}"></core-ajax>
<textarea value="{{resp}}"></textarea>
</template>
</polymer-element>
index.htmlは次の通り。
<!DOCTYPE html>
<html>
<head>
<!-- 1. Load platform support before any code that touches the DOM. -->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- 2. Load the component using an HTML Import -->
<link rel="import" href="elements/my-element.html">
</head>
<body>
<!-- 3. Declare the element by its tag. -->
<my-element></my-element>
</body>
</html>
後は、Webブラウザを起動して、index.html を開くと、index.htmlにmy-element要素が埋め込まれることを確認できます。