「Start Bootstrap – Free Bootstrap Themes and Templates」にあるテーマやテンプレートを使うときに手軽に試すにはどうするのがいいか考えています。Yeoman(The web’s scaffolding tool for modern webapps | Yeoman)を使うとWebサイトのプロトタイプを簡単に作成できるので、組み合わせるといいかもしれないと思い、使ってみました。基本は「Getting started with Yeoman | Yeoman」を見るとわかります。
node.js、npmはインストール済みだとします。yo、bower、grunt-cli、gulp を最初にインストールしておきます。
$ npm install -g yo bower grunt-cli gulp
Webサイトのジェネレータがいくつかあり、シンプルなのは generator-webapp なので、これを使ってみます。どんなジェネレータがあるかは「Generators | Yeoman」で探します。
$ npm install -g generator-webapp
generator-webappからサンプルコードを生成するには下記のようyoコマンドを使います。sample001というディレクトリにコード生成しています。一番最初の選択肢でBootstrapにしておきました。
$ mkdir sample001 $ cd sample001 $ yo webapp
後は、gruntコマンドで試したり、テストをしたりすればいいだけです。
$ grunt serve $ grunt test $ grunt
例えば「SB Admin 2 – Bootstrap Admin Theme」を使ってみるには、「SB Admin 2 – Free Bootstrap Admin Theme – Start Bootstrap」によるとbowerでインストールすれば良いということなので、sample001をカレントとして下記コマンドで追加しました。
$ bower install startbootstrap-sb-admin-2 --save
追加するときにBootstrapのバージョンがあわないということで警告がでたので、SB Admin 2が使えるバージョンを選びました。
あとは、index.htmlをコピーして、login.htmlやdashboard.htmlを用意し、「SB Admin 2 – Bootstrap Admin Theme」のサンプルをコピーして、どういう表示になるか確認をしてみました。ログイン画面はmain.cssを「 <!– link rel=”stylesheet” href=”styles/main.css” –>」と無効にすると、そのまま使えました。ダッシュボード画面は表やタイムラインがうまく表示できませんが、メニューやパネルは表示できました。
わざわざYeomanを使わなくてもいいのかもしれませんが、動かすのもそれほど難しいわけではないので、試したいときには、こういうツールを使ってみるのはひとつの選択肢ですね。