Azure Functionsを利用した画像サムネイル自動生成

このエントリーは、エキサイト Advent Calendar 2017 の 12/7の記事です。


こんにちは、ブログ技術セクション エンジニアの鈴木です。

本日はエキサイトブログで幅広く活用させていただいている Microsoft Azure の中から個人的に気になっているAzure Functionsを利用して、Azure Storageにアップロードした画像のサムネイルを自動生成するという小ネタを書きたいと思います。

なお、まだAzureアカウントを持っていない方は下記から新規作成すれば無料枠が利用できるのでオススメです。


Azure Functionsとは


小規模な関数をマネージド環境で手軽に実行できるサービスです。
いわゆるサーバレスといわれるもので下記が類似のサービスとなります。(今回これらのサービスとの比較は割愛します)
  • AWS lambda
  • Google Cloud Functions



サムネイル自動生成までの手順


では実際にAzure Functionsでサムネイル自動生成する関数を作っていきたいと思います。
画像リサイズにはImageMagickを使いますが、従量課金プランの環境には入っていないため手動で入れていきます。

f0364156_12565005.png
今回はnpmのazure-imagemagickパッケージを利用したため、kuduへ移動。

f0364156_13021867.png
kudu consoleでディレクトリ移動して下記のpackage.jsonファイルをドロップ後、npm installします。
(いつまでたっても返ってこない場合は、ローカルでnpm installした後、node_modulesをZIP圧縮してドロップ)

package.json

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"azure-imagemagick": "^0.4.2"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}


これで下地はできたのであとはコードをガシガシ書いていきます。(対して書かない)
f0364156_13293351.png
新規に関数を作成します。
一旦シナリオはデータ処理、言語をJavaScriptとして作成します。

f0364156_13340221.png

作成した関数の構成ファイル(function.json)を下記の設定にします。
この構成は左メニューの「統合」でGUIベースで設定することも可能です。

function.json

{
"bindings": [
{
"name": "inputBlob",
"type": "blobTrigger",
"direction": "in",
"dataType": "binary",
"path": "samples-workitems/{name}.{extension}",
"connection": "AzureWebJobsDashboard"
},
{
"name": "outputBlob",
"type": "blob",
"direction": "out",
"dataType": "binary",
"path": "samples-resultitems/{name}.{extension}",
"connection": "AzureWebJobsDashboard"
}
],
"disabled": false
}


指定にマッチするファイル(samples-resultitems/{name}.{extension})がアップロードされたら、
この関数で処理をして、指定のパス(samples-resultitems/{name}.{extension})へ出力します。
f0364156_13353610.png
次にindex.jsに下記のコードのようなサムネイル画像生成部分の処理を書いていきます。

index.js

const axios = require('axios');
const im = require('azure-imagemagick');

module.exports = function (context) {
if (!context.bindings.inputBlob) {
context.done();
}
im.resize({
srcData: context.bindings.inputBlob,
width: 200
}, function(err, stdout, stderr){
if (err) context.log.error(err);
context.bindings.outputBlob = stdout;
context.done();
});
};
width 200pxの画像にリサイズし、構成ファイルの出力と紐付いた名前(name:outputBlob)にバインディングします。
この状態で保存し実行するとログが出力されてアイドル状態となります。

試しにMicrosoft Azure Storage Explorerから画像をアップロードしてみます。
f0364156_14475393.gif
関数が起動し、出力先のストレージにサムネイル画像が生成されました!101.png
(画像を圧縮しすぎたため何がなんだかよくわかりませんが・・・)


最後に


Azure Functionsを利用した画像サムネイル自動生成はいかがだったでしょうか。
実用的かというと微妙ですが、とても簡単に実現できてしまいました。
バッチ処理、APIといった用途でもFSフェーズにサクッとリリースしたいときにとても便利に使えそうなため今後活用していきたいと思います。

アドベントカレンダーまだまだ続きますので明日もぜひチェックしてみてください。




by ex-engineer | 2017-12-07 18:00