シェア画像を動的合成で作る話

「絶対に帰れないオフィス」では、プレイ結果をXでシェアできる機能があり、その際に結果に応じた画像が自動で生成されます。この記事では、この画像を動的に合成する仕組みの裏側を書いておきます。

なぜ固定の画像ではダメだったのか

シェア機能を作る上で、あらかじめ用意した固定の画像を使うだけなら実装は簡単です。ですが、それだとプレイヤーごとの結果の違いがシェア画像に反映されず、「自分の結果をシェアする」という意味合いが薄れてしまいます。プレイ内容に応じて画像の中身が変わることで、シェアする側にとっても、見る側にとっても、意味のあるものになると考えました。

サーバー側で画像を組み立てる

このシェア画像は、あらかじめ用意した背景画像やアイコンの上に、プレイヤーごとの結果（死因のジャンルなど）に応じたパーツやテキストを重ねて、サーバー側でその場で1枚の画像として合成しています。ブラウザ側で表示を加工するのではなく、サーバー側で画像そのものを生成しているのは、X（旧Twitter）などでシェアされた際に、リンクカードとして正しく画像が表示されるようにするためです。

日本語テキストを画像に焼き込む

結果に応じたコメントなどの日本語テキストも、この画像の中に直接描き込んでいます。日本語フォントを画像処理の中で正しく扱う必要があり、このあたりの工夫は、以前書いた「ハマった小さなバグの話（画像処理・フォント編）」とも関連しています。

まとめ

シェア画像は地味な機能に見えて、実際には「その人だけの結果を、その場で1枚の画像にする」という、意外と作り込みが必要な部分でした。プレイした結果がそのまま形に残る、という体験を大事にしています。