Discord ブックマークサービス、「StamPon（すたんぽん）」をリリースしました。

■ はじめに

「フィヨルドブートキャンプ」のプラクティスで作成した自作サービス「StamPon（すたんぽん）」をリリースしました、そのサービスの紹介記事になります。

■ 見つけた！問題

私が学習の場として選んだ「フィヨルドブートキャンプ」ではDiscordを活用して多くのメンバーが情報のやり取りをできる環境が提供されています。

しかし、多くの情報が飛び交う中で、「気になる発言をされてた記憶はあるんだけど、検索しても出てこないな～？、どのチャンネルだったかな～？」という問題に遭遇することが良くありました。

■ なぜ？作ったか

問題を解決するためには発言をブックマークすることが出来て、それを検索が出来れば解決するかな～？と思いました。

また、他の参加者の方が「Discordってブックマーク機能ってないのかな～？」と仰られているのを複数回見かけました。

じゃあそういう機能を提供するサービスを作れないかな？、技術検証をしてみよう！となりました。

■ その解決方法

Discordには「Bot」という機能があり、Discord内で発生する様々なイベントを監視してそれに対して処理を追加することができます。

Discord内での発言に対して何らかのアクションを行い、それをトリガーにしてその発言をデータベースに登録できないかと考えました。

■ 作ったサービスについての説明

ブックマークしたい発言に「気になる」か「👀」のスタンプを押すとその発言をデータベースに登録します。またブックマークした発言は、Webサイトで検索や編集、削除することが出来ます。

■ エレベータピッチ

[StamPon/すたんぽん] というサービスは、
[Discordの発言をブックマークする機能がないという問題] を解決したい
[Discordユーザー] 向けの、
[Discordのブックマークサービス]です。
ユーザーは [Discordの発言に「きになる」か「👀」のスタンプを押すことでブックマーク登録] ができ、
[Bookmarker | Discord Bots | Top.gg] とは違って、
[Web上に自分のブックマーク管理ページを持つことができ、検索や編集、削除の機能] が備わっている事が特徴です。

■ 使った技術

「フィヨルドブートキャンプ」での学習では主にRubyやRails、Vue.jsについて学んだため、それらの技術を主体にしました。

バックエンド
- Ruby 3.0.2
- Rails(API) 6.1.4.1

Discord Botは別サーバーからのアクセスになるため、トークンを発行して認証するようにしました。

フロントエンド
- Vue.js 2.6.14
- Vuetify.js 2.5.14

今回はWebサイトをSPA(シングルページアプリケーション)で作ろうと考えたため、Vue.jsを選択しました。 Vuetify.jsはv-data-tableが今回のサービスに必要な機能を持っていたため採用しました。ログイン処理には、DiscordのOAuth2認証を使用しました。

アプリケーションサーバ
- Puma 5.5.2
データベース
- PostgreSQL 13.4
Discord Bot
- Discord.js

Discordライブラリはいくつか検討しましたが、現状ではDiscord.jsが安定していると判断して採用しました。

CI/CD
- GitHub Actions
開発環境

サービス環境

■ 今回検証は行ったが、採用しなかった機能

Vue Router
Vuex

今回のWebサイトの規模では不要と判断し、簡単なコードを書いて動作検証まではしましたが採用しませんでした。

■ リポジトリ

Webサービス: kaiyu-tech/stampon
Discord Bot: kaiyu-tech/stampon-bot

■ サービスの使い方

※現在このサービスは「フィヨルドブートキャンプ専用」となっております。

1. StamPonにアクセスしてください。

2. Discordにログインしてください。

002

3. Botに必要な権限を確認して認証してください。

003

4. ログイン後の画面です。

5. Discordでブックマークしたい発言に「気になる」か「👀」のスタンプでリアクションを付けてください。

005

6. 以下がリアクションが付いた状態です。

006

7. 以下のようにブックマークが追加されます。

ブラウザアイコンをクリックすることにより、Discordサイトに飛んでブックマークした発言を開いて表示します。
Discordアイコンをクリックすることにより、Discordアプリを起動してブックマークした発言を開いて表示します。ただし、Discordアプリがインストールされていることが条件となります。

8. ブックマークを選択して「タイトル」や「ノート」を編集することが出来ます。

「タイトル」を入力することによりブックマーク一覧の「概要」に表示されます。
「ノート」は補足したい情報がある場合にご使用ください。

9. 「ログアウト」や「アカウントの削除」はアイコンマークから行えます。

■ プラクティスに要した期間

サービス案の検討 (常日頃から解決したい問題があればメモしてました)
ペーパープロトタイプを作る (21年09月14日から09月17日)
Webサービスを作る (21年09月22日から11月25日)
自分で作ったWebサービスのデザインレビューを受ける (21年11月25日から12月09日)
自分で作ったWebサービスのコードレビュー (21年11月25日から12月13日、22年01月05日から01月07日)
Webサービスをリリースする (22年01月07日)

※「9月25日から10月25日」の間は並行して、チーム開発（実際にPull Requestを作成してコード修正を行う）のプラクティスを行っていました。

■ 学んだこと

自作サービスを作成開始する段階で基礎的なことは学んでいましたが、Vue.jsやAPI(Jbuilder)など不足する知識についてはあらためて書籍や動画講座で学びました。

トークン認証

Discord Botは別サーバーからのアクセスになるため、トークンを発行して認証するようにしました。

3.0.2 :001 > SecureRandom.urlsafe_base64(61)
 => "UauFAXJXkF6L98Vi4XxW7f2XrhHiZUHukJB7uVtJSaANbaz9H4M6zurvRAr3vdQ-4KJRFfxlfBa3SKCDbw"

include ActionController::HttpAuthentication::Token::ControllerMethods

  def authenticate
    action_name == 'create' &&
      authenticate_with_http_token do |token, _options|
        ActiveSupport::SecurityUtils.secure_compare(token, ENV['APP_API_TOKEN'])
      end
  end

この時CSRFの扱いに悩んだため、フィヨルドブートキャンプ内のQ&Aでメンターさんやアドバイザーさんに助けてもらいました。

■ 追加したい機能

下記以外にも実装したら良いなと思う機能があれば「Issues · kaiyu-tech/stampon」からご連絡ください。可能な限り対応したいと思っています！

現在はアカウント作成後からブックマークされるが、過去のデータも期間を指定でブックマークできるようにする
「ブラウザアイコン」はUser Agentで判別したブラウザのアイコンを使用する
発言やユーザー名などDiscord上で更新可能なデータを定期的に監視してキャッシュデータを更新する
未読のブックマークには未読マークを付ける

■ おわり

スクールへ参加した当初はRubyやRailsについて、ほとんど何もわからない状態でしたが、プラクティスを一つ一つ進めて行く中で多くのことを学ぶことが出来たと思います。メンターさんやアドバイザーさんはもちろんのことですが、生徒のみなさんと一緒に学習に取り組めたことが卒業までたどり着けた原動力だと思っています。

いままでは独学でしか学んだことしかかなったため、レビューを受けることで自分で気づくことが出来ないレベルのコードや考え方を知ることが出来たのは大きな成果だと思っています。

チーム開発でメンバーレビューを依頼したりされたりしたのがプラクティスの中で一番印象的で楽しかったです。

まだまだ未熟な部分が多くあるので、卒業後も引き続き勉強をしようと思っています。また、採用しなかった機能も含めて、環境構築や動作検証を行った技術については別途アウトプットできればと考えています。