mBaaSお役立ちブログ

BtoBtoCで使える利用企業向け管理画面を作る【画像削除編】

BtoBtoC(BtoBtoBでも可)向けのアプリの場合、そのアプリを提供している会社向けに管理画面を提供したいと考えることがあります。その管理画面では、利用企業が自分たちのデータについてだけメンテナンスできるようになります。

そのための管理画面を作成していきます。今回は前回のベースを踏まえて、画像削除処理を作っていきます。

削除処理に必要なのはファイル名

ファイル削除APIは次のように実装されます。ファイル名が正しく与えられていて、更新/削除権限があれば問題ありません。

ncmb.File.delete(req.params.fileName)
.then(file => {
  res.redirect('/files');
})
.catch(error => {
  res.status(401).render('error', {error: error});
})

ExpressにPUT/DELETEメソッドを追加する

デフォルトのExpressではPUT/DELETEが解釈されません。とは言え、WebブラウザでもPUT/DELETEメソッドを直接実行はできません。そこでよく使われているのは _method という引数に対してPUTまたはDELETEという文字列を送るテクニックです。

それをサポートするために必要なのが method-override というライブラリです。

npm install method-override --save

次に app.js を編集します。

var methodOverride    = require('method-override');
app.use( methodOverride( (req, res) => {
  if (req.body && typeof req.body === 'object' && '_method' in req.body) {
    // look in urlencoded POST bodies and delete it
    var method = req.body._method;
    delete req.body._method;
    return method;
  }
}));

このようにして _method が送られてきたら、それに合わせてHTTPメソッドを変更します。

一覧画面の変更

そして views/files/index.jade を編集します。

div.col-md-3
  form(action='/files/'+file.fileName,method='post')
    input(type='hidden',name='_method',value='delete')
    button.btn.btn-warning 削除

このようなHTMLを追加することで、HTTPメソッドをDELETEとして使えるようになります。

routes/files.jsの変更

routes/files.jsではDELETEメソッドを受け取れるように変更します。

router.delete('/:fileName', (req, res, next) => {
  ncmb.File.delete(req.params.fileName)
  .then(file => {
    res.redirect('/files');
  })
  .catch(error => {
    res.status(401).render('error', {error: error});
  })
});

ルーティングで :fileName のように指定することで req.params.fileNameでファイル名を受け取れるようになります。そして該当するファイルを削除します。この時、ACLが設定されているので自分たちの管理していないファイルは削除できません。


ここまでの手順によってアップロードしたファイルの一覧から画像を削除する機能が実装されました。

BtoBtoCの管理画面においては認証、データメンテナンス、ファイル管理機能があれば問題なく運用できるでしょう。この他、検索やページネーションのような機能が求められるかも知れませんが、今回紹介した一連の記事の応用でできるはずです。

今回までのコードはNCMBMania/BtoB_Management at v0.5にて確認できます。実装時の参考にしてください。

バックナンバー