ラ・餃・チャセットジェネレータを作りました

君だけのラ・餃・チャ・ラ・チャ・餃・餃・餃・チャ・ラ・ラ・ラ・ラ・チャ・ラ・チャ・チャ・ラ・チャ・餃・チャ・ラ・餃・餃・餃セットを作ろう！

上の画像はこれを使って生成したものです。

元ネタと経緯

元ネタの元ネタは中華料理チェーン店日高屋の「ラ・餃・チャセット」です。

元ネタはAiobahnさんの画像ツイートです。

pic.twitter.com/4oKvAfPrzl

— Aiobahn (@Aiobahn) 2018年10月25日

文字起こしすると「ラ・餃・チャ・ラ・チャ・餃・餃・餃・チャ・ラ・ラ・ラ・ラ・チャ・ラ・チャ・チャ・ラ・チャ・餃・チャ・ラ・餃・餃・餃セット」になるんですが、この「ラ・餃・チャ・ラ・チャ・餃・餃・餃・チャ・ラ・ラ・ラ・ラ・チャ・ラ・チャ・チャ・ラ・チャ・餃・チャ・ラ・餃・餃・餃セット」がサークル内の一部でめちゃくちゃ流行りまして、皆がひたすら「ラ・餃・チャ・ラ・チャ・餃・餃・餃・チャ・ラ・ラ・ラ・ラ・チャ・ラ・チャ・チャ・ラ・チャ・餃・チャ・ラ・餃・餃・餃セット」ってTwitterでつぶやくようになりました。

そんな経緯でいちいちキーボードで変換してドット打つの面倒くさいからそれ専用のコピペツールを作ろう(ついでにツイート機能も付けよう)くらいの気持ちで開発を始めました。

仕組み自体は文字列を操作してるだけなのでそんなに時間もかからずに完成したのですが、文字(ラ餃チャ)に対応した画像を表示させるようにしたり、元ネタに似せるために背景や飯の画像を配置したり、その画像を1枚の画像として保存できるようにしたり…となんかだんだん大きくなっていき、最終的にはラ・餃・チャセット画像ジェネレータになっていました。

得た知見

​作っただけじゃもったいないので、これを作るにあたって得られた知見とかを書いていこうと思います。

画像の用意

頑張りました。
これについてはいつか記事を書きたいなって思ってるんですが、自分は大体下の記事のようなことをやっています。

２値化＆アルファ操作で切り抜き（切り抜き＆透過）～AzPainter2を使おう

画面リセット

生DOMを操作して要素の中身を無にすることで実現できます。

document.getElementById('ragyotya-image').textContent = null

飯画像の配置

一番苦労したところ。
いろいろ調べたりTwitterで教えてもらったりして親要素をposition: relative;にして子要素をposition: absolute;にすればいけそうだというのは分かったんですが、画像1枚1枚の位置が違うので重なりがうまくいかずに苦労しました。
解決策としては飯の画像と画像の間に透明な画像を挿入(これはposithion: static;)することで中途半端に重なるようにしました。

(なんかいい方法あったら教えてください)

画像の生成

html2canvasというライブラリであっという間に実装できました。

どれくらいあっという間だったかというと、

npm install html2canvas

して

import html2canvas from 'html2canvas'

を追加して

html2canvas(document.body).then(function(canvas) {
    document.body.appendChild(canvas);
});

を追加するだけで画面にスクリーンショットが生成されます。
あとはdocument.bodyのところをよしなにするだけで実装できました。

画像の保存

html2canvasで生成された画像はcanvasになっているので、canvas.toDataURL('image/png')でbase64化して、それをurlとしたダウンロードリンクをクリックさせることで実装できました。

 const downloadLink = document.getElementById('download-link')
 downloadLink.href = canvas.toDataURL('image/png')
 downloadLink.download = 'result.png'
 downloadLink.click()

おしまい

たぶん3分で飽きると思いますが、是非遊んでみてください。