LGTM

はじめに

プルリクをApproveする際にLGTM画像を使ってますか？
自分は以前LGTMoonさんを利用させていただいていたのですが、ランダムに流れてくる画像の中から今の感情や、PRに適した画像を探していると楽しくなってしまい、いつの間にか画像を選ぶ時間がやたら長くなったり、業務中にふさわしくないようなエロ・グロ画像が流れてきたりして、好ましくなかったので、ある時からLGTMeowさんを利用させていただくようになりました。

LGTMeowでは猫の画像しか流れてこないため癒されるという点と、Cats Random Copy機能があり自分で選ばなくてもランダムな猫ちゃんの画像URLがクリップボードにコピーされる点がめっちゃ便利。僕のApproveまでの謎の画像選びタイムが短縮されました。嬉しい。

ただ、エンジニアたるものこれに飽き足らず、そもそも画像を自分で選んでないのだから「LGTMeowにアクセスしなくてもサクッとランダムなURLを取得してクリップボードに貼れればいいのでは？」と思い今回試してみました。

今回やりたいこと

①何らかの方法で猫ちゃんLGTM画像のURLを取得
②shellscriptを使って取得したURLをClipboardにコピー
③Raycastにshellscriptを登録してどこからでも呼び出せるようにする。

LGTM画像のURLを取得

まずはLGTMeowはどうやって猫ちゃん画像を取得しているのでしょうか？

LGTMeowを開いて、検証ツールからNetworkタブを開きます。
Cats Refreshで猫ちゃん画像が切り替わるので、押してみるとhttps://lgtmeow.com/api/lgtm-imagesというAPIを叩いていることがわかりました。

少し見づらいですが、、、

試しにこのAPIを叩いてみると

Response

[{"id":163,"imageUrl":"https://lgtm-images.lgtmeow.com/2021/11/16/22/e25133e1-52b1-45c4-ba93-fdd698f57753.webp"},{"id":202,"imageUrl":"https://lgtm-images.lgtmeow.com/2022/03/05/00/e2bd150b-564f-4924-b199-78ad83729b7b.webp"},{"id":310,"imageUrl":"https://lgtm-images.lgtmeow.com/2022/07/26/13/2071d87f-3950-4ec3-94eb-3d116451329e.webp"},{"id":424,"imageUrl":"https://lgtm-images.lgtmeow.com/2023/02/10/09/8d88afd1-3b7f-47ef-ad3c-745f649ad2bc.webp"},{"id":454,"imageUrl":"https://lgtm-images.lgtmeow.com/2023/04/03/23/40b609fd-baf7-4921-aa4e-ad86ac5c33fb.webp"},{"id":485,"imageUrl":"https://lgtm-images.lgtmeow.com/2023/07/06/18/5b0ab8b4-d311-4685-99ec-a743dba60643.webp"},{"id":540,"imageUrl":"https://lgtm-images.lgtmeow.com/2023/10/12/20/777cf8cc-108e-443f-a925-580da593f8ba.webp"},{"id":642,"imageUrl":"https://lgtm-images.lgtmeow.com/2024/02/11/22/352b78cf-9bba-474a-a735-ae068f78c60d.webp"},{"id":661,"imageUrl":"https://lgtm-images.lgtmeow.com/2024/03/20/12/5d1b99a4-56ba-459d-8ced-1d8f94ba9b23.webp"}]

おー、何だか画像URLらしきJsonが帰ってきました。
各urlの最後がwebpという拡張子で終わっています。自分も詳しくなかったのですが、表示速度が上がり、SEOにも良いみたいです。
何はともあれ、httpリクエストして画像のurlを取得できましたね。

シェルスクリプトで画像URLをクリップボードに貼り付ける

こういうスクリプトを書くのは僕よりGPTの方が100倍得意なので、GPTに依頼します。
GPTに伝えるのは下記です。

• API(https://lgtmeow.com/api/lgtm-images)を叩くと画像URLのリストが返ってくること
• そのうち先頭のものを取得してクリップボードに貼り付けたいこと
• その際に[![LGTMeow](https://hogehoge)](https://lgtmeow.com)みたいな形式にしてからクリップボードに貼り付けること

をお願いしました。

一発では正解は出ませんでしたが、何度かやりとりしたら動くshellscirptが出来上がりました。

# API URL
url="https://lgtmeow.com/api/lgtm-images"

# APIリクエストを送信し、レスポンスを取得
response=$(curl -s $url)

# jqを使って最初のimageUrlを抽出
imageUrl=$(echo $response | jq -r '.[0].imageUrl')

# クリップボードにコピーするテキストを作成
formatted_text="[![LGTMeow]($imageUrl)](https://lgtmeow.com)"

# フォーマットされたテキストをクリップボードにコピー
echo $formatted_text | pbcopy

# クリップボードにコピーされた内容を表示
echo "Formatted text has been copied to clipboard: $formatted_text"

これをterminalから実行してみると無事クリップボードにコピーされました。
また先ほどのAPIはランダムに猫ちゃんLGTM画像を取得してくるもののようで、先頭のものを利用するだけで毎回違う画像をコピーすることができました。

Raycastから呼び出してみる。

これはおまけです。とはいえ、terminalから実行するならLGTMeowを開くのと手間はたいして変わらないので、Raycastから呼び出した方が良いです。別のランチャーアプリでも問題はないと思います。
Raycastを開いたらcmd+,で設定を開きます。
extensionsからScriptsを追加します。Create Script Commandから追加。

TitleはLGTMとかにでもしておきましょう。
そうするとshellscriptファイルが生成されるので、先ほどの内容をコピペします。
アイコンは猫ちゃんにでもしておきましょう。🐈

するとRaycastにlgtmと入力するだけで、LGTM画像をペーストできるようになります。
Chrome開いたままタブも切り替えずにLGTM画像を用意できるので爆速

あれこれいいんだっけ？

そもそもサービスが公式に公開していないAPIを叩くのがいいか悪いかというのはサービス次第かなと思います。
利用規約で明確に禁止されていない場合大きな問題にはならないかと思いますが、運営に迷惑がかかったり嫌だと思われるのであれば避けるべきかなと思いGPTにも聞いてみましたが、なんとも歯切れの悪い回答だったので、開発者の方の1人に直接聞いてみました！

するとAPIを叩くこともZennの記事にして発信することも快諾してくれました。なんという優しい方でしょうか。ありがとうございます！！
今回のAPIは大量に叩くメリットがあるAPIではないので、そんなことをする人はいないと思いますが、節度を持って利用させていただきましょう。

快諾いただいたkeitaさんのアカウントはこちら
https://x.com/keita_kn_web

おわりに

今回はLGTM画像をサクッと用意する方法を紹介してみました。普段からRaycast使っている方はシェルスクリプトをコピペするだけでサクッと導入できるのでぜひ試してみてください！

2024年は技術発信も頑張ろうと思っているので、記事が参考になった方は記事とGitHubのいいね(スター)とフォローをしていただけると励みになります！
最後まで読んでいただきありがとうございました✨

https://github.com/miyasic