<p>この記事は<a href="https://qiita.com/advent-calendar/2023/yumemi-23-graduation" target="_blank" rel="nofollow noopener noreferrer">株式会社ゆめみの23卒 Advent Calendar 2023</a> 16日目の記事です。</p>
<p><a href="https://qiita.com/advent-calendar/2023/yumemi-23-graduation" target="_blank" rel="nofollow noopener noreferrer"><img src="https://res.cloudinary.com/zenn/image/fetch/s--epqDUNwX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/672609/6d8a7098-9aef-a19a-54fe-83a2d493e033.png" alt="YUMEMI New Grad Advent Calendar 2023" loading="lazy" class="md-img"></a></p>
<p>GitHub で PR を Approve する際に、LGTM 画像を貼る人は多いのではないでしょうか。<br>
その時、任意の LGTM 画像系のサービスから画像をコピーして、PR のコメント欄に貼り付けていませんか？</p>
<p>正直面倒ですよね。</p>
<p>それ、GitHub 上でできますよ。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b524f0b4f4ff6" src="https://embed.zenn.studio/card#zenn-embedded__b524f0b4f4ff6" data-content="https%3A%2F%2Fchromewebstore.google.com%2Fdetail%2Fcopy-lgtm%2Flakeepohjegichaoakaaambeaipdcdmf%3Fhl%3Dja" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://chromewebstore.google.com/detail/copy-lgtm/lakeepohjegichaoakaaambeaipdcdmf?hl=ja" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://chromewebstore.google.com/detail/copy-lgtm/lakeepohjegichaoakaaambeaipdcdmf?hl=ja</a></p>
<h2 id="copy-lgtm-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#copy-lgtm-%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> Copy LGTM について</h2>
<p>Copy LGTM は、GitHub 上で LGTM 画像をペーストできる Chrome 拡張です。</p>
<p><span class="embed-block embed-youtube"><iframe src="https://www.youtube-nocookie.com/embed/Ajc8MXrewhY" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe></span><a href="https://www.youtube.com/watch?v=Ajc8MXrewhY" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.youtube.com/watch?v=Ajc8MXrewhY</a></p>
<p>拡張機能を入れると動画のように、Review Changes ボタンの横に Copy LGTM ボタンが追加されます。<br>
このボタンを押すことで自動的に textarea にランダムに治安の良い LGTM 画像がペーストされます。</p>
<h2 id="%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93">
<a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E6%8A%80%E8%A1%93" aria-hidden="true"></a> 使用技術</h2>
<p>plasmo というブラウザ拡張機能に特化したフレームワークを使っています。<br>
<code>manifest.json</code> をあまり意識せずに、React, TypeScript で開発できるのが特徴です。（Svelte や Vue のサポートもしているようです）</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7aaaed844e4ec" src="https://embed.zenn.studio/card#zenn-embedded__7aaaed844e4ec" data-content="https%3A%2F%2Fwww.plasmo.com%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://www.plasmo.com/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://www.plasmo.com/</a><br style="display:none">
plasmo の詳細についてはここでは割愛しますが、簡単に知りたい方は以下の記事がおすすめです。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__2f1405c134fe5" src="https://embed.zenn.studio/card#zenn-embedded__2f1405c134fe5" data-content="https%3A%2F%2Fzenn.dev%2Fnado1001%2Farticles%2Fplasmo-browser-extension" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/nado1001/articles/plasmo-browser-extension" style="display:none" target="_blank">https://zenn.dev/nado1001/articles/plasmo-browser-extension</a></p>
<h2 id="%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A">
<a class="header-anchor-link" href="#%E3%81%93%E3%81%A0%E3%82%8F%E3%82%8A" aria-hidden="true"></a> こだわり</h2>
<h3 id="%E6%B2%BB%E5%AE%89%E3%81%AE%E8%89%AF%E3%81%95">
<a class="header-anchor-link" href="#%E6%B2%BB%E5%AE%89%E3%81%AE%E8%89%AF%E3%81%95" aria-hidden="true"></a> 治安の良さ</h3>
<p>LGTM 画像系のサービスでは著作権的にアウトまたはグレーな画像を使用して作られた画像が多い印象がありました。<br>
そのような画像を案件先の他社のプロダクトのリポジトリの PR に貼るのは、少し気が引けるところがありました。<br>
そこで、Copy LGTM では著作権フリーな画像を採用し、ランダムに 20枚の画像を用意しています。</p>
<h3 id="%E9%9D%A2%E5%80%92%E3%81%8F%E3%81%95%E3%81%95%E3%81%8B%E3%82%89%E3%81%AE%E9%96%8B%E6%94%BE">
<a class="header-anchor-link" href="#%E9%9D%A2%E5%80%92%E3%81%8F%E3%81%95%E3%81%95%E3%81%8B%E3%82%89%E3%81%AE%E9%96%8B%E6%94%BE" aria-hidden="true"></a> 面倒くささからの開放</h3>
<p>従来のサービスでは Approve のたびに別サイトに遷移して画像をコピーし、PR のコメント欄に貼り付ける必要がありました。</p>
<p>LGTM 画像を貼ることは本質的なことではないのに、面倒くさい作業を強いられているのはおかしいですよね？（それに気づいて！）</p>
<blockquote>
<p>「ほな、LGTM 画像別に貼らんでええやん」</p>
</blockquote>
<p>そのような回答は受け付けておりません。<br>
LGTM 画像つきの Approve はノーコメントの Approve に比べ、穏やかな、優しい Approve な印象を受けませんか？</p>
<p>僕はそう思います。</p>
<h3 id="%E5%85%A8%E3%83%86%E3%83%BC%E3%83%9E%E5%AF%BE%E5%BF%9C">
<a class="header-anchor-link" href="#%E5%85%A8%E3%83%86%E3%83%BC%E3%83%9E%E5%AF%BE%E5%BF%9C" aria-hidden="true"></a> 全テーマ対応</h3>
<p>GitHub ではテーマ設定が可能ですが、この拡張機能では全テーマに対応しています。<br>
GitHub 側で定義された CSS 変数を使っているため、GitHub 側のテーマが変化しても、変数名が変わらない限り対応しています。（筆者が一番のユーザーなので変数名が変わった際にはすぐに対応します。）</p>
<p>また、ボタン押下時にペーストできたことを表示するツールチップも GitHub 側のスタイルを踏襲し、また、使用しているテーマに合わせて色が変わります。</p>
<h2 id="%E4%BB%8A%E5%BE%8C">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C" aria-hidden="true"></a> 今後</h2>
<p>少し今後についても触れておきたいと思います。</p>
<p>先日 v2 をリリースした際に、ボタン押下時に自動的にラジオボタンの Approve が選択されてほしいという要望をいただきました。</p>
<p>この機能について拡張機能でそこまで実装して良いものかどうか、また、当初のスコープとはズレてしまうのではと、悩んだのですが、オプトインという形で実装予定です。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__5fd17e14df79" src="https://embed.zenn.studio/card#zenn-embedded__5fd17e14df79" data-content="https%3A%2F%2Fgithub.com%2Fhayato-osh%2Fcopy-lgtm%2Fissues%2F41" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/hayato-osh/copy-lgtm/issues/41" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/hayato-osh/copy-lgtm/issues/41</a></p>
<p>また、任意の LGTM 画像を貼り付けたいという要望もいただきました。<br>
この機能に関しては当初リリース時の機能として考えていたのですが、色々あって含めなかった機能になります。</p>
<p>そのため、この機能に関しては plasmo の <a href="https://docs.plasmo.com/framework/storage" target="_blank" rel="nofollow noopener noreferrer">Storage API</a> での実装を検討しています。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__809a87e0bf888" src="https://embed.zenn.studio/card#zenn-embedded__809a87e0bf888" data-content="https%3A%2F%2Fgithub.com%2Fhayato-osh%2Fcopy-lgtm%2Fissues%2F42" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/hayato-osh/copy-lgtm/issues/42" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/hayato-osh/copy-lgtm/issues/42</a></p>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
<p>今回は筆者が開発した Copy LGTM について紹介しました。<br>
便利なことは確かなので、ぜひ以下からインストールして使ってみてください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__caabe22bc0e8b" src="https://embed.zenn.studio/card#zenn-embedded__caabe22bc0e8b" data-content="https%3A%2F%2Fchromewebstore.google.com%2Fdetail%2Fcopy-lgtm%2Flakeepohjegichaoakaaambeaipdcdmf%3Fhl%3Dja" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://chromewebstore.google.com/detail/copy-lgtm/lakeepohjegichaoakaaambeaipdcdmf?hl=ja" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://chromewebstore.google.com/detail/copy-lgtm/lakeepohjegichaoakaaambeaipdcdmf?hl=ja</a></p>


GitHub 上で LGTM 画像をペーストできたら嬉しくない？

zenn

Discussion