概要
Node.js + Express で構築したサイトで Bootstrap を使えるようにする。
前提条件
- OS:Windows 8.1 Pro
- Node.JS ver.5.3.0 導入済
- Express 導入済
- ECT 導入済
Bower のインストール
Twitter社が提供しているフロントエンドのJavaScriptやCSSライブラリをインストール・管理するためのツールらしいです。これを使って導入してみます。
bower のインストール（グローバル）
>npm install bower -g
>bower -v
1.7.1
※バージョンが表示されればOKです。
component.json の作成
bowerは、component.jsonに書かれたライブラリをインストールしてくれるみたいです。ライブラリを一括で更新したい場合などに後で楽になるのでまずはcomponent.jsonを作成します。
>bower init
※コマンドは component.json を作成したいフォルダで実行してください。
実行後に色々入力を求められますがひたすらENTERで進めます。
component.json が作成されていればOKです。
.bowerrc の作成
デフォルトのままだと c:\dev\myapp\bower_components フォルダが作成されます。でも外部公開用のフォルダは c:\dev\myapp\public だと思われるのでこのフォルダ配下に導入されるようにしたい。
その場合、`.bowerrc' ファイルを作成すると導入先のフォルダを変更できるので作成する。
{
"directory": "public/bower_components",
"json": "bower.json"
}
Bootstrap の導入
bower を使って Bootstrap のライブラリをサイトに導入します。
>bower install bootstrap --save
※ --saveを付けると component.json に追加してくれます。
実行後に public/bower_components が作成され、bootstrap、jquery がフォルダに存在していればOKです。
※作成されたフォルダを削除して bower install と実行すれば同じフォルダが作成されるはずです。
＜補足＞
bower でライブラリを指定しないで install を行うと、component.json から情報を読込ライブラリを導入してくれるようです。
※初期値のままだとなにも指定していないのでなにも導入されません。
layout.ect の修正
デフォルトで bootstrap が使えるように layout.ect を修正します。
Bootstrap のサイトからベーシックテンプレがあるのでそれを使います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title><%= @title %></title>
<link href="stylesheets/style.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Default <span class="sr-only">(current)</span></a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li><a href="../navbar-fixed-top/">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
<% content %>
</div> <!-- /container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>
これで Bootstrap が適用されていればOKです。
GitHub に今回のサンプルをあげておきます。
以上