平成コラgif作成ツールを作った
平成コラ作成ツール作りました😇
— 升 (@walkingmask) 2018年10月8日
平成最後の夏にクソコラ量産しましょう👍https://t.co/fgerWA3H2x pic.twitter.com/DTGgiPwySP
ツイートした後に気づいたけど夏終わってorz
なりゆき
"Trump draws" という面白画像のジャンルを友人に教えてもらい、平成バージョンを作りたいと話していたのが4月ぐらいのこと。
そこから少し時間を見つけて、画像等を準備して一旦放置して。
この三連休、主に土曜の午前中でほとんど実装しました。
時間配分はだいたいこんな感じ。
考案: 10分 画像等の下準備: 1時間 メイン機能の開発: 6時間 見た目: 5時間 デバッグ: 3時間
デザインセンスがないのと、css がよくわからないので、見た目作るのに苦労しました。
けど、作りたかったものを作れるのはこの上ない快感だった。
技術的なこと
友人に聞かれたので書きます。
オーバービュー
だいたいこんな処理をしています。
1. 画像の用意
まずは、大事な画像の用意です。プログラムの処理ではないですが。
この辺の工程は慣れ親しんでいる Python で処理しています。
適当にターゲット動画を持ってきたら、それを画像に分解します（必要に応じてフレームレートや画像サイズを下げます）。
それを、コラ化したい部分だけくり抜きます。これは Mac の Preview でやりました（Photoshop 等使えばもっとクオリティが上がるとは思ってます）。
次に、変形するための座標を取得します。Python と OpenCV で適当にやりました（この辺をもっとしっかりやっていればクオリ...）。
コラの背景色とかも適当に取得しました。
以上で下準備は完了です。
2. canvas の用意
自分で好きな絵を書いてコラを作れる、というコンセプトだったので、いい感じに絵をかけるライブラリを使用させてもらいました。
結構長らくメンテされていなく、癖も強かったのですが必要十分だと思い即決。
これでいい感じに絵を描けるようにしました（表示の都合上、機能をいくつか削ってます）。
3. canvas の変形
あとは、先ほど書いた絵を、用意した画像全ての切り抜きと合わせるように変形すれば大枠は完成です。
イメージ図はこんな感じ。
ここも先人の偉大な遺産を使わさせてもらいます。
こちらも長期ノーメンテですが、やりたいことにドンピシャだったので無問題です。感謝。
4. 画像と canvas の重ね合わせ
ここは、どううまく処理したらいいかわからなくて、結構回りくどいことやっています。
って感じで。もう少しうまくできた気はします。
5. gif 化
ここは苦労する気がしてたのですが、世の中は広く、私は愚かで、先人は天才なのでした。
これも長期ノーメンテですが、やりたいこと以上に、canvas から直接 gif 生成できるという素晴らしいものなので、使わせてもらいました。
重ね合わせた画像をこれにどんどん追加していけば勝手に gif が出来上がります。
まとめとか感想とか
とまあ、既存ライブラリの組み合わせなので、本人全然仕事していないのですが、こうやって素晴らしいツールを組み合わせるだけで作りたいと思ったものを短時間で作れるというのが、個人的には最高だと思っています。
課題として、画像の読み込みが遅いせいで変換に時間がかかっていたり、高速化を見込めそうなポイントはたくさんありそうです。
あとは、モバイルで画像を保存しようと（さらにシャアまでしようと）すると、とても手間なので、その辺改善したいとこですね。
ついでに広告とかで小遣い稼げるとベスト！
GitHub Pages を使わず自分のサーバで配信して、生成画像を保存してリンク生成までできるとよかったのですが、css と格闘して力果ててしまいました。。
やはりその辺チームでできたらなと思った。個人的には、１日でこの工程が終わるのが理想で、こういうの量産したいと思っているので。
って感じで今後もガンガン作りたいの作っていくぞ！
みんなも作ろう！
