うちの猫がkawaiiすぎるのでLGTM画像にしてみた話(S3 + Lambda + API Gateway + Text Blaze)

この記事は CARTA アドベントカレンダー2024の12月19日目の記事です!

はじめまして。株式会社DIGITALIO でエンジニアをしているキッチンです。

皆さん、普段レビューでLGTM画像 は使っていますか?
「Looks Good To Me(LGTM)」のコメントに画像を添えて送ってもらえると、なんだか嬉しい気持ちになりますよね。

さて、今回はうちの猫をLGTM画像にすることで、合法的(?)にうちの猫のかわいさをチームメンバーに見せつけていった話をお届けします! 🐱✨

うちの猫について

まずは、うちの愛猫を紹介させてください!
ノルウェージャンフォレストキャットの 「むく」 です😸
茶色と白色のふわふわな毛並みがチャームポイントで、もう kawaii の塊なんです✨✨✨

(※「むく」のLGTM画像は後ほど登場します!)

作ったものの話

最終的な全体像

構成は S3 + Lambda + API Gateway + Text Blaze となりました。

構成図

  • 画像加工
    • S3に画像を置くとLambdaがトリガーされ、元画像をLGTM画像に加工してストック
  • 画像配信API
    • API Gateway + Lambda でS3からランダムなLGTM画像を返却
  • API利用側
    • GitHub に <img src="https://xxx/catImage/random" width="300"> といった形でスニペットを貼り付けて利用
    • Chrome拡張機能のText Blazeでスニペットを呼び出す

作る過程

画像加工+画像配信API

とりあえずAPIでLGTM画像を配信できたら後はどうにでもなるだろうということで、まずはLGTM画像加工と画像配信APIからどうするか考え始めました。

作り始める時には以下の気持ちがありました。

  • S3に画像を放り込んだらあとはオートで全て済むようしたい
    • 数ヶ月後に画像を追加したくなったときに、きっとその時の自分はほぼ全てを忘れている
    • 数ヶ月後にシステムの中身を思い出してバッチ実行なりをしたくはない
  • 画像配信APIはストックされたLGTM画像を返すだけの形にしたい
    • 画像加工する処理には外部APIを使うことも視野に入れている
    • 画像配信APIがリクエストされるたびに毎回外部APIを叩くと外部APIの制限に引っかかりやすくなるので、画像投稿時に一度だけ画像加工をかけるようにしたい
  • 無料の範囲内でやりたい

これらを満たすようにすると、まあそうなるだろうなという構成になりました。

API利用側

LGTM画像を返すAPIは用意できたので、あとはAPIをどう使うかです。

自作chrome拡張機能かwebページでも作って世界のあまねく人々に「むく」の可愛さを届けることも考えましたが、まずは手軽に自分だけ使えればいいかなということでimgタグのスニペットで済ませることにしました。

スニペットを貼るにあたって使うツールはなんでもいいのですが、Text Blazeというスニペットのための便利なChrome拡張機能があったので今回はこちらを使うことにしました。
自分は /lgtm のスニペットでimgタグを呼び出せるように設定しています。

(余談ですが、Text Blazeすごい便利です。おすすめです。)

利用してるところ


LGTM画像紹介

完成した画像がこちらです!

これをPull Requestに添えて送れば、チームメンバーも一瞬で笑顔になること間違いなしです😸✨

さいごに

今回は 「うちの猫がkawaiiすぎるのでLGTM画像にしてみた話(S3 + Lambda + API Gateway + Text Blaze)」 をお届けしました。
ちょっとした工夫でチームの雰囲気が和み、PR のやり取りも楽しくなりますよ!

それでは、皆さんもLGTM画像で癒しと笑顔を広げていきましょう🐾✨

「むく」:みんなに笑顔を届けるにゃ!