今回の開発でわかったこと&この記事で言いたいこと
JavaScriptはすごい。
firebaseもすごい。
個人開発なら、なんでもかんでも自分で作ろうとしないこと。
世の中の既存のサービスにも目を向けること。
GIFバイナリは面白かった。
いやまじでfirebaseはすごい。
ツール開発経緯
この記事に触発された。
ちょっとそこのあなた！ 自分だけのオリジナルLGTMをチームで使ってみませんか？
そうだよね！LGTM画像って動く方がいいよね！めっちゃわかる
でもLGTMって書かれていないGIF画像って素っ気ないよね！
じゃGIF画像検索できて、それをすぐにLGTM画像に生成してMarkdown形式でコピペしたい！！
何ができたのか
できたツールがこれ。
ChromeとFirefoxでしか確認していません。。
大まかにどうやっているのか
- GIF画像をバイナリで取得する。
- バイナリを分析して一枚の画像ごとに分ける。
- LGTMの文字と一枚の画像をcanvasに描画していく。
- 全部くっつけてLGTM GIF画像が出来上がる。
- サーバーにLGTM画像をアップロードしURL取得して終わり。
サーバーでは画像を保存することしかしていません。
ブラウザのみでGIF検索、LGTM画像生成、アップロード、Markdown記法クリップボードにコピーをしています。
具体的にどうやってるのか
-
GIPHY APIの
Search APIでGIF画像を検索する。 - クリックされたら幅200pxのGIF画像を
arraybuffer形式でファイルを取得する。 - それをomggif.jsを使用して一枚ずつの画像にする。
-
gif.js で一枚になった画像とLGTM文字を
canvasにdrawする。 - GIF画像の枚数分、LGTM文字付きの画像をgif.jsで
addFrameしたらrenderする。 -
gif.js で
renderすると完成したGIF画像がblobに変換される。 -
blobをfirebase storageにそのままアップロードする。 - 最後に
firebase storageのdownloadUrlを取得してクリップボードに保存する。
これを実装するまでの物語
目的：GIF画像検索してそれをLGTM画像にして簡単にMarkdown記法でコピーしてGithubに貼り付けたい！
よくRuby on Rails使っていたのでrmagickとかいう画像編集gemで実装してみる。
できたが、実装が悪いのかGIF画像生成に時間がかかった。
これではたくさん画像生成するとなると遅くなってしまう。。
うーむ。
もっと早く画像編集する方法を探る。
PythonとOpenCVに出会う。
早い気がするが、結局画像生成に時間がかかる。
うーむ。
もっともっと早く画像編集したい！
Halideに出会う。
少し触って、「あれ、なにしようとしてたんだっけ？？」ってなる。
--数年後--
ちょっとそこのあなた！ 自分だけのオリジナルLGTMをチームで使ってみませんか？を見る。
そうだよな。LGTM画像ってLGTMの文字が入ってこそだよなぁ。
うーむ。
--数日後--
そっか、使ってもらう人に画像生成してもらえばサーバーの負荷減るなー。
今に至る。
完
ライセンス
https://github.com/deanm/omggif MIT License
https://github.com/jnordberg/gif.js MIT License