##はじめに
この度、誰でも簡単にLGTM画像が作れるサイト「LGTM Creator」を公開しました。
URL: http://hackason-lgtm-front.s3-website-ap-northeast-1.amazonaws.com/
本記事ではサイトの概要と具体的な使い方を説明します。
サイトの内容
LGTM Creatorは誰でも簡単にLGTM画像を作成、投稿できるサイトです。
LGTM画像とは、プルリクエストで行うコードレビューでレビュアーがOKを出す際にいいね（Looks Good To Meの略称）の意でメッセージ上に貼り付ける画像のことです。
従来のLGTMサイトとの違い
よりオリジナルな画像が作れる
従来のLGTM作成サイトの多くは、使用する画像の中心にLGTM等のテキストが自動で配置される、というものでした。
しかし、これでは少し味気ないし、テキストと画像の肝心な箇所が被って見辛くなってしまうこともよくあります。
LGTM Creatorではテキストの位置、フォントデザイン、色、大きさ、角度をユーザが自由に決めることができます。
ランキングが表示される
従来のサイトでは、直近で他のユーザによって投稿された画像が表示されるだけと言ったものが多く、その時サイト内で人気のある画像を探したりすることができませんでした。
LGTM Creatorでは、全ユーザから使用された回数の多い順にランキング形式で画像を見ることができます。そのため、何か面白い画像を使いたいけれど、自分ではちょっと思いつかないなんて人には特にオススメです。
使い方
自身でLGTM画像を作る場合
- まず、使いたい素になる画像のリンクをページ上部のフォーム内に入力します。
注：jpgやpngファイルは指定できません。 - 作成ボタンを押します
- 以下の画面で自由に編集できます。終わったら「投稿する」を押します。
画像を使用する
- 使用したい画像の右上にある「使用する」をクリックします。（タイムラインやランキングから選択できます。）
- 画像リンクのコピーが成功したら、Github等のコメント欄にペーストします。
使用した技術
- Typescript
- Scala
- AWS
- tui-image-editor
今回LGTM画像の作成、編集にはtui-image-editorを使用しています（そのまま使えなかったのでところどころフォークして使ってます）。
終わりに
LGTM画像を使うと、コードレビューが少し楽しくなります。
あなたも自分ならではのユーモア溢れる世界に一つだけのLGTM画像を作ってみてください。