LoginSignup
1

posted at

updated at

Organization

LGTMのGIFを簡単に貼れるChrome拡張をつくったよ

作ったもの

ランダムで良い感じのLGTMのGIF画像を貼り付けられます
↓こんな感じです!!:heart_eyes:

EZTMのデモGIF

ストアページ

なぜ作ったか

最近LGTMするときに、LGTMのGIFを付けるのにハマってました。
GIF画像は https://www.lgtmgifs.com/ のようなページから毎回コピペしてたんですが、
絶妙にめんどくさかったです。笑
それを解決するためにつくりました!

ソースコード

簡単なアプリなので、正直JavaScriptだけでもいいのですが、
TypeScriptが好きなのでTypeScriptで書きました。
webpackとmanifest.jsonのくだりが少々面倒でした。

ソースコードは公開してあります。

工夫した点

強いて言うなら、カーソルが当たっている箇所にGIF画像のマークダウンが挿入されるようにしたことです。
カーソル位置はdocument.activeElement.selectionStartで取得しました。

今後の課題

1. GIF画像の種類が少ない

現状、10枚分のGIF画像のURLがソースコードにべた書きとなっている。
それについて以下を検討しました。

  • ユーザが任意でGIFを追加できる仕組み

    • →ユーザの手間が増えるので当分はこの機能は入れない予定
  • 開発者側(私)がもっとGif画像を用意しておく

    • →これでいこうと思います!目標100枚!

2. 使い方が分かりにくい

現状、目に見えるボタンが設置されるわけでもなく、

  • 右クリックでコンテキストメニューを開いて「Insert LGTM gif」をクリックする
  • または、ショートカットコマンド(shift + cmd + v)をする

のいずれかを行わないと機能が使えない。

はじめて使うユーザだと、使い方が分からない可能性があるので分かりやすくする工夫が必要かもしれない。

3. 機能のトリガーをもっとよくできそう

ユーザが特別な操作を行わなくても、欲しいタイミングでLGTM画像が自動で張り付けられれば、
もっと便利になると思います。
具体的なトリガーの案としては以下のような感じでしょうか?

  • コメントにLGTMと入力したとき
  • Approveをクリックしたとき

おわりに

LGTMのGIFは気持ちがアゲアゲになるのでオススメです!
気になった人はぜひEZTM使ってみてください。
フィードバックなども大歓迎です!コメントにお願いします!!
今後もアップデートしていく予定です:ok_hand_tone5:

↓ストアページ

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1