CreateJS(EaselJS)によるコラ画像ジェネレータをあっという間に作成する方法

generator

Twitterでコラ画像が流行すると、大体数日で○○の画像ジェネレータみたいなものがリリースされます。

この画像ジェネレータ系のサービスはGDImageMagickを使っているのかと思っていましたが、最近はcanvasでつくられているようです。
私もこういうものを作ってみたいと思っていたので、ちょっと調べて簡単な画像ジェネレータを作ってみました。

canvasを扱う場合はCreateJSを使うのが便利なようです。
今回はアニメーションの処理はないため、CreateJSの中のEaselJSのみを使用しました。

AD

試しに作ってみたもの

generator

○○100人に聞きましたジェネレータ

初出は以下の方のツイートではないかと思います。
大流行したわけではないですが、個人的には面白かったと同時にソウルジェムが濁っていくのを感じました…(;´Д`)

作り方

HTML

EaselJSとjQuery(必須ではないがあったほうが楽)をロードし、入力用のテキストエリアと出力用のcanvas要素を用意します。
フォームとして機能させる必要はないのでformタグは入りません。
canvasタグは生成される画像のwidth/heightが必要です。

Javascript

おおまかな手順としては

1.ステージをつくる
2.そのステージに画像と文字を入れる
3.再描画する

という流れになります。

FlashのActionScriptを書いていた人には分かりやすいそうですが、私はほとんど使ったことがないのであまりピンと来ませんでした…。
jQueryのappend()を繰り返している、と言うほうが個人的には分かりやすいです。

なお、今回つくったものはcanvasによる処理のみでなく、画像としてダウンロードさせる処理を入れています。
Javascript側で行っていることは、toDataURLでbase64に変換したデータをPHPにPOSTするだけです。
そのPOSTを受けてデコードし、headerをapplication/octet-streamに変更してダウンロードさせています。

PHP

本題のcanvasの処理とは関係ないですが、base64のデータをデコードしています。
表示させるだけでいいのでしたら、得られたbase64のデータをimgのsrc属性に入れてやればdataURIを扱えるブラウザであれば表示されます。

この部分File APIというのを使えばブラウザだけで完結するのかなぁ…。

まとめ

GDを使ってこういう感じの画像合成処理を書いたことがありますが、処理が重いためにリアルタイムに結果を反映させるようなことができませんでした。
canvasでの画像処理は非常に高速で軽く、またサーバへの負荷を考えなくていいので大勢が使うようなサービスでも安定して使えそうです。

特定の画像の決められた位置に文字を合成するだけの処理なら、上記のように短いコードで簡単にできました。
次回何かのコラ画像がブームになる時は、爆速でコラ画像ジェネレータをリリースしたいと思いますww

追記(2014.04.15)

当記事の内容に一部手を加え、【実写版】ハンドサインジェネレータを作成しました。ブームはもう終わりかけてますが、よろしければご利用ください_(._.)_

AD

Share

Commentsコメント

メールアドレスは公開されません。コメントは必ずご入力ください。

HTMLタグは使用できません。ソースコードを書き込みたい場合はCodetterGistCodePenなどのご利用が便利です。

maro さんより
はじめまして、ジェネレータ系のスクリプトを探していて辿り着いたのですが、
【実写版】ハンドサインジェネレータのようにツイートをする方法を教えていただけないでしょうか…?
どうぞよろしくお願いします。
管理人 さんより
maro 様
コメントありがとうございます。

画像ジェネレータ本体はJavascriptによるものですが、Twitter認証と投稿はPHPの処理を使っています。JSだけでなくPHPの知識が必要な点にご注意ください。

ツイートする処理についてですが、以下のコードが分かりやすいかと思います。
(TwitterAPI 1時代のコードなので、1.1へ対応させるために書き換えが必要な部分があるかもしれません)

https://github.com/yusuke/twtr-api-pocket-reference/blob/master/php/oauth_authorize.php

上記のPHPをAPIキーなどを書き換えてサーバに置くと(tmhOAuth.phpのダウンロードは必要です)、Twitter認証を行った後、テキストをツイートするフォームが表示されます。
画像をツイートしたい場合はテキストだけでなく画像をツイートできるように改造すればよいです。

具体的には

$twitter->request("POST", $twitter->url("1/statuses/update"), array("status" => $_POST["tweet"]));

となっている部分を

$twitter->request(
"POST",
$twitter->url("1.1/statuses/update_with_media"),
array(
"status" => $_POST["tweet"]
"media[]" => base64_decode(str_replace('data:image/png;base64,','',$_POST['img'])) . ";type=image/png;filename=handsing.png"
)
);

と変更することで画像添付ツイートが実装できます。

※ $_POST['img'] はbase64_encodeされた画像データです。バイナリに戻して送信します。


Twitter認証を要求するサービスはスパム扱いされたり結構嫌われがちな風潮ですので、実装が難しいようでしたら見送ってもいいかもしれませんね。
maro さんより
こんにちは、早速のお返事有り難うございます。
スクリプトなどの情報有り難うございます。一旦頂いたものでテストしてみたいと思います。
確かにジェネレーター系でTwitter認証だとスパム扱いはありそうですね…このようなジェネレータで作成した画像をTwitter認証をせずに投稿する方法などはご存知でしょうか…?

質問を重ねて申し訳ないですが、どうぞよろしくお願いします。
管理人 さんより
maro 様

認証なしでツイートするのでしたら、生成した画像を自分のサーバに保存し、画像URLをツイートするという方法が考えられます。

1.画像を生成する
2.自分のサーバに保存する
3.上記保存した画像のURLを取得
4.URLを本文としてツイートダイアログを開く
※ https://twitter.com/intent/tweet?text=本文 というURLを別窓で開くと、ツイートするフォームが表示されます。

という流れでしょうか。画像掲示板のようなイメージで、ダイレクトにツイートするよりも一般的な方法ではないかと思います。

ただ、生成される画像を自分の管理下に置くのは、脅迫や殺人予告などが投稿された際にちょっと面倒なことになるかもしれません。利用者も画像が保存されると聞くとあまりいい気分はしないでしょう。


自分のサーバに保存するのを避けるのであれば

1.Twitterの捨てアカウントをつくる
2.画像生成時に捨てアカウントにハンドサインジェネレータのような画像付きツイートを行う
3.画像がTwitter上に保存されるので、そのURLを取得
4.URLを本文としてツイートダイアログを開く

という方法も考えられます。この方法は自分の知らないアカウントにツイートされるということになりますので、それはそれでちょっと気持ち悪いですね。

※以下WordPress上での事例ということですが、やりたいことは同じですので参考にしてみてください。
http://keisuke.tsukayoshi.com/blog/1642


どの方法を取っても一長一短なので、それならば(スパムが流行しなければ)正攻法である「認証させる→ツイートする」という方法が一番いいのではないかと思います。
maro さんより
お返事有り難うございます。大変参考になりました!
頂いた情報を元にして、色々とトライしてみようと思います。
本当にありがとうございます!