2014
04/11

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

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

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

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

ADs

試しに作ってみたもの

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)

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

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

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

  • maro
  • 2014年11月12日 5:09 PM

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認証を要求するサービスはスパム扱いされたり結構嫌われがちな風潮ですので、実装が難しいようでしたら見送ってもいいかもしれませんね。

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

質問を重ねて申し訳ないですが、どうぞよろしくお願いします。

  • maro
  • 2014年11月13日 12:01 PM

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
  • 2014年11月14日 11:38 AM

はじめまして。
画像ジェネレーターを作成したく、探しておりましたら辿り着きました。

「これだ!」と思い、さっそくソースコードを参考にさせて頂きましたが、現在は使用できないのでしょうか?
当方、お名前.comのレンタルサーバーを使用しており、index.htmlとimg.phpファイルを作成し、それぞれにソースコードをコピーさせて頂きましたが、「画像生成」が反応していただけません…。
また、「画像として保存」は動作してくれるものの保存されたデータ大きすぎるまたは破損しており開けませんでした。

ご迷惑でなければ、ご指摘等頂けましたら幸いです。
よろしくお願い致します。

  • koko
  • 2017年10月13日 2:01 PM

koko様

コメントありがとうございます。
画像生成まではJavascriptでの動作ですので、サーバによって動く・動かないということはありません。
コピペミスでエラーが出ているとか、設置したサイトがhttpsとか(上述のサンプルコードではEaselJSとjQueryをhttpで呼んでいるので)とか…。

私の環境では動いている「100人に聞きましたジェネレータ」の必要データ一式を以下に用意しました。こちらを解凍してそのまま設置したらどうでしょうか?
https://wood-roots.com/sample/generator/gen.zip

  • 管理人
  • 2017年10月13日 2:24 PM

管理人様

早速ご返信頂きました事、感謝申し上げます。
普段、phpを触る機会が少なくどうやら保存の際の文字コード?も間違っていたようです…(お恥ずかしい限りです)

頂戴したzipファイルをそのままアップロードさせて頂いたところ快適に動作してくれました。
このような初心者にもご丁寧に対応頂き、重ね重ねお礼申し上げます。

管理人様の記事を読んで勉強に励もうと思います!
ありがとうございました!今後ともよろしくお願い致します。

  • koko
  • 2017年10月13日 2:58 PM

今このコードを元にジェネレーターを作ろうとしているのですが、文字色に変更と背景色の変更はどのように行うのでしょうか?
cssと同じだと思って以下のように書いてしまいましたが全く動きません。調べても分からないので教えてください。お願いします
        ‘txt02’ : {
                ‘x’ : 700,
                ‘y’: 140,
                ‘size’: ’60px’,
                ‘align’: ‘center’
     ‘color’: ‘#fff’,
     ‘background-color’: ‘black’,
            },

  • ゆう
  • 2019年8月1日 6:36 PM