こばやしたかはるblog: node express ectにbootstrapを組み入れてみる

node express ectにbootstrapを組み入れてみる。

まず、次のサイトにアクセスする。

http://getbootstrap.com/

"Download Bootstrap"ボタンを押す。

"Download Bootstra"ボタンを押すとzipファイル(自分がダウンロード時のファイル名は、"bootstrap-3.3.6-dist.zip"でした。) をダウンロードする。

そして、ダウンロードしたzipファイルを解凍する。

この解凍されたcss、fonts、jsのフォルダをnodeのプロジェクトのpublicフォルダにコピーする。
nodeのプロジェクトのpublicフォルダには、はじめからjs及びcss用のフォルダとして、それぞれjavascripts、stylesheetsフォルダがあるが、今回はbootstrapのために、これらのフォルダは使用せず、ダウンロードしたzipファイルから解凍されたcss、fonts、jsのフォルダをそのまま、コピーすることにする。

コピー後

そして、今回は組み込んだbootstrapの動作確認のために、bootstrapのExsamplesにあるBootstrap themeのButtonsの部分を取り込んで正しく表示できるようにする。
* Examplesの中身を確認する方法は以下の記事を参照のこと。
Bootstrapのサンプルを見る

Bootstrap themeのButtons部分のコードは次の通り。
これをindex.ectファイル内に組み込む。

<div class="page-header">
<h1>Buttons</h1>
</div>
<button class="btn btn-lg btn-default" type="button">Default</button>
<button class="btn btn-lg btn-primary" type="button">Primary</button>
<button class="btn btn-lg btn-success" type="button">Success</button>
<button class="btn btn-lg btn-info" type="button">Info</button>
<button class="btn btn-lg btn-warning" type="button">Warning</button>
<button class="btn btn-lg btn-danger" type="button">Danger</button>
<button class="btn btn-lg btn-link" type="button">Link</button>
   
<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>
 
<button class="btn btn-sm btn-default" type="button">Default</button>
<button class="btn btn-sm btn-primary" type="button">Primary</button>
<button class="btn btn-sm btn-success" type="button">Success</button>
<button class="btn btn-sm btn-info" type="button">Info</button>
<button class="btn btn-sm btn-warning" type="button">Warning</button>
<button class="btn btn-sm btn-danger" type="button">Danger</button>
<button class="btn btn-sm btn-link" type="button">Link</button>
 
<button class="btn btn-xs btn-default" type="button">Default</button>
<button class="btn btn-xs btn-primary" type="button">Primary</button>
<button class="btn btn-xs btn-success" type="button">Success</button>
<button class="btn btn-xs btn-info" type="button">Info</button>
<button class="btn btn-xs btn-warning" type="button">Warning</button>
<button class="btn btn-xs btn-danger" type="button">Danger</button>
<button class="btn btn-xs btn-link" type="button">Link</button>

いよいよ、動作確認。
ブラウザで表示すると次のようになった。組み込んだbootstrapが、正しく動いている。

今回のbootstrapの動作確認に関連あるソースコードは以下の通り。

=== app.js ===
変更部分はexpressコマンドでプロジェクト生成後にect用に変更した13〜18行目

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
 
var routes = require('./routes/index');
var users = require('./routes/users');
 
var app = express();
 
// ECT view engine setup
var ECT = require('ect');
var ectRenderer = ECT({ watch: true, root: __dirname + '/views', ext: '.ect'});
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ect');
app.engine('ect', ectRenderer.render);
 
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
 
app.use('/', routes);
app.use('/users', users);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});
 
// error handlers
 
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}
 
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});
 
module.exports = app;

=== index.js ===
変更部分はなし。expressコマンドでプロジェクト生成後のそのまま。ただ載せているだけ。

var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});
 
module.exports = router;

=== error.ect ===
ectのエラー出力のためのテンプレート。bootstrapとは関係ない。ただ載せているだけ。

<html>
<head>
    <title>Error <%= @error.status %>>/title>
</head>
<body>
<span>
    Error Status: <%= @error.status %>
    <hr />
    <pre><%= @error.stack %></pre>
</span>
</body>
</html>

=== footer.ect ===
ectのフッター部分のテンプレート。bootstrapとは関係ない。ただ載せているだけ。

<div id="footer">
<div class="left">
Generated by ECT</div>
<% content 'footer-info' %>
</div>

=== index.ect ===
また、ExapmlesのButtons部分を取り込んでいる。8〜46行目

<% extend 'layout' %>
 
<%= "This is sample"  %>
 
<h1>
<%= @title %></h1>
Welcome to <%= @title %>
 
 
 
<div class="page-header">
<h1>
Buttons</h1>
</div>
<button class="btn btn-lg btn-default" type="button">Default</button>
<button class="btn btn-lg btn-primary" type="button">Primary</button>
<button class="btn btn-lg btn-success" type="button">Success</button>
<button class="btn btn-lg btn-info" type="button">Info</button>
<button class="btn btn-lg btn-warning" type="button">Warning</button>
<button class="btn btn-lg btn-danger" type="button">Danger</button>
<button class="btn btn-lg btn-link" type="button">Link</button>
 
<button class="btn btn-default" type="button">Default</button>
<button class="btn btn-primary" type="button">Primary</button>
<button class="btn btn-success" type="button">Success</button>
<button class="btn btn-info" type="button">Info</button>
<button class="btn btn-warning" type="button">Warning</button>
<button class="btn btn-danger" type="button">Danger</button>
<button class="btn btn-link" type="button">Link</button>
 
<button class="btn btn-sm btn-default" type="button">Default</button>
<button class="btn btn-sm btn-primary" type="button">Primary</button>
<button class="btn btn-sm btn-success" type="button">Success</button>
<button class="btn btn-sm btn-info" type="button">Info</button>
<button class="btn btn-sm btn-warning" type="button">Warning</button>
<button class="btn btn-sm btn-danger" type="button">Danger</button>
<button class="btn btn-sm btn-link" type="button">Link</button>
 
<button class="btn btn-xs btn-default" type="button">Default</button>
<button class="btn btn-xs btn-primary" type="button">Primary</button>
<button class="btn btn-xs btn-success" type="button">Success</button>
<button class="btn btn-xs btn-info" type="button">Info</button>
<button class="btn btn-xs btn-warning" type="button">Warning</button>
<button class="btn btn-xs btn-danger" type="button">Danger</button>
<button class="btn btn-xs btn-link" type="button">Link</button>
 
<% block 'footer-info' : %>
  <div class="right">
page: sample</div>
<% end %>

=== layout.ect ===
ectのレイアウト外枠。
以下のbootstrapのテンプレート部分(http://getbootstrap.com/getting-started/#download に載っている。)を取り込んでいる。5、6、8〜10行目

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title><%- @title %></title>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <% include 'script' %>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <% content %>
        <% include 'footer' %>
    </body>
</html>

=== script.ect ===
ectのscriptタグ部分箇所。bootstrapを動作させるために必要なjqueryの読み込みを定義。また、bootstrapsのjsの定義より前の行に定義する必要あり。

<script src="./javascripts/jquery-2.1.4.min.js"></script>

=== package.json ===
bootstrapとは関係ない。ただ載せているだけ。

{
    "name": "bootstrap",
    "version": "0.0.0",
    "private": true,
    "scripts": {
        "start": "node ./bin/www"
    },
    "dependencies": {
        "body-parser": "~1.13.2",
        "cookie-parser": "~1.3.5",
        "debug": "~2.2.0",
        "express": "~4.13.1",
        "jade": "~1.11.0",
        "morgan": "~1.6.1",
        "serve-favicon": "~2.3.0"
    }
}

こばやしたかはるblog

2016年2月29日月曜日

node express ectにbootstrapを組み入れてみる

0 件のコメント :

コメントを投稿