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"
    }
}

Bootstrapのサンプルを見る

Bootstrapのサンプル(Examples)を見てみる。

ブラウザで、以下のサイトを開く。

http://getbootstrap.com/getting-started/#download

"Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the docs/examples/ directory."

と書いてあるので、"downloading the Bootstrap repository" のリンクより、zipファイルをダウンロードする。(自分がダウンロード時のファイル名は、 "bootstrap-3.3.6.zip" でした。)

そして、ダウンロードしたzipファイルを解凍する。
それで、上記のスクリーンショットのサンプル(Examples)はどこかにあるかというと、 "Examples can be found in the docs/examples/ directory." と書いていある通りに、zipファイルから、解凍した後の docs/examplesにサンプル(Examples)があるので見てみる。

* Starter template の場合

  zipファイルから解凍した後の docs/examples/starter-template/index.html なので、このファイルを開くと、Starter template のサンプル(Examples)が、ブラウザに表示される。

* Bootstrap theme の場合

  zipファイルから解凍した後の docs/examples/theme/index.html なので、このファイルを開くと、Bootstrap theme のサンプル(Examples)が、ブラウザに表示される。

なので、http://getbootstrap.com/getting-started/#download の Examples の見てみたいサンプル(Examples)は、zipファイルから解凍した後の docs/examples 以下のそれらしいフォルダ名以下のindex.htmlを開くと見ることができる。

無人走行車

近い未来、無人走行車が普及したら、自動車を運転する人はいなくなる。
そして、人間が自動車を運転することが、一番交通事故が起こる可能性が高くなると考えられるので、当然、規制が掛かる。
次の記事に、無人走行車に関してのことを見かけて、考えてみたんだ。

車の運転はもうすぐ違法になる

無人走行車が普及したら、全てでないが、減ってしまったり、なくなるものを思い浮かぶ。
タクシー、トラックの運転手。自動車事故の保険、自動車学校など。

F1は多分、なくならないだろうな。エンターテイメントだもんな。

そして、自動車免許がなくなったら、身分証明書は保健書、パスポートとかで代替なのか。
てか、身分証明書は技術が進歩したら、顔認識、指紋認識で良いと思うし。
また、自動車免許の更新しなくてよくなるね。
飲酒運転なくなるよ。飲み会にマイカーで行って、マイカーで帰れるよ。

趣味がドライブの人は、趣味が奪われるよ。

無人走行車、世の中を激変させるよ。

Fintechはブルーカラー臭がしない

最近、Fintechって言葉をよく見ますね。
今年の流行ワードでしょ。

ググるとこのような記事が見当たります。

FinTechが金融を変える・・・なぜFinTechが注目されるのか

Fintechは金融ビジネスを一変させる―2016年の予測、トップ4

ここらで世界一わかりやすく「FinTechとは何か」を説明しよう。

今までに、あったもしくは、近未来になるであろう技術を再定義した
ような言葉な感じですね。少なくとも自分にはそう思う。
データマイニング、Web2.0といった言葉のように・・・

ちなみに、WikiPediaの説明には、次のように書いてます。

Fintech

--------------------------------
Fintech（フィンテック、FinTech、Financial technology）とは、情報技術（IT）を駆使して金融サービスを生み出したり、見直したりする動きのことである。1990年代から使われてきた言葉で、2003年からは米国の業界紙アメリカン・バンカー（英語版）が「Fintech 100」と題する業界番付を発表したとされるが、2014年には米国における投資額が前年比約3倍の9887万ドルに達するなどして注目を集めた。 外部に公開した形で開発されることもあるため、オープンイノベーションの一環であるともされる。
--------------------------------

やっぱ、昔からあったのか。
わたくしは、プログラマーやっていてね。ITの専門家とかITコンサルタントとか
頭のいい人の言葉はどうもピンとこないね。ホワイトカラーでなくブルーカラー的なことをずっとやってきたから。
まぁ、ブルーカラーとかホワイトカラーとか分類分けするのもナンセンスだとは思うけど。文系とか理系みたいに。
とにかく、流行ワードが、今まで、役に立ったこととかほとんどないと思う。
泥臭くプログラム書いているんですよ。

会社のお偉いブチョーとかが、これからは、Fintechだとか言って、振り回される人とかいたりしたら悲惨ですね。

今のところ、自分の職場でFintechだ。とかは聞いたことない。
世間はどうなんでしょ。

Apple vs FBI

最近、AppleのiPhoneのアンロックをFBIが要求している件についてよく見たり聞いたりするが、思ったのはやっぱ、Appleすごいよなと。
やっぱ、日本だとこれだけメディアとかで目立つと、途端に掌を変えたりするのだが、
アメリカの企業というのもあるが、自分たちが作ったプロダクト及びサービスにポリシーを大事にしているでしょうね。
でも、ここでAppleが折れたら、Appleを信用が減るのではと思うが。
ともあれ、関心したわけです。

次の記事に書いてあるが、Apple vs FBIの支持はフィフティフィフティといったとこみたいです。

AppleのiPhoneパスワードのアンロック問題でアメリカ人の過半数はFBIを支持（ピュー・リサーチ調べ）

ですが、後で考えを改めた。

なぜか！

次の記事でビル・ゲイツが本件について、言及してるが

ビル・ゲイツ、 「Apple対FBI」に関する発言を明確化。予防措置と議論を求める

「Appleはサンバーナーディーノの銃乱射犯のiPhoneをアンロックすべきだ」と。

なぜなら

「これは政府が情報へのアクセスを求める個別の事例だ」
「汎用ツールを要求しているのではなく、固有のケースだ」
「これは、誰でも電話会社に情報を要求したり、銀行に取引記録を要求したりできることと変わりはない」
「銀行がハードディスクにリボンをかけて『これを切れと言うな、なぜなら今後何度も切れというだろうから』と言うようなものだ」

これを見て、ビル・ゲイツの意見の方がごもっともと思った。
本記事の冒頭では、Appleに対して関心したと言っているが
よくよく考えてると極端に考えすぎていたなと思った。

ドローンの固定翼機ってあったんだ。

ネットサーフィンしてたら、次の記事でドローンの固定翼機のことが書いてあった。

コプター型と固定翼型のドローンは何が違う？

今まで、ドローンって、コプター型のものしかないって思っていた。
もう、完全にヘリコプターって感じ。

ちなみ、「ドローン　種類」のキーワードでググった後の
記事の内容も固定翼機のことなんて見当たらない。
あっても、トライコプター(ローター[回転翼]が３つのドローン)、クアッドコプター(ローター[回転翼]が４つのドローン)、ヘキサコプター(ローター[回転翼]が６つのドローン)、オクトコプター(ローター[回転翼]が８つのドローン)とかのコプター型のことが書いてある。

「ドローン 固定翼」でググると固定翼機のことがでてくるね。
どうやら、CES2016で、Parrot社がDiscoっていう固定翼機を出展したとか、
最高時速80kmとか、今年に販売予定だとか。
次の記事に書いてあるが
このParrot社って、固定翼機のみならず、ラジコンみたいなドローン(タイヤが付いていて地上を走行？)とか、水陸両用のドローンも作っているのか。

Parrot社から固定翼型ドローン発表！プロペラが無くてもドローン？

個人的には、コプター型より固定翼機の方が見た感じは好きだな。
コプター型より固定翼機の機能的比較は、冒頭の記事に書いてあるが
離着陸はコプター型に利点あるけど、スピード、飛行時間、耐久性などは固定翼機の方が
優れているみたいだ。

node express POSTのデータの送信と受信

node express ectでクライアントからサーバにPOSTでデータの送信と受信する処理をプログラミングしてみました。formのsubmitからの送信の場合とjQueryを使用して送信した場合です。

node expressのプロジェクトを生成して自分自身がプログラミングしたソースは次の通りです。(※実際はindex.ect以外のectファイルの編集もしていますが、今回の記事の内容と関係ないので割愛します。)

=== app.js ===
今回、クライアントから受信するPOSTデータをサーバ側で処理するプログラム(sendreceive.js)を紐つけています。(9、29行目)

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 sendreceive = require('./routes/sendreceive');

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('/sendreceive', sendreceive);

// 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;

=== sendreceive.js ===
クライアントから受信したデータ"sendParam"を、クライアントにJSONのデータに含めて、送信しています。(6行目)

var express = require('express');
var router = express.Router();

/* POST ajax listing. */
router.post('/', function(req, res, next) {
    res.send({"send parameter is" : req.body.sendParam});
});

module.exports = router;

=== index.ect ===
formのsubmitして送信する場合は、"from form" を送信するようにしています。 (14行目)
jQueryを使用して送信する場合は、"from ajax" を送信するようにしています。 (36行目)

<% extend 'layout' %>

<%= "This is sample"  %>


<div id="drag-area" style="background-color: lightgrey; text-align: center;">
ajaxボタン送信ボタンを押すと、ajax送信します。<br />
<div class="btn-group">
<button id="btn">ajax送信</button>
</div>
</div>
<form action="/sendreceive" method="post" name="frm">
<input name="sendParam" type="hidden" value="from form" />
    >input type="submit" value="form送信" />
</form>
<div id="test">
</div>
<% block 'footer-info' : %>
  <div class="right">
page: sample</div>
<script>

$(function(){
    $('#btn').click(function() {
        sendData();
    });
});

function sendData() {

    $.ajax({
        url: "http://" + location.host + "/sendreceive",
        type: "post",
        data: {"sendParam": "from ajax"},
        success: function(data) {
            alert("データが送信されました。 : " + JSON.stringify(data));
        }
    });
}

</script>
<% end %>

また、後でメモとして見返すことを考えて、package.jsonも載せておきます。

=== package.json

{
    "name": "xxx",
    "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",
        "node-stringify": "0.0.19"
    }
}

動作確認したスクリーンショットは次の通りです。

＊初期画面表示時
　jQueryを使用しての確認は"ajax送信"ボタンを押下して確認します。
　formのsubmitからの確認は"form送信"ボタンを押下して確認します。

＊"ajax送信"ボタンを押下後

＊"form送信"ボタンを押下後

node Readable readメソッドの戻り値のバッファについて

nodeのReadableオブジェクトのreadメソッドですが、
readメソッドの引数には、readメソッド実行結果のバッファのバイト数を設定することができるのですが、このバッファの値は、どのように設定されるのか確認してみました。

さて、確認方法ですが、以前にnodeのファイルアップロード処理の記事を書きましたが、
そのファイルアップロードされた内容をReadableオブジェクトのreadメソッドで取得してみました。

ファイル内容は次の通りです。
=== test.txt ===

abcあ

そして、app.jsで今回、確認でコーディングした部分です。(app.js全体でなく、該当部分のみです。)
=== app.js ===

var fs = require('fs');

app.post('/up', upload.single('upFile'), function (req, res, next) {
    var readableStream = fs.createReadStream(req.file['path']);
    readableStream.on('readable', function() {
        var chunk;
        while (null !== (chunk = readableStream.read(8))) {
            console.log('chunk[' + chunk + ']');
            for (var i = 0; i < chunk.length; i++) {
                console.log("chunk[" + i + "] = " + chunk[i] + " : chunk[" + i + "].toString(16) = " + chunk[i].toString(16));
            }

        }
    });
    res.render('index');
});

実行結果は、次の通りです。

chunk[abcあ
]
chunk[0] = 97 : chunk[0].toString(16) = 61
chunk[1] = 98 : chunk[1].toString(16) = 62
chunk[2] = 99 : chunk[2].toString(16) = 63
chunk[3] = 227 : chunk[3].toString(16) = e3
chunk[4] = 129 : chunk[4].toString(16) = 81
chunk[5] = 130 : chunk[5].toString(16) = 82
chunk[6] = 10 : chunk[6].toString(16) = a

readメソッドの実行結果のバッファそのものは、ファイル内容の文字列そのものです。
そして、そのバッファを1つずつ、取り出した内容ですが

"a"の文字は、97になっています。これは、UTF8のaを10進数にしているから、97なのです。なので、16進数だと、61ですね。

ちなみに、"あ"の文字の場合は、3バイトなので、16進数だと、e3,81,82になります。
この場合、繰り返しますが、1文字3バイトです。
なので、バッファリング後に文字列処理がある場合を考慮して
バッファリングする時に、文字コードを判定して、1文字に何バイトかの判断が必要になります。
例えば、"あ"の文字の場合に、e3,81のみで、82を次の文字と判断したらいけないです。
e3,81,82です。