Azure Functions Appで好きなフォントを使おう!


こんにちは!fujiです。

突然ですが、AzureのFunctions Appっていいですよね!
なんというか、書いたプログラムがそのまま動くというか、直感的に動いてくれるというか、前職で全く肌に合わなかったサーバ側のうんたらかんたら、フレームワークがどうとかこうとかをいちいち考えなくても、ちゃちゃっとプログラム書いとけば思った通りに動いてくれる。
そういった部分にとてもシビれるあこがれるゥ!という気分になります。

さて、前回の記事でイタリアに行った時に撮った写真をPepperに見せて自慢して見たんですが、この写真に何か文字を入れてAzure BLOB Storageに保存したいなー。本当はPhotoshopとか使って加工するのが一番いいんだけど、それじゃあ目新しさも何もないからプログラムで何かやるかなー。そうだ、Functions App使って、アクセスしたら加工した画像表示してみよう!と思い、ちょっとやってみました。

雨のバチカン:こんなの作りたい

 

下のキャプチャの通り、Azure Functions Appは、pythonにも対応できるようなったので、Pythonの画像処理ライブラリを使って画像に文字を入れてみます。(ただし、プレビュー版です)

サポート言語のキャプチャ

 

ここを参考に、コンソールでFunctions Appプロジェクトを生成し、__init__.pyにプログラムを書きます。

プログラムを書いたら、まずはローカル環境で試したあと、Functions Appにデプロイします。

で、ここでいきなり結論その1になるんですが、Azure Functions Appを使って画像に文字を入れる事は普通にやったらできません!

いや、できませんではないですね。アルファベットなら可能なんですが、日本語等の2バイト文字といいますか、独自のフォントを入れて画像に文字を入れるですとか、もう少し幅広く言うと独自フォントを使って何かしたい場合、普通にやったらできません。

ここ(custom fonts are not renderedの下り)に記載してある通りなんですが、セキュリティ的な観点からフォントの導入はできないんですね。

あ、で、「アルファベットなら可能」の意味なんですが、画像処理ライブラリをPillowではなく、OpenCVを使用すると、OpenCVの中にフォントが入っているので、それなら使用できるという意味です。OpenCVを使用して、英語等で画像に文字を入れる、これならできます。できますが、なんというか、論文や資料等で使うグラフのキャプションに出てくる文字のフォントみたいに、「とりあえず文字が出ればいい」的なフォントなので、「文字だったらなんでもいい。それでも構わない」って人ならそれでいいかもしれませんが、そうではない人にはオススメできません。

じゃあその普通じゃない方法ってどうすんのよ?って話ですので、以下にその説明を記載します。環境はこんな感じです。

  • Mac OS Sierra Version 10.12.6
    → Choregrapheとの相性を理由にここまでしかあげてません(笑)
  • Python 3.6
  • Dockerインストール済み
  • Azure CLIインストール済み

まずは、上で貼ったリンクの通りに、Pythonの仮想環境を作成、アクティブにし、プロジェクトを作成します。プロジェクトを作成したら、プロジェクトの中に「font」みたいな名前のフォルダを作り、その中に使用したいフォント(ttfファイル等)を格納します。

続いて、__init__.pyにプログラムを記述します。
今回は日本語フォントを使用するので、OpenCVではなくPillowを使用します。コード的にはこんな感じでしょうか。

コードができたら、一旦ローカル環境で動作確認をしましょう。

コンソールで

とやると、ローカル(localhost)で動作するようになります。

さて、ここからが本題です。

ここまでやって、これをデプロイすると、上で書いているようにセキュリティの問題で、フォントの読み込みができず、Functions Appにアクセスしてもエラーが発生します。

じゃあどうすりゃいいのよ!?って話です。ここで、Dockerがでてきます。

簡単に言うと、Dockerでイメージを作って、それをデプロイしてあげればFunctions Appで好きなフォントが使えるようになります。

手順を説明します。

まずは、Dockerをインストールします。Dockerをインストールするには、ユーザ登録が必要になりますので、登録しましょう。

続いて、今回のプロジェクトフォルダにDockerfileを追加します。
これは、Dockerイメージをデプロイ後、デプロイ先でインストールされた際にインストール先で実行される処理を記載したものです。内容はこんな感じになります。

ざっくり説明しますと、一旦全てのファイルをAzure Functions Appの格納場所にコピーし、fontconfigをインストール。その後、フォントフォルダにある全てのファイルをインストール先のフォントを管理する場所にコピーして使えるようにする。最後に、Pythonで使用しているライブラリをインストールする(requirements.txtに何をインストールするか記載している)という流れです。これを、「Dockerfile」というファイル名でプロジェクトフォルダ内に格納します。

続いて、こちらを参考にしてDockerイメージを作成し、Docker Hubにプッシュします。

まずはコンソール上からDockerにログインし、Dockerイメージにしたいプロジェクトをビルドします。

ビルドできたら、一旦動作確認してみましょう

動いていることが確認できたら、Docker Hubにプッシュします。

Docker Hubにプッシュできたら、今度はAzureにデプロイします。
まずはリソースグループ等の作成から・・・

最後に、Docker Hubと連携したFunctions Appを作成します。

あとは、Azureのポータルから上記コマンドで作成したリソースにアクセスし、表示されているURLを叩いて実行できるか確認します。ちなみに、Dockerイメージの展開をしているからか、Functions App作成からアクセス可能になるまで少しだけ時間がかかります。

うまく実行できたら、こんな感じの画像ができるはずです。

後日、ボルゲーゼで「Young Sick Bacchus」も見た(あそこは撮影禁止)

というわけで、今回はAzure Functions Appでカスタムフォントを使用する方法を紹介しました。
なお、「そんなん、最初からそういう機能持ったサーバー作ればいいじゃん」という意見には一切耳を傾けないことにします(笑)

ほら、なんていうか、あれですよ。

今回言いたかったのは「Azure Functions Appでこうすればカスタムフォントを入れられる」ってのじゃなくて、「サーバレスプラットフォームって最高じゃね!?」ですので!そこのところ、お間違いなく!!

以上、fujiでした。皆様もAzure Functions Appで素晴らしいサーバレスプラットフォーム体験を!!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です