GJ Carelyへ機能追加した時の話

平井宣雄

2021/12/15

この記事はiCARE Dev Advent Calendar 2021(レーン1)の15日目の記事です。

お久しぶりです。平井です。
今日は2021年9月頃にGJ Carelyへ機能追加した時の話を書きたいと思います。

GJ Carelyとは

まずはGJ Carelyとはなんぞやという方への説明です。
簡単にいうと社員同士で「ありがとう」の感謝の気持ちを伝えれるslackアプリですがこちらのblogを見て頂いた方が早いのでご覧ください💦(雑
入社したら「ありがとう」だらけだった。
GJクリスマス2021を開催します！！！

当時の開発メンバー

今回の機能を開発する際に携わったメンバーの紹介です。
安田さん：VPoE。GJ Carelyの生みの親。だが今回は何もしていない人
すんさん：サーバサイドエンジニア。昼ごはんを食べず無限に働く無限の住人、今回はフロントエンドを担当
じゃっきーさん：デザイナー。今回の機能で使用する最高の画像を作成してくれた重要人物、デザインを担当
やすなりさん：フロントエンドエンジニア。若手だがフロントはしっかり任せれるキラキラ系エンジニア、フロントエンドを担当
わし：サーバサイドエンジニア、三度の飯より飯が好き！腹ペコエンジニア、サーバサイド担当

GJ Carelyで使用している技術

続いてGJ Carelyの開発で使われている技術は以下になります。

ruby 2.7.4
Rails 5.2.3
Vue.js2系
AWS(CloudFront、Elastic Beanstalk、PostgreSQL、EC2)

開発キックオフミーティング

まず機能を追加する前に何を開発するかのミーティングを開催しました。
GJ Carely開発要望、ロードマップというスプレッドシートがありそこから何かを開発しよう〜という感じだったのですが候補としては以下のようなものがありました。

slack上で送られたメッセージの内容をWebでリアルタイムに表示
slack認証でログインできる機能を作る(これがあるとマイページが作成できるようになる)
グループメンションへの対応( @dev などのグループへGJを送ってもメンバーへポイントが加算される)

実際のスプレッドシートはこんな感じでした↓

1つ目の「slack上で発生したメッセージの内容をWebでリアルタイムに表示」でデザイナーの青木さんが昔、作成しかけていたhtmlがあるということで実際のコードを見てみました。
その中に恐らく背景に使うためのyoutubeのURLが記載されていたのでみんなで見ることにしました。
みんな心の中で「頼む、ここは会社なんだ、変な動画は流れないでくれ🙏」と不安と期待でドキドキしていたはず、、で実際の動画は下のものでした。

なんだよこれ！
どういうこと？意味がわからない！
どうやって使われるの？
....フィギュアスケート？

以上がみんなの感想でしたw
なんですがよく分からないが面白いのでこれを作ろうという結果になりました！
(もしかしたら私が勝手に進めたかもしれないがみんな同意だったと信じたい)

新規作成した機能

実際に完成したものが以下になります。
slack上でGJ Carelyを送っている画面です。slack上ではポイントが加算されていきます。

今回作成したリアルタイムGJメッセージの画面です。
上記のslackメッセージを(ほぼ)リアルタイムでwebで表示しています。(青木さんこだわりのyoutubeのGIFが背景に入っています)