「悪循環画像ジェネレータ」を作ってみた

悪循環画像とは

昨日くらいから、Twitter上で「悪循環コラ画像」というものが流行っているようです。元々はみやぎ県政だより(2010年12月号)http://www.pref.miyagi.jp/kohou/kenseidayori/backnumber/201012/special/special01.htmの薬物乱用防止の啓蒙記事にある、薬物依存の悪循環を示すイメージ図がオリジナルなのですが、妙に汎用性(?)があるのか、様々なジャンルでの悪循環コラが作られる状態になっています。

そこで悪循環コラ作成の一助になればと思い、「悪循環画像ジェネレータ」を作成してみました。ブラウザ上で文言を入力することで悪循環コラが作れるというものです。

悪循環画像ジェネレータ

URLは以下になります(2017/02/12追記：Bitbucketだと404 Requestが返されてしまうのでGitHub Pagesに引っ越しました)。

• http://furandon-pig.github.io/fpig_sample/hobby/bad_spiral/
• http://furandon_pig.bitbucket.org/hobby/bad_spiral/

入力欄に文言を入力すると、オリジナル画像をテンプレ化(吹き出しの文字を消したもの)した画像に文言が反映されるという動作になっています。
(それしか機能がない……)

単に入力された文言をHTML5 CanvasのfillText()で描画するだけのはずだったのですが、<br>で改行できるようにしたところ、予想よりもちょっと複雑な処理になってしまいました。
というわけで、文言の中に<br>を入れると、改行文字として扱われ、かつ、配置も(ある程度)よきにはからってくれる動作になっています。

悪循環コラを作ってみる

簡単なサンプルとして、のんのんびよりの悪循環コラを作ってみました。
以下のような感じになります。

このツールでさらに悪循環コラが増えてくれればと思います。

その他

このアプリケーションはTwitter Bootstrapを利用したのですが、あまり活用できていません。また、バージョンが上がったのか、デザインやレイアウトルールが以前(1年くらい前)と変わっているようでした。