LiBz Tech Blog

LiBの開発者ブログ

Vue+SVGでLGTMの画像制作ツールを作ってみた

ご挨拶

こんにちは! 主にフロントエンド周りをやっているアベです。
前回Vueの記事を書き(真のフロントエンドエンジニアになるために、まずはNuxt.js + Firebaseを使って簡易メモ帳を作ってみた - LiBz Tech Blog)、次はReactを触ってみようかなと言っていたのですが、 今回もVueを使うことになりました...
Vueを使うといっても簡単なものでたいしたことはしていません。

SVGを操作するのにVueが向いているということで、
それじゃあVueでSVG触ってみようとタイトルの通りLGTMの画像を制作できるツールを作ってみました。

なぜ作ったのか?

一応なぜこんなわけのわからないツールを作ったかを説明させていただきます。

LGTMとの出会い

前にいた会社ではGitHubをかろうじて使用していましたが、レビューをしたりされたりということはいっさいありませんでした。 というかレビューって??っていうレベルで、私のgit操作はpushして終わりでした。(今考えるとヒドイww)

ですので、プルリクという言葉すらLiBに入って初めて知りました。。
プルリクして、ちゃんとレビューもらって、マージして、デプロイするといった、
真っ当なフローを踏むことが出来ました。

そのフローを自分も踏んでいくと、
レビューで見慣れない文字と出会いました。

それがLGTMでした。

最初見た時は意味がわかりませんでした。。。

LGTM画像との出会い

LGTMがLooks Good To Meという意味であることがわかり、(他にも知らない略語にいっぱい出会いました...)
私も真似てLGTMコメントをしていきました。
そしてある時、自分が出したプルリクにLGTMと記載されている画像でレビューしてくれてることに気がつきました。

なにそれ?
そんな画像あるの?わざわざ作ってるの??

そんなことを思いながら恐る恐る聞いて見ると、
そのLGTM画像がランダム表示されダウンロードできるサイトや、
画像に文字を入れるサイトがあると教えてもらいました。

他の人に聞いてみても、そういったサイトを使っているが
昔は使えてたサイトが使えなくなってしまったとの声があり、
ちょっとLGTMを載せるツールでも作ってみるかと思ったのがきっかけです。
無駄な説明なのに長々と失礼いたしましたm( _ _ )m

Vue + SVGでやってみる

ということでじゃあなにでやろうかな〜、と思った時に、
Canvasでいいかなと思ったのですが、
一つ一つの要素をjsやcssでいじりやすいとのことと、
実は今までSVGに無関心で触ったことがなかったのでSVGもそろそろ触ってみるかと思い、初めてSVG触ってみました。

前述したようにVueがやりやすいとのことだったので、 Vue+SVG でやってみました。

LGTMaker

つくったのがこちらです。 f:id:ab_y:20190314194159p:plain

LGTMaker

機能説明

画像アップロードしてLGTMの文字の配置を決めるだけのサイトです。

  • LGTM(文字)をドラッグで動かせます
  • 文字の設定がいろいろできます
    • 文言
    • 文字サイズ
    • 文字カラー
    • 文字間(カーニング)
    • 文字の種類
    • 文字のボーダー(文字の種類によってはMがすごいことになるw)
    • 文字のボーダーの色
    • 回転
    • 文字向き
  • 画像の幅、高さが800px以上の場合は、800pxになるようにしています。

まだできてない...

  • gifアニメできない
  • ドラッグ&ドロップ画像アップロード
  • 文字の回転ちょっとおかしい&回転した後動かせない
  • 英文字を縦向きにできない

こんな感じの画像が作れます!

f:id:ab_y:20190315110150p:plain

この女性は川子芹菜さんという方でぱくたそでフリー素材として提供されています。

コードドン!

今回はindex.htmlでhtmlもjsも全部書いてしまったのですが、 htmlとjs部分でわけて載せます。

html部分

LGTMaker

js部分

vueを使っているといってもコードを読み込んで使うという一番簡単なパターンです。

LGTMaker

svg2imageDataの関数は、 SVGを画像化する - アシアルブログを参考にさせていただきました。

SVGでつまづいたところ

SVGの中に要素を動的に生成する場合

document.createElementではなくdocument.createElementNSじゃないとダメ。

 document.createElementNS('http://www.w3.org/2000/svg',"image")

アップロードした画像をsvgのimage要素して生成しているのですが、 document.createElementでやっていて結局小一時間ぐらい苦戦してました...

SVGのtextだけでもできることがいっぱいある

これはつまづいたわけではないのですが、
textの要素をひとつとっても操作できることが多くあり、中には「これとこれの違いわからん」みたいなものもあります。
下記サイトに掲載されているので見て見てください。 svg要素の基本的な使い方まとめ

SVGを使ってみて

SVG難しそうだな〜と思ったんですが、意外にもそんなことはなく、
2D,図形をHTMLで表現するみたいな感覚でした。 (今回触ったのがtextとimageだけでたいしたことしてないのでそんなこと言えないかもしれませんが...)
Pathとかの図形を表現しようとすると座標指定する必要があるので難しいというより面倒くさいかもしれませんw
FigmaみたいなツールをSVGで作成できると思いますが、いざ作ろうとしたら相当大変かと...

ただ、私みたいにSVG難しそうと思っている方がいれば意外と試してみるとそんなことはないので、 ぜひ触って見てください!