画像生成たのしい 。Twitter Cardを作りました。
「Twitterで共有」みたいなのでクリックしてもらうとうれしいですよね。
今まではTwitterでシェアされた時のTwitter Cardは、汎用的なスクエア画像で対応していました。
がしかし、今作っているサイト(LINEスタンプの紹介サイト)はTwitter Cardの最適化をした方が良いと考えました。なぜなら……
クリエイターさんがツイッターに多く、彼らに喜んでもらいたい
個人的に、画像生成好き
……ということで、対応しました。
SNS媒体毎にシェア画像を分けて無いサイトさんもあったりするので、誰かの役には立つかもしれません。
あ！
長いので、暇な時に読んでください！業務中に読んで良いのは、ウェブ系のお仕事している人だけです。多分(笑
Before / After
DECORさんの「気づかいのできるネコ♪ポジティブ編」
つじなつみさんの「ころころ柴犬2」
※Beforeの方がCTR高い等の可能性はあるかもしれませんが、今回は主に「クリエイターの人が嬉しくなる」を主眼にしているので、ユーザ目線での妥当性検討・検証はしていないです。
絵作り
エイ・ヤー・トウ！で作ります。趣味のサイトなので自分でデザインです。
デザイナーさんに発注したほうが出来が良いのですが……。趣味ですし！たまにはAdobe製品を使いたいのです！
ちなみにデザインする時にはリクオさんの「敬語なふんわりにゃんこ。２」を使わせていただいていました。可愛くてテンション上がりました。
絵を分解
動的に差し込む部分は消して、共通部分だけ画像として書き出します。
動的に差し込む画像の位置・加工内容をメモしておきます。私はエクセルを使います。
SIerっぽくて嫌いな向きも多いかもしれませんが、構造を持った情報をメモするのにエクセルは便利ですよね。
簡単な関数でプログラムやjsonとして吐き出す事もできますし。
ImageMagickで合成
動的に差し込む画像の加工を、ImageMagickのコマンドに置き換えます。
私はまず、システム連携しないshellを作成します。いきなりウェブアプリに組み込むのはちょっと大変です。
デザインしている時のように試行錯誤するので、コードは汚くなりがちです。ダサくてこの時のコードはあまり見てほしくないです。
が、興味を持った人にはコレが一番分かりやすいはずなので、一応載っけておきます。
(Gistで見る)
素材の縦横比がバラバラなので一旦中間素材を作ったり、Affine変換で傾けたり、影をつけたり、色々やっていますね。
ウェブアプリに組み込む
書いたスクリプトで意図通りの絵が出来たら、お使いの言語やフレームワークのお作法に則って、ウェブアプリに組み込みます。
2度手間になるのですが、これは必要な作業です。この2度手間のお陰で結果早く済んでいると思っています。
出来た
これで、自動で画像が生成出来るようになりました。
あっという間に何百、何千の画像が出来上がります。こんな感じです。
ひらりーーさんの「まったりカフェ風スタンプ」
Miho Kurosuさんの「敬語くまさん」
やったー！
プログラミングはどれだけやっていても、完成した瞬間には新しい感動を与えてくれます。とてもいい趣味です。
ImageMagickをオススメ
ImageMagickは、php, Ruby, Perl, Java ... 何からでも呼び出せて、サーバサイドで画像をモリモリ作れるものです。
ImageMagick + (使ってる言語) で検索すると、色々チュートリアルがあるはずです。
デザイナーさんでもImageMagickは好きになると思います。特にCSSのデバッグで苦しんで乗り越えた経験がある方なら、習得は速いと思います。
http://imagemagick.org/script/index.php
安いレンタルサーバでも使える所が多いので、見てみると良いかもしれませんね。(さくら、ロリポ、Xserver他色々)
画像生成というとOpenCVも素敵ですが、環境構築も実装も若干大変なので、それはImageMagickで出来ないことにぶつかったら……という感じでしょうか。
Twitter Cardの設定
さて、画像生成も出来ましたので、Twitter Cardとして使います。
設定方法は日本語でもウェブに色々あります。
サーバリソース節約
画像生成は一般的なWebサーバからすると大仕事です。
CPUバカ食いしてしまい、サイト全体の応答速度が下がっては困ってしまいます。
対応策です。
1. 画像を作らず、画像のURLだけ先に発行しておく
2. 画像が必要な時に、画像がなければエラーでウェブアプリケーションにリダイレクト
3. ウェブアプリケーションが画像を生成してURLの箇所に設置して再度リダイレクト
4. 次回画像が必要な際には画像のURLでアクセス可能
この感じでやると、画像がない時だけ画像が生成されて、画像があるときはウェブアプリケーションにアクセスすら発生しません。いい感じですね。
画像を置いてるサーバがApache, Nginxなら、エラーのカスタマイズでOKです。
私は画像をAWSのS3に置いていたので、Static website hosting の Redirection rulesを検討しました。
色々あってやめたので、日の目を見なかった設定を貼ります。
Static website hosting > Redirection rules (optional)
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>
404
</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>example.com</HostName>
<HttpRedirectCode>302</HttpRedirectCode>
</Redirect>
</RoutingRule>
</RoutingRules>
Rails
if item.create_twitter_card_image
redirect_to item.twitter_card_image_url and return
else
# Error処理
end
S3はちゃんと使うと色々出来て良いですね！
画像生成大事かも！？
最近はCSSやWeb Fontsが進化したお陰で、ページコンテンツとしての画像をサーバサイドで生成する必要性は、かなり減りました。
ですが、サイトの画像ファイルが単体で流通するケースはむしろ最近の方が増えています。記事ページがSNSでシェアされたり、ニュースアプリに配信されたり、LINE@で送ったり。
下手すると、記事ページ以上に画像の方が見られているというサービスもあるのではないでしょうか。
クリックされるか否かは画像にかかっています。
今まで手を付けていなかったのなら、気合を入れる価値があるかもしれませんよ！
余談ですが、他にも画像を生成する方法はいくつかあるので、さらっと紹介だけします。
他の方法 1: canvas
「HTMLをcanvas要素にして画像化する」という方法です。
人の手で作るコンテンツの場合に、編集者さんがコンテンツ入稿ツールからcanvas操作してサムネ作成する……という感じで採用しています。
編集者さんが画像アプリを開かずに、ダッシュボード上でサムネを作れるのはとても良いです。
以下のJavaScriptなしには実現できませんでした。多謝。
https://html2canvas.hertzen.com/ https://github.com/polidog/html2image
他の方法 2: 3DCG
動画の設定を作成しておき、モデルやテクスチャだけ差し替えてアニメーションGIF等を生成する……という方法もあります。もちろん静止画もいけます。
グリグリ動くのは楽しいです。
ただ、悲しいことに私は3DCGセンスが死んでいます。3DCGのカンフーマスターがいらっしゃったら、是非トライしてみてください！
自分的にお気に入りなプログラムが出来た嬉しさだけで書いてしまいました。
とりとめもなく、自分でも100発位斧を投げられそうな稚拙な内容ですが、それを言うと何も書けなくなってしまうので、一旦これにて。
この記事が気に入ったらサポートをしてみませんか？