Propeller を試す


## Propellerとは？

Material Designに対応したBootstrap用デザインテンプレート。


## 使ってみよう

### 前提条件

初めての人は、以下のコマンドを叩いてグローバルにgulpとbowerを入れてください。

```shell-session
$ npm install -g gulp bower
```

### フォルダの作成

「public/js」となるようなフォルダを作ります。

```shell-session
$ mkdir public 
$ cd public 
$ mkdir js
```

### npmの準備

```shell-session
$ npm init
```

でアプリ名等々を設定した後、

```shell-session
$ npm install --save-dev gulp gulp-concat gulp-rename gulp-less gulp-minify-css gulp-uglify gulp-filter gulp-bower-files main-bower-files
```
で必要なモジュールをインストール

### BowerでPropellerをインストール

bower.jsonが指定されていたのでbowerから頂く。

```shell-session
$ bower install https://github.com/digicorp/propeller.git --save
```

※ 「--save」を忘れるとbower.jsonができないので注意。


### VSCodeを起動

```shell-session
$ code .
```

### gulpfile.jsを作成

偉大なる先人からコードを頂く
http://chaika.hatenablog.com/entry/2015/08/24/182004

```javascript
{
    "name": "propeller",
    "version": "0.0.4",
    "homepage": "http://propeller.in/",
    "authors": [
        "Digicorp, Inc"
    ],
    "description": "Propeller is a front-end responsive framework based on Google's Material Design Standards & Bootstrap.",
    "main": [
        "dist/js/propeller.js",
        "dist/css/propeller.css"
    ],
    "keywords": [
        "css",
        "js",
        "mobile-first",
        "responsive",
        "front-end",
        "framework",
        "web"
    ],
    "license": "MIT",
    "ignore": [
        "archive",
        "templates",
        "components/*/snippets/**"
    ],
    "dependencies": {
        "bootstrap": "^3.0.0",
        "jquery": "^1.9.0"
    }
}
```

### このままではうまくいかないのでこうする

/bower_components/propeller/bower.jsonを変更する。

```javascript
  "main": 
    [
      "dist/js/propeller.js",
      "dist/css/propeller.min.css"
    ]
  ,
```

### タスクランナ―の設定

VSCodeで「Ctrl + Shift + B」を押下すると、task.jsonの作成を促されるので作成。
以下のように設定します。
```javascript
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [{
        "taskName": "default",
        "args": [],
        "isBuildCommand": true,
        "problemMatcher": "$msCompile"
    }]
}
```

「Ctrl + Shift + B」を再度押下でビルドできます。

![image](https://qiita-image-store.s3.amazonaws.com/0/97156/b26e44d1-7081-13d9-a660-1ff4ca3715f3.png)
こんな感じでpublic/jsに_bundle.jsが出力されていればOK。

## ではコーディング

public/index.htmlを作成
```html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/_bundle.css">
    <script type="text/javascript" src="./js/_bundle.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h2>bootstrap button</h2>
        <button type="button" class="btn btn-success"> Success </button >
        <h2>Propeller button</h2>
        <button type="button" class="btn pmd-ripple-effect btn-success"> Success </button >
    </div>
</body>

</html>
```

## 実行のための準備

index.jsを記載
```javascript
var connect = require("connect");
var serveStatic = require('serve-static');

var app = connect();

var _port = process.env.PORT || 3000;

app.use(serveStatic('./public'));
app.listen(_port);
```


端末を開き、

```shell-session
$ npm install --save connect serve-static
$ node index.js
```

ブラウザで「localhost:3000」にアクセス。

![image](https://qiita-image-store.s3.amazonaws.com/0/97156/60f959c2-ed83-53bf-532b-eeb519f8be3f.png)

できた！

ちゃんとRipple Effectに対応していることを確認しましょう。