みんなの「作ってみた」

GIF画像検索してブラウザでLGTM画像生成とアップロードをしてMarkdown記法でコピーできるツール作った話

2019/05/29

himanushi
himanushi
おねんね上等

今回の開発でわかったこと&この記事で言いたいこと

JavaScriptはすごい。
firebaseもすごい。
個人開発なら、なんでもかんでも自分で作ろうとしないこと。
世の中の既存のサービスにも目を向けること。
GIFバイナリは面白かった。
いやまじでfirebaseはすごい。

ツール開発経緯

この記事に触発された。

ちょっとそこのあなた！ 自分だけのオリジナルLGTMをチームで使ってみませんか？

そうだよね！LGTM画像って動く方がいいよね！めっちゃわかる

でもLGTMって書かれていないGIF画像って素っ気ないよね！

じゃGIF画像検索できて、それをすぐにLGTM画像に生成してMarkdown形式でコピペしたい！！

何ができたのか

できたツールがこれ。

GIF検索してコピペできるLGTM画像生成ツールを作った

ChromeとFirefoxでしか確認していません。。

大まかにどうやっているのか

  1. GIF画像をバイナリで取得する。
  2. バイナリを分析して一枚の画像ごとに分ける。
  3. LGTMの文字と一枚の画像をcanvasに描画していく。
  4. 全部くっつけてLGTM GIF画像が出来上がる。
  5. サーバーにLGTM画像をアップロードしURL取得して終わり。

サーバーでは画像を保存することしかしていません。

ブラウザのみでGIF検索、LGTM画像生成、アップロード、Markdown記法クリップボードにコピーをしています。

具体的にどうやってるのか

  1. GIPHY APIのSearch APIでGIF画像を検索する。
  2. クリックされたら幅200pxのGIF画像をarraybuffer形式でファイルを取得する。
  3. それをomggif.jsを使用して一枚ずつの画像にする。
  4. gif.js で一枚になった画像とLGTM文字をcanvasにdrawする。
  5. GIF画像の枚数分、LGTM文字付きの画像をgif.jsでaddFrameしたらrenderする。
  6. gif.js でrenderすると完成したGIF画像がblobに変換される。
  7. blobをfirebase storageにそのままアップロードする。
  8. 最後に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