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

　Part 2のチュートリアルではBootstrapをnpmからインストールしてWebpackでビルドしました。Bootstrapは便利なのですがいつも同じデザインになって飽きてしまうのでカスタマイズしたテーマを使うと少し雰囲気が変わります。自分でデザインするのも大変なため、テイストが違うテーマがいろいろ選べるBootswatchを利用しています。

Bootswatch

　BootswatchはBootstrapのデフォルトを置き換えることができるテーマをいくつか用意しています。Mithrilで使う場合も簡単です。エントリポイントでBootstrapのCSSをロードしていたところを、BootswatchのCSSに置き換えます。Part 3のリポジトリはこちらです

Yetiのテーマ

　今回は一番気に入っているYetiのテーマを使います。Foundationぽいデザインになります。BootswatchのYetiのテーマに選択してメニューからbootstrap.min.cssのURLをコピーします。

　プロジェクトのCSSディレクトリに移動します。ここにコピーしたbootstrap.min.cssをダウンロードします。

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

CSSのimport

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

app/client/js/main.js

//import 'bootstrap/dist/css/bootstrap.css';
import '../css/bootstrap.min.css';

フォントのコピー

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

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

テーマ変更の確認

　前回のアラート画面だけだとBootswatchのテーマに変更した違いがよく見えません。

Homeコンポーネントの修正

　Homeコンポーネントに簡単なフォームを追加してみます。BootstrapのBasic Exampleをm関数で書き直しました。

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で説明しましたが、フロントエンドのコードはwebpack-hot-middlewareとwebpack-dev-middlewareで監視しています。docker-composeから開発用サーバーを起動していると、コードを編集して保存するたびにWebpackがリビルドをしてくれます。あとはブラウザのリロードすれば最新のHTMLになります。

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

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