MithrilとES6のチュートリアル - Part 3: Bootswatchのテーマを使う

　[Part 2](http://qiita.com/masato/items/efd82eb9d4f5d51f2873)のチュートリアルでは[Bootstrap](http://getbootstrap.com/)をnpmからインストールして[Webpack](https://webpack.github.io/)でビルドしました。Bootstrapは便利なのですがいつも同じデザインになって飽きてしまうのでカスタマイズしたテーマを使うと少し雰囲気が変わります。自分でデザインするのも大変なため、テイストが違うテーマがいろいろ選べる[Bootswatch](https://bootswatch.com/)を利用しています。

## Bootswatch

　[Bootswatch](https://bootswatch.com/)はBootstrapのデフォルトを置き換えることができるテーマをいくつか用意しています。Mithrilで使う場合も簡単です。エントリポイントでBootstrapのCSSをロードしていたところを、BootswatchのCSSに置き換えます。Part 3のリポジトリは[こちら](https://github.com/masato/docker-mithril-study/tree/master/part3)です

### Yetiのテーマ

　今回は一番気に入っている[Yeti](https://bootswatch.com/yeti/)のテーマを使います。[Foundation](http://foundation.zurb.com/)ぽいデザインになります。Bootswatchの[Yeti](https://bootswatch.com/yeti/)のテーマに選択してメニューから[bootstrap.min.css](https://bootswatch.com/yeti/bootstrap.min.css)のURLをコピーします。

　プロジェクトのCSSディレクトリに移動します。ここにコピーした[bootstrap.min.css](https://bootswatch.com/yeti/bootstrap.min.css)をダウンロードします。

```bash
$ cd app/client/css
$ wget https://bootswatch.com/yeti/bootstrap.min.css
```


### CSSのimport

　Mithrilのエントリポイントの`main.js`でnpmからインストールしたBootstrapのCSSを指定している箇所を、ダウンロードしたBootswatchのCSSに変更します。

```js:app/client/js/main.js
//import 'bootstrap/dist/css/bootstrap.css';
import '../css/bootstrap.min.css';
```

### フォントのコピー

　CSSファイルのimportを`node_modules`ディレクトリからプロジェクトに移動したので、フォントへの相対パスのディレクトリにフォントをコピーする必要があります。使い捨てのコンテナを起動してフォントをコンテナにマウントしているプロジェクトのディレクトリにコピーします。

```bash
$ docker-compose run --rm mithril bash
$ cp -R node_modules/bootstrap/dist/fonts/ app/client/fonts
```

## テーマ変更の確認

　[前回](http://qiita.com/masato/items/efd82eb9d4f5d51f2873)のアラート画面だけだとBootswatchのテーマに変更した違いがよく見えません。


### Homeコンポーネントの修正

　Homeコンポーネントに簡単なフォームを追加してみます。Bootstrapの[Basic Example](http://getbootstrap.com/css/#forms-example)を`m`関数で書き直しました。

```js:app/client/js/home.js
import m from 'mithril';

export default {
    controller: () => {},
    view: () => {
        return ('.container-fluid', [
            m('.row' , [
                m('.col-sm-10.col-sm-offset-1.col-md-10.col-md-offset-1', [
                    m('.page-header', [
                        m('h3', 'Bootswatch Yetiサンプル')
                    ]),
                    m('.alert.alert-info[role="alert"]', [
                        m('span.glyphicon.glyphicon-exclamation-sign[aria-hidden="true"]'),
                        m('span.sr-only', 'Info:'),
                        ' Infoのサンプルです。'
                    ])
                ]),
                m('.col-sm-10.col-sm-offset-1.col-md-10.col-md-offset-1', [
                    m('form',[
                        m('.form-group', [
                            m('label', { for: 'exampleInputEmail1' }, 'Email address'),
                            m('input', { type: 'email',
                                         class: 'form-control',
                                         id: 'exampleInputEmail1',
                                         placeholder: 'Email'})
                        ]),
                        m('.form-group', [
                            m('label', { for: 'exampleInputPassword1' }, 'Password'),
                            m('input', { type: 'password',
                                         class: 'form-control',
                                         id: 'exampleInputPassword1',
                                         placeholder: 'Password'})
                        ]),
                        m('button', { type: 'submit',
                                      class: 'btn btn-warning' },
                          'Submit')
                      ])
                ])
            ])
        ]);
    }
};
```

### Docker Composeのrun

　[Part 1](http://qiita.com/masato/items/154bcbf6e1eb1dc676ad)で説明しましたが、フロントエンドのコードは[webpack-hot-middleware](https://www.npmjs.com/package/webpack-hot-middleware)と[webpack-dev-middleware](https://www.npmjs.com/package/webpack-dev-middleware)で監視しています。docker-composeから開発用サーバーを起動していると、コードを編集して保存するたびにWebpackがリビルドをしてくれます。あとはブラウザのリロードすれば最新のHTMLになります。

```bash
$ docker-compose run \
 --rm \
  --service-ports \
  mithril \
  npm run nodemon
...
webpack built b93bb3f0b430188b9606 in 312ms
webpack building...
webpack built e6788efc490b6adb668d in 231ms
```

　少しYetiっぽいフォームの画面ができました。

<img width="963" alt="yeti-form.png" src="https://qiita-image-store.s3.amazonaws.com/0/43745/0f7a6e56-8372-2b78-51e2-bf06e9451433.png">