つきのさんアソビバ。

IT的なことからアケゲー、オンゲなど趣味もつらつら

Node.js+Expressその2

前回の続きです。 tukino-salve.hatenablog.com

今回はRekognitionの検証用に作ったページをExpressのディレクトリ構造に当てはめて置き換えしていきます。 あとついでにRekognitionへの問い合わせを非同期化して、 画面問い合わせとRekognitionによる分析を切り分けるようにしていきます。



まずはroutesにファイルを追加します。
routes/imgupld.js

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

var aws = require('aws-sdk');
aws.config.update({
    accessKeyId: 'xxxxxxxxxxxxxxxxxxxxx',
    secretAccessKey: 'xxxxxxxxxxxxxxxxxxxxx',
    region: 'us-east-1',
});
aws.config.apiVersion = {
    rekognition: '2016-06-27',
};

router.get('/', function(req, res, next) {
    console.log('get start');  

    //分析は時間がかかるため、非同期で実行
    res.render('imgupld', {mes : ''});

    console.log('get end');    
});

router.post('/', function(req, res, next) {
    console.log('post start');

    var rekognition = new aws.Rekognition();

    // Rekognitionに渡すイメージを設定
    var params = {
        Image: {
            S3Object: {
                Bucket: 'image-categorize',
                Name: 'cat.jpg'
            }
        },
        MaxLabels: 100,
        MinConfidence: 70
    };

    // Rekognitionからの戻り値で画面表示値を作成
    var mes = '';
    rekognition.detectLabels(params, function(err, data) {
        if(err) {
            console.log(err, err.stack);
        } else {
            data.Labels.forEach(function(label) { 
                mes += label.Name + ': ' + Math.round(label.Confidence) + "\%\n";
            });
        }
        console.log("mes :" + mes);
        res.json({ mes: mes});
    });

    console.log('post end');
});

module.exports = router;



view用にjQueryも配置
public/javascripts/jquery-3.2.0.js

続いてviewを配置ー。
views/imgupld.ejs

<!DOCTYPE html>
<html>
    <head>
       <title>imgupld</title>
       <link rel='stylesheet' href='/stylesheets/style.css' />
       <script type="text/javascript" src="/javascripts/jquery-3.2.0.js"></script>
       <script type="text/javascript">
           $.ajax({
               type: 'POST',
               url: '/imgupld',
               dataType: 'json',
               beforeSend: function(jqXHR, setting) {
                   // 送信前処理
               },
               success: function(res) {
                   // 成功時
                   $('#mes').text(res.mes);
               },
               error: function() {
                   // 失敗時
               }
           });
       </script>
   </head>
    <body>
        <div id='mes'><%= mes %></div>
    </body>
</html>


最後に画面遷移定義の追記とかを行います。
app.js

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');
var index = require('./routes/index');
var users = require('./routes/users');
var imgupld = require('./routes/imgupld');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// 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('/', index);
app.use('/users', users);
app.use('/imgupld', imgupld);

// 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 handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;



まだ無駄な記述も多いんだけど、ちょっと後々を考えてたり試している途中だったりするので、そのまま。