オクムラダイキの投稿 - Crieit

Lambda@Edgeで画像をリアルタイムにリサイズできる仕組みを作った

2018-12-26T14:22:38+09:00

今作成中のサービスで画像をリアルタイム変換できる仕組みを AWS の Lambda@Edge を用いて実現してみたので紹介します。

参考：https://aws.amazon.com/jp/blogs/news/resizing-images-with-amazon-cloudfront-lambdaedge-aws-cdn-blog/

Lambda@Edge とは

Lambda@Edge とは、一言で言うと CloudFront (CDN) の HTTP リクエスト・レスポンスを操作できる Lambda 関数です。

下記のタイミングで CloudFront リクエスト・レスポンスを変更することができます。
* CloudFront がビューワーからリクエストを受信した後 (ビューワーリクエスト)
* CloudFront がリクエストをオリジンサーバーに転送する前 (オリジンリクエスト)
* CloudFront がオリジンからレスポンスを受信した後 (オリジンレスポンス)
* CloudFront がビューワーにレスポンスを転送する前 (ビューワーレスポンス)

作った仕組み

CloudFront のオリジンサーバーに S3 を指定し、S3 からの画像レスポンスを Lambda@Edge で変換する仕組みを構築しました。

URLのパラメータを変えることでリサイズされた画像を取得できます。
例えば下記のように幅と高さを指定してリクエストするとそれぞれのサイズの画像が返却されるようにしています。

・https://cdn.example.com/images/user/1234/avatar/001.jpg?d=100x100　→ 100x100の画像
・https://cdn.example.com/images/user/1234/avatar/001.jpg?d=300x300　→ 300x300の画像
・https://cdn.example.com/images/user/1234/avatar/001.jpg?d=1000x1000　→ 許可しないサイズはエラー

コード

いろいろ説明をはしょってコードだけ貼っときます。。

ビューワーリクエスト

'use strict';

const querystring = require('querystring');

const allowedDimensions = [ {w: 100, h: 100}, {w: 300, h: 300} ];

exports.handler = (event, context, callback) => {
  const request = event.Records[0].cf.request;
  const headers = request.headers;

  // URIが特定の画像パスに一致するかチェック（特定の画像以外はクエリストリングを削除してリクエスト）
  const match = request.uri.match(/\/images\/user\/\d+\/avatar\/\d+\.jpg/);
  if (match == null) {
    request.querystring = '';
    callback(null, request);
    return;
  }

  // クエリストリングを key-value のペアにパース
  const params = querystring.parse(request.querystring);

  // dimensionパラメータがない場合、クエリストリングを削除してリクエスト
  if (!params.d) {
    request.querystring = '';
    callback(null, request);
    return;
  }

  // dimensionパラメータを'x'で分割
  const dimensionMatch = params.d.split('x');
  const width = dimensionMatch[0];
  const height = dimensionMatch[1];

  // dimensionパラメータが、許可リストに一致するかチェック
  let matchFound = false;
  for (let dimension of allowedDimensions) {
    if (width == dimension.w && height == dimension.h) {
      matchFound = true;
      break;
    }
  }
  // 許可リストにない場合、クエリストリングを削除してリクエスト
  if (!matchFound) {
    request.querystring = '';
    callback(null, request);
    return;
  }

  // クエリストリングにd={width}x{height}を設定してリクエスト
  request.querystring = querystring.stringify({ d: width + 'x' + height });
  callback(null, request);
};

オリジンレスポンス

'use strict';

const querystring = require('querystring');
const AWS = require('aws-sdk');
const S3 = new AWS.S3();
const Sharp = require('sharp');

const BUCKET = 'XXXXXXXX';

exports.handler = (event, context, callback) => {
  let response = event.Records[0].cf.response;

  if (response.status == 200) {
    const request = event.Records[0].cf.request;

    // クエリストリングを key-value のペアにパース
    const params = querystring.parse(request.querystring);

    // dimensionパラメータがない場合、そのままレスポンスを返す
    if (!params.d) {
      callback(null, response);
      return;
    }

    // S3キー用にuriの最初のスラッシュを除いた文字列を取得
    const key = request.uri.substring(1);

    // dimensionパラメータを'x'で分割
    const dimensionMatch = params.d.split("x");
    const width = parseInt(dimensionMatch[0], 10);
    const height = parseInt(dimensionMatch[1], 10);

    // S3から画像を読み込み
    S3.getObject({ Bucket: BUCKET, Key: key }).promise()
      // リサイズ
      .then(data => Sharp(data.Body)
        .resize(width, height)
        .toBuffer()
      )
      .then(buffer => {
        // レスポンスを生成
        response.status = 200;
        response.body = buffer.toString('base64');
        response.bodyEncoding = 'base64';
        response.headers['content-type'] = [{ key: 'Content-Type', value: 'image/jpeg' }];
        callback(null, response);
      })
      .catch( err => {
        callback(null, response);
      });
  } else {
    // 200以外のステータスコードの場合、そのままレスポンスを返す
    callback(null, response);
  }
};

なぜ作ったか

普通なら「非同期ジョブでリサイズ処理してS3に複数サイズ保存」とかで事足りるのではと思います。

今回は、
* アップロード時間を短くしたい（アップロード時はバリデートのみで変換処理しない）
* 画像をアップロードした直後の画面でリサイズされた画像を表示したい
* リサイズ画像をキャッシュしたい
* 画像サイズあとで変えたいかも

といった理由で、CDNを通してリアルタイム変換という選択肢を選びました。

感想

AWS Lambda 自体初めて触りましたが、サーバレスは便利だな〜と感じました。
ただ、Lambdaの開発やテストやデプロイをどうやるのが正解なのかよくわからず、追加開発があるような比較的規模の大きいプロジェクトだとLambdaは大変そう(？)と思いました。

今回は画像リサイズだけでしたが、透かしを入れたり合成したり、画像以外にも動的にキャッシュできるので、いろいろ使い所ありそうです。

早くサービスリリースできるよう頑張ります。。

アプリの使い方をわかりやすくしようと頑張った話

2018-12-07T05:00:34+09:00

②③はすんなりいったので大丈夫そう。

わかったこと

『Safariのメニュー』って言われても下のアイコン（四角形から上向き矢印がつき出てるやつ）で正しいのか分からない。（開いても右にスクロールしないと「ホーム画面に追加」は表示されないし）
『「ホーム画面に追加」してね』って言われてもどうやって？（そもそもホームに追加できるんだ！）って思うようだ。

修正した ver.1

左：初期表示
右：吹き出し閉じたあと

主に直したところ

説明読んで欲しいのでモーダルにした。
Safariのメニューの場所を吹き出しの形で指し示した。
押して欲しいアイコンを画像付きで表示した。
『「ホーム画面に追加」して』という表現を『（アイコン画像）を押して「ホーム画面に追加」して』と具体的にやって欲しい操作を書くようにした。
①の説明が難しいので②の説明を取った。
モーダル閉じたあとに②がわかるよう「←メニュー」って書いた

使ってもらった結果

嫁「2回目だからわかるわ」
僕「初めての気持ちで」

嫁（使ってみてから）「たぶん大丈夫」

おっしゃー公開しよ〜

公開した

が、

Twitterアプリのこと考えてなかった

Twitterでシェアした後にツイートのリンクを開いたらこんな画面だった

吹き出しの位置がアイコンとずれてるし、Twitterアプリからじゃ 「ホーム画面に追加」が出ない！

もう公開してシェアしちゃったし、簡単な修正で済ませたい！

「録画した画面をシェアして楽しもう！」と促した
録画できるんだ、シェアしてみよう、と思った人が若干は増えたと思う（想像）
「画面を録画する方法」のリンクを貼った
画面を録画する機能を使ったことない人が大多数なので、これつけなかったらシェアしてくれる数結構減ったと思う（想像）
「#通知止まらんw」をつけてツイートしてね！
は要らなかったかも。画面録画したツイートでつけてくれてる人少なかった。
（自分で入力するの面倒だし。画面録画をシェアするときはみんなに本当の通知画面だと思わせたいから、いきなりタグつけてタネあかししたくないかも。）
「このサイトをシェア」リンク
これはつけてよかった。そのままシェアしてくれた人がそこそこいた。

もっと直したかったところ

ホーム画面に追加したアプリを開くと再度吹き出しモーダルが表示されてしまうので、本当は消したかった。

UserAgentと画面サイズから判定して全画面かどうかを判定するのがいいのだろうか？大変そうなので今回は諦めました。

おわりに

以上、UI/UXやってるデザイナーさんから見たら下手な修正かもしれませんが、自分なりに改善した点をまとめてみました。

自分では「みんなわかるっしょ」と思っていても他の人からするとそうではないことがあるってことが改めてよくわかってよかったです（小並感）

オクムラダイキの投稿 - Crieit

Lambda@Edgeで画像をリアルタイムにリサイズできる仕組みを作った

Lambda@Edge とは

作った仕組み

コード

ビューワーリクエスト

オリジンレスポンス

なぜ作ったか

感想

アプリの使い方をわかりやすくしようと頑張った話

はじめに

こう操作して欲しい

修正前

使ってもらった結果

わかったこと

修正した ver.1

主に直したところ

使ってもらった結果

公開した

Twitterアプリのこと考えてなかった

修正した ver.2

その他

シェアして欲しかったからこんな修正もした

もっと直したかったところ

おわりに