nodejs+expressで自PCにオレオレあぷろだをつくる

こんにちは。のらぬこです。

何回かに分けて、僕が持っている４種類のゲーム機（PS3、PS4、PSvita、3DS）のスクショ画面をPCにネットワーク経由で取り込む話をしました。

いずれのハードも、一旦インターネット上の何処かにファイルをアップロードし、PCからそれを取り出すというやり方で実現可能という内容でした。

でも、外部のサービスを利用しなくても、自分のPCにWebサーバを立てれば、ゲーム機のWebブラウザから自分のPCに接続し、スクショ画像を自分のPCに直接アップロードすることができるようになります。

今回は、自PCでオレオレあぷろだを立ち上げ、ゲーム機で撮ったスクショを自PCに直接アップロードできるような仕組みを作りたいと思います。

3DSのみ、スクリーンショットの保存方法が特殊なため、今回記載する方法は使えません。
ただし、ゲーム内にスクリーンショット保存機能を持つ一部のゲーム（ファンタジーライフリンクやドラゴンクエスト８等）や、３DSカメラで撮影した写真等は、今回紹介する方法を使用して、画像データをPCに直接アップロードすることが可能です。

開発言語をどうするかはちょっとだけ悩んだのですが、昔、nodejsを使うと簡単にWebサーバがたてられるみたいな記事をどこかで見たのを思い出し、nodejsで書いてみることにしました。

とりあえず「nodejs ファイルアップロード」でググってコピペで動かしてみようって思ったのですが、意外と動かず苦労しました。

開発・実行環境

Windows10 Home x64
nodejs
- version 6.9.1 LTS
- Node.js
express(nodejsで動作する軽量webフレームワーク)
- version:4.14.0
- Express 4.x - API リファレンス
multer(multipartなformdataを扱うためのモジュール)
- version 1.2.0
- GitHub - expressjs/multer: Node.js middleware for handling `multipart/form-data`.

前準備

必要なモジュールをインストールし、expressのひな型プロジェクトを作成します。

C:\DATA>npm --version
3.10.8

C:\DATA>npm install -g express
`-- express@4.14.0

C:\DATA>npm install -g express-generator
`-- express-generator@4.14.0

C:\DATA>express uploader

C:\DATA>cd uploader && npm install

multer モジュールをプロジェクトに追加します

package.jsonを以下のように編集します。

{
  "name": "uploader",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.14.0",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0",
    "multer": "~1.2.0"    // <=== 追加
  }
}

編集が終わったらモジュールをインストールします

C:\DATA\uploader>npm install

ここまでの作業の動作確認をする

まず、Webサーバを起動します。

C:\DATA\uploader>npm start

> uploader@0.0.0 start C:\DATA\uploader
> node ./bin/www

Webブラウザで http://localhost:3000/ に接続すると、以下のような画面が表示されるはずです。」 f:id:noranuk0:20161118001601p:plain

また、コマンドプロンプト（コンソール）には以下のようなログが出力されるはずです。

GET / 200 420.317 ms - 170
GET /stylesheets/style.css 200 6.069 ms - 111

ここまで確認できたら、コマンドプロンプト上で CTRL+C を押し、サーバを停止します。

補足

express は軽量webサーバを作るためのモジュール、express-generatorはexpressのためのひな型プロジェクトを生成するためのモジュールです。

また、multerは form-dataを扱うためのモジュールです。

実装

まずはファイルのアップロード先ディレクトリを作ります

C:\DATA\uploader>mkdir uploads

次に、ファイルアップロード画面のWebページを作成します。 views/index.jade を以下のように編集します。

extends layout

block content
  form(method="post", enctype="multipart/form-data", action="/")
      input(type="file", name="uploadedfile")
      input(type="submit")

最後にapp.js を編集し、formがpost 際の動作を実装します。

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 multer = require('multer');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

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

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

// 追加ここから >>>>
var storage = multer.diskStorage({
          destination: function (req, file, cb) {
                      cb(null, './uploads')
                    },
          filename: function (req, file, cb) {
                      cb(null, '[' + Date.now() + ']' + file.originalname)
                    }
});
var upload = multer({ storage: storage });

app.post('/', upload.single('uploadedfile'), function (req, res) {
        console.log(req.file);
        res.redirect(301, '/');
});
// 追加ここまで <<<<

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