アルパカログ

カスタマーサポート (CS) とエンジニアリングを掛け算したい CRE (Customer Reliability Engineer) が気になる技術や思ったことなど。

Google Cloud Functions (GCF) で Peing (質問箱) のように画像に文字を入れる

Peing (質問箱) や Sarahah のように画像に文字を入れるには ImageMagick を使います。

ImageMagick 自体はコマンドラインですが、いろいろな言語で使えるインターフェースが揃っています。

このエントリでは、無料でしかも HTTPS エンドポイントが付いてくる FaaS (Function as a Service) として注目を集めている Google Cloud Functions (GCF) を使って、POST パラメータで受け取ったテキストを画像に描画するサンプルを作ります。

システム

f:id:otoyo0122:20180312202024p:plain

システムはいたってシンプルで、Cloud Functions のエンドポイントに対してテキストパラメータを POST し、Cloud Storage に予め置いておいたテンプレート画像に ImageMagick でテキストを描画して、画像ファイルを新しいファイル名 (ハッシュ値) で Cloud Storage に保存します。

新しいファイル名は HTTP レスポンスに載せて知らせます。

前準備

  1. GCF の HTTP Tutorial を済ませましょう
  2. Cloud Storage にバケットを作成しテンプレート画像template.png という名前で配置します
  3. 任意のディレクトリに otoyo/imagemagick-gcf を clone しましょう
  4. index.js 内のバケット名の指定を作成したバケット名に修正します

デプロイ

デプロイしましょう。数分で完了します。

$ gcloud beta functions deploy imagemagick --trigger-http --source .

POST してみる

エンドポイントに POST してみましょう。 YOUR_ENDPOINT は自身のHTTP トリガーの URL に読み替えてください。

$ curl -X POST -H "Content-Type:application/json" -d '{"text":"こんな風に描けるよ。"}' YOUR_ENDPOINT/imagemagick

Success: xxxxxxxx.png というファイル名が返ってきたら、Cloud Storage にファイルができているので見てみましょう。

POST した文字が描画されていれば成功です。

f:id:otoyo0122:20180312203544p:plain

まとめ

このエントリでは質問箱のようにテキストを画像に描画する実際のシステムについて紹介しました。

質問箱を本格的に作るには質問文のテキストをデータベース等に保存しておく必要がありますが、Google Cloud Functions からは Datastore というストレージが無料で利用可能です。

Google Cloud Functions から Datastore を使う方法は以前ご紹介したので、ぜひそちらをご覧ください。

また、今回はテキストが複数行にわたる場合の折り返しについては触れていません。折り返しの実現についてはぜひご自身で考えてみてください。

それでは楽しいプログラミングライフを!

こちらもあわせてどうぞ

alpacat.hatenablog.com

alpacat.hatenablog.com

参考リンク