Techtouch Developers Blog

テックタッチ株式会社の開発チームによるテックブログです

超気軽にランチ仲間を見つけられるSlackアプリを次世代プラットフォームで作ってみた

記事タイトルの画像

こんにちは、プロダクトマネージャーのzakです。 ブラックフライデーで購入した指紋で解錠できるスマートロックがいい感じで嬉しいです。

本記事では、私が開発した社内用のSlackアプリについて説明します。

なぜ作ったか

現在、テックタッチの従業員は週に1-2日程度の頻度で出社しているのですが、私自身も含めて以下のような悩みがありました。

※過去の社内アイディアソン/ハッカソンで発表したアイディアの一部です

番宣:テックタッチではハッカソンを定期的に開催しています

tech.techtouch.jp

また、以下のような事情も合わさり、過去のアイディアを形にしたい思いが再燃してきました。

  • テックタッチは2022年11月に新しいオフィスへ移転(新橋駅から徒歩3分!)し、出社を促進するためにランチ代を会社が補助する制度(上限、条件あり)が開始されました。
  • いわゆるアドベントカレンダー駆動開発

何を作ったか

参加者募集メッセージ

イベント作成画面

できること

  • 主催者として、イベントを作成することができます。
  • 匿名モードで作成したイベントについては、主催者や参加者は一定の条件を満たすまでは明かされません。(当日まで旅先が不明なミステリーツアーならぬミステリーイベントのイメージ)
    • 匿名モードによってお誘いのハードルが下がる(誰も誘いに乗ってくれなかったときのダメージが減る)こと、社内の交流を促進すること(普段交流の少ない人とのセレンディピティ)の2つを意図しています
    • 一定条件:参加者の数が主催者が設定した最少催行人数を超えた場合
  • 参加者として、イベントに参加表明することができます。

ソースコードは Github にて公開しています。

github.com

どう作ったか、所感

せっかくの機会なので、2022年9月にオープンベータ版として公開されたばかりの Slack の次世代プラットフォームを利用しました。

Slack の次世代プラットフォームについては、以下の記事で特徴や既存 API との棲み分けや将来の構想など、詳しく解説されています。

qiita.com

開発者の視点では、以下の利点がありました。

  1. Run on Slack:アプリケーションのコードはすべてSlackが提供するクラウド環境で動作します。
  2. Datastore:アプリケーションと同様に、Slackアプリ用にデータを永続化するための機構もSlackから提供されています。
  3. Deno + Typescriptで動作:LinterやFormatter, テストフレームワークがDenoに同梱されており、即座に開発を始めることができました。

以上3点は開発にかかる労力を削減する、という意味で大変ありがたいものでした。

比較対象として、テックタッチ社内で開発・利用されている別の Slack アプリは以下のようなアーキテクチャを採用しています。今回は Slack の次世代プラットフォーム上で開発したため、Heroku や Firebase などは利用することなく類似の機能をもつアプリケーションを開発できました。

https://cdn-ak.f.st-hatena.com/images/fotolife/t/techtouch/20211207/20211207103829.jpg

引用元: tech.techtouch.jp

開発時に参考にしたもの

オープンβになって2ヶ月ほどなので、あまり情報が出揃っておらず、開発時に助かったものをまとめておきます。ありがとうざいます。

Slack公式のチュートリアル

次世代プラットフォームで新しく導入された概念「Workflow」「Function」「Trigger」を理解するのに役立ちました。

また、今回作成しようとアプリに機能が近かったため、複数あるチュートリアルの中でも以下をベースにして開発していきました。

Deno の標準テストモジュールを利用したテストコードもサンプルコード内に含まれていました。

api.slack.com

Block kit builder

https://app.slack.com/block-kit-builder

Block kit という Slack メッセージの UI フレームワークの Playground です。 リッチなコンポーネントを実装する際に大変役立ちます。

その他

実際の開発中に遭遇したアレコレについて詳細な記述があり、事前に落とし穴に気づけるので大変ありがたいものでした。

techblog.jmdc.co.jp

公式ドキュメントがまだ充実しきっていないポイントもあるため、Github でレポジトリを検索して参考にしました。

例: github.com