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