AngularJS\u3084Polymer\u306b\u3064\u3044\u3066\u8abf\u3079\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u958b\u767a\u74b0\u5883\u69cb\u7bc9\u304c\u7c21\u5358\u3068\u3044\u3048\u3070\u7c21\u5358\u3001\u4e2d\u8eab\u304c\u898b\u3048\u306a\u304f\u3066\u3088\u304f\u308f\u304b\u3089\u306a\u3044\u3068\u3044\u3048\u3070\u3088\u304f\u308f\u304b\u3089\u306a\u3044\u3001\u3068\u3044\u3046\u305d\u3093\u306a\u611f\u3058\u3067\u3059\u3002\u3068\u306b\u304b\u304f\u52d5\u304b\u3059\u3068\u3044\u3046\u3053\u3068\u3092\u512a\u5148\u3059\u308b\u3068\u3001\u6df1\u304f\u8003\u3048\u3066\u3044\u308b\u6642\u9593\u306f\u306a\u3044\u306e\u3067\u3001\u3056\u3063\u3068\u3084\u3063\u3066\u307f\u307e\u3059\u3002\u306a\u304a\u3001Ruby\u3068Node.js\u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u524d\u63d0\u3067\u3059\u3002
\n
\nSass\u5bfe\u5fdc\u306e\u305f\u3081\u306bcompass\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u304a\u304f\u3068\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n
\r\n$ gem install compass\r\n<\/pre>\nYeoman\u306f\u5feb\u9069\u306a\u958b\u767a\u30ef\u30fc\u30af\u30d5\u30ed\u30fc\u3092\u63d0\u4f9b\u3057\u3066\u304f\u308c\u308b\u30c4\u30fc\u30eb\u3067\u3059\u3002Grunt\u306f\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u3067\u3059\u3002Gulp\u306fGrunt\u3092\u6539\u826f\u3057\u305f\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u3067\u3059\u3002Bower\u306f\u30d1\u30c3\u30b1\u30fc\u30b8\u7ba1\u7406\u30c4\u30fc\u30eb\u3067\u3059\u3002\u4f7f\u3044\u5206\u3051\u308b\u5fc5\u8981\u304c\u3042\u308a\u305d\u3046\u3067\u3059\u304c\u3001\u307e\u305a\u306f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3092\u3057\u3066\u304a\u304f\u3053\u3068\u306b\u3057\u307e\u3059\u3002<\/p>\n
\r\n$ npm install -g yo grunt-cli gulp bower\r\n<\/pre>\nYeoman\u3067Web\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\u305f\u3081\u306e\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u306b\u306f\u3001generator-webapp\u3068\u3044\u3046\u306e\u304c\u3042\u308b\u306e\u3067\u3001\u3053\u308c\u3092\u4f7f\u3063\u3066\u307f\u307e\u3059\u3002grunt serve\u3067\u81ea\u52d5\u3067Web\u30d6\u30e9\u30a6\u30b6\u304c\u8d77\u52d5\u3057\u307e\u3059\u3002\u30a8\u30c7\u30a3\u30bf\u3067index.html\u306a\u3069\u3092\u7de8\u96c6\u3057\u3066\u4fdd\u5b58\u3059\u308b\u3068\u3001\u305d\u308c\u304c\u5373\u5ea7\u306bWeb\u30d6\u30e9\u30a6\u30b6\u3078\u53cd\u6620\u3055\u308c\u308b\u306e\u3067\u3001\u3044\u308d\u3044\u308d\u3068\u8a66\u3057\u306a\u304c\u3089\u30c7\u30b6\u30a4\u30f3\u8abf\u6574\u3084\u30a2\u30d7\u30ea\u958b\u767a\u304c\u3067\u304d\u3066\u4fbf\u5229\u3067\u3059\u3002<\/p>\n
\r\n$ npm install -g generator-webapp\r\n$ mkdir -p $HOME\/workspace\/yeoman\/sample-webapp\r\n$ cd $HOME\/workspace\/yeoman\/sample-webapp\r\n$ yo webapp\r\n$ grunt serve\r\n<\/pre>\nAngularJS\u30a2\u30d7\u30ea\u3092\u4f5c\u308b\u305f\u3081\u306e\u30b8\u30a7\u30cd\u30ec\u30fc\u30bf\u306b\u306f\u3001generator-angular\u3068\u3044\u3046\u306e\u304c\u3042\u308b\u306e\u3067\u3001\u3053\u308c\u3092\u4f7f\u3063\u3066\u307f\u307e\u3059\u3002\u751f\u6210\u6642\u306bSass\u3092\u4f7f\u308f\u306a\u3044\u3068\u6307\u5b9a\u3057\u305f\u65b9\u304c\u751f\u6210\u3055\u308c\u305f\u30d5\u30a1\u30a4\u30eb\u306e\u69cb\u6210\u3092\u7406\u89e3\u3059\u308b\u306e\u306f\u697d\u306b\u306a\u308a\u305d\u3046\u3067\u3059\u3002bower\u30b3\u30de\u30f3\u30c9\u3067\u300c–save\u300d\u3092\u3064\u3051\u308b\u3068\u3001bower<\/p>\n
\r\n$ npm install -g generator-angular\r\n$ mkdir -p $HOME\/workspace\/angularjs\/sample\r\n$ cd $HOME\/workspace\/angularjs\/sample\r\n$ yo angular --minsafe sample\r\n$ bower install angular-bootstrap --save\r\n$ grunt serve\r\n<\/pre>\nPolymer\u3092\u4f7f\u3063\u305f\u30a2\u30d7\u30ea\u306f\u3001Bower\u30b3\u30de\u30f3\u30c9\u304c\u3042\u308c\u3070\u4f5c\u308c\u308b\u3088\u3046\u3067\u3059\u3002<\/p>\n
\r\n$ mkdir -p $HOME\/workspace\/polymer\/sample\r\n$ cd $HOME\/workspace\/polymer\/sample\r\n$ bower init\r\n$ bower install --save Polymer\/polymer\r\n$ bower install --save Polymer\/core-ajax\r\n<\/pre>\n\u300cbower init\u300d\u3092\u5b9f\u884c\u3057\u305f\u6642\u306b\u3001\u3044\u304f\u3064\u304b\u8cea\u554f\u3055\u308c\u307e\u3059\u3002\u6b21\u306e\u3088\u3046\u306b\u56de\u7b54\u3059\u308c\u3070\u3044\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n
\r\nname: [bower_test] sample \/\/ \u4f5c\u6210\u3059\u308b\u30d7\u30ed\u30b0\u30e9\u30e0\u540d\r\nversion: [0.0.0] 0.0.0 \/\/ \u30d0\u30fc\u30b8\u30e7\u30f3\u756a\u53f7\r\nmain file: [] \/\/ \u30a8\u30f3\u30c9\u30dd\u30a4\u30f3\u30c8\uff08\u7701\u7565\uff09\r\nadd commonly ignored files to ignore list? (y\/n): [y] y \/\/ \u516c\u958b\u6642\u306b\u7121\u8996\u3059\u308b\u30d5\u30a1\u30a4\u30eb\u3092ignore\u30ea\u30b9\u30c8\u306b\u8ffd\u52a0\u3059\u308b\u306a\u3089y\r\n<\/pre>\n\u300cbower install –save Polymer\/polymer\u300d\u3067\u300c–save\u300d\u3092\u6307\u5b9a\u3059\u308b\u3068\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b\u3088\u3046\u306b\u6307\u5b9a\u3057\u305f\u30d1\u30c3\u30b1\u30fc\u30b8\u304c bower.json \u3078\u8ffd\u52a0\u3055\u308c\u307e\u3059\u3002bower.json\u306b\u306f\u4f9d\u5b58\u95a2\u4fc2\u304c\u3042\u308b\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u8a18\u8ff0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u306e\u3067\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u306a\u304c\u3089\u8ffd\u52a0\u3092\u3059\u308b\u3068\u304d\u306b\u306f\u300c–save\u300d\u3092\u6307\u5b9a\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002\u624b\u52d5\u3067bower.json\u3092\u7de8\u96c6\u3057\u3066\u304b\u3089\u300cbower install\u300d\u3092\u5b9f\u884c\u3059\u308b\u3068\u3044\u3046\u9806\u756a\u3067\u3082\u304b\u307e\u3044\u307e\u305b\u3093\u3002<\/p>\n
\u3053\u308c\u304b\u3089\u4f5c\u6210\u3059\u308bPolymer\u306e\u30b5\u30a4\u30c8\u3067\u7d39\u4ecb\u3055\u308c\u3066\u3044\u308b\u30b5\u30f3\u30d7\u30eb\u30a2\u30d7\u30ea\u306f\u6b21\u306e\u3088\u3046\u306a\u69cb\u6210\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\r\nsample\r\n\u251c\u2500\u2500 bower.json\r\n\u251c\u2500\u2500 bower_components\r\n\u2502 \u251c\u2500\u2500 core-component-page\r\n\u2502 \u251c\u2500\u2500 polymer\r\n\u2502 \u2514\u2500\u2500 webcomponentsjs\r\n\u251c\u2500\u2500 elements\r\n\u2502 \u2514\u2500\u2500 my-element.html\r\n\u2514\u2500\u2500 index.html\r\n<\/pre>\n\u30d5\u30a1\u30a4\u30eb my-element.html, index.html \u306f\u81ea\u5206\u3067\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n
\r\n$ mkdir elements\r\n$ vi elements\/my-element.html\r\n$ vi index.html\r\n<\/pre>\nmy-element.html \u306f\u6b21\u306e\u901a\u308a\u3002<\/p>\n
\r\n<link rel="import" href="..\/bower_components\/polymer\/polymer.html">\r\n<link rel="import" href="..\/bower_components\/core-ajax\/core-ajax.html">\r\n\r\n<polymer-element name="my-element" noscript>\r\n <template>\r\n <span>I'm <b>my-element<\/b>. This is my Shadow DOM.<\/span>\r\n <core-ajax url="http:\/\/example.com\/json" auto response="{{resp}}"><\/core-ajax>\r\n <textarea value="{{resp}}"><\/textarea>\r\n <\/template>\r\n<\/polymer-element>\r\n<\/pre>\nindex.html\u306f\u6b21\u306e\u901a\u308a\u3002<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n <head>\r\n <!-- 1. Load platform support before any code that touches the DOM. -->\r\n <script src="bower_components\/webcomponentsjs\/webcomponents.min.js"><\/script>\r\n <!-- 2. Load the component using an HTML Import -->\r\n <link rel="import" href="elements\/my-element.html">\r\n <\/head>\r\n <body>\r\n <!-- 3. Declare the element by its tag. -->\r\n <my-element><\/my-element>\r\n <\/body>\r\n<\/html>\r\n<\/pre>\n\u5f8c\u306f\u3001Web\u30d6\u30e9\u30a6\u30b6\u3092\u8d77\u52d5\u3057\u3066\u3001index.html \u3092\u958b\u304f\u3068\u3001index.html\u306bmy-element\u8981\u7d20\u304c\u57cb\u3081\u8fbc\u307e\u308c\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n
\n