Discordで昨日バズった発言をお知らせするアプリBuzzcordをリリースしました。
はじめに
フィヨルドブートキャンプの最終課題である自作サービスで Buzzcord(バズコード) というアプリの作成に取り組み、このたびリリースしました。
この記事ではこのアプリについての説明と開発で学んだことや苦労したことなどを書きたいと思います。
目次
自己紹介
あらためましてこんにちは。Paruと申します。 2021年4月からオンラインプログラミングスクールのフィヨルドブートキャンプにてプログラミングの学習をしています。
実は私、先々月5月に55歳になりました！(5が並んでる〜🤣)
フィヨルドブートキャンプでは20代〜30代の受講者さんが中心なので、超ウルトラ高齢受講者ですがお仲間の皆さんと毎日楽しくRubyやJavaScript、Ruby on Railsなどを学び、今回このブログでお知らせする自作サービスのリリースを経て、このたび何とか卒業することができました。
アプリについて
私はBuzzcord(バズコード)という名前のWebアプリを作成しました。
ここでまずご説明しておきたいのは、「バズった」とは何を指しているのか？？ということです。
このアプリでは、
「バズった」 → Discordに投稿された発言がたくさんの人に注目されて【絵文字スタンプが多く押された】こと。つまり「1日あたり一番多く絵文字スタンプが押された発言」がBuzzcordランキング第1位となります！
私が学んでいるフィヨルドブートキャンプのコミュニケーション用Discordで使用してもらえることを想定してこのアプリを作成しましたが、botを作成して、本アプリのリポジトリからコードをクローンしてサーバーに設置していただければ、どのDiscordサーバーでもお使いいただけます。
主な機能
Discord Bot
DiscordにBotが常駐し、公開チャンネル内で発言についた絵文字スタンプを記録していきます。↓絵文字スタンプはこんな感じで押されます。
ユーザーのみなさんにやっていただくことは、いつもどおり「Discordを楽しんで利用する」だけです！
毎日定時にBuzzcordランキング1位のお知らせ投稿
Botが記録した絵文字データについて、日付が変わったら前日分をまとめて集計してランキングを算出します。
そして設定した時間になったら、DiscordへBuzzcordランキング第1位の発言をご紹介するお知らせを自動で投稿します。
Webサイト
WebサイトにDiscord認証でログインしていただくと、Buzzcordの1〜5位をご覧いただけます。 (左:ログイン前、右:ログイン後)
ログインできるのはこのアプリを設定しているDiscordサーバーに所属している方のみとなります。 Botがユーザーの登録情報もウォッチしていますので、サーバーから脱退した方はその瞬間からこのページにログインできなくなります。
できること
このサービスで解決できること
フィヨルドブートキャンプではDiscordにメンターさんや受講生が登録し、情報伝達・交流・ペアプロ・輪読会・学習・雑談の場として活用しています。今や受講生にとってDiscordは「なくてはならない存在」と言えるでしょう。
そして多くの受講生がそれぞれ自分のチャンネルを作成して「分報」として利用しています。 というわけで、チャンネル数がとにかく多い！今ざっと数えてきたら、テキストチャンネルで、公式(みんなが共通の目的で書き込むチャンネル)が75、分報を書き込む個人のチャンネルが235、合わせて310もありました！
多いとは思っていましたが、改めて数えてみるとものすごい数字ですね。 テキストチャンネルは中で「スレッド」と呼ぶ小部屋みたいなものも作成できるので、実質はもっと多くなります。
テキストチャンネルは新しい書き込みがあるとチャンネル名が強調されるのでわかりやすいのですが、これだけチャンネル数が多いと一つ一つのチャンネルを見て回っていたら相当な時間が必要となります。
時間が取れないときは、「昨日、フィヨルドブートキャンプのDiscord内ではどんな発言がみんなから注目されたのか」だけでも知ることができたら、Discord内でのトレンド😆をキャッチアップできるし、いろいろな面で受講生のみんなにとってプラスになるかなと考えました。
こんな人に使って欲しい
お忙しい方、みんなが興味のあることの流れをささっとつかみたい方、入会したばかりの方、などなど。
ランキングの1〜5位をお知らせするWebサイトはスマホからも見られますので、電車などで移動中にざっとチェックするという使い方もできますよ。
技術スタック
- Ruby 3.1.0
- Ruby on Rails 6.1.6
- RSpec
- GitHub Actions
- Heroku
- Bootstrap5
※リリース後にVue.js+TypeScriptを導入していきたいと考えています。
開発中のこと
実際にコードを書くまでの準備段階
エレベーターピッチ〜ペーパープロトタイプ
私はこの段階で非常に、非常〜〜に苦労しました！
日常の不便はさまざまな場面で感じているはずなのですが、それを何とかして解消したいか？と問われるとサービスを改めて自分で作るほどの不満ではなく、たいていのことは既に何らかのサービスがあるという状況でしたので、いざ自作サービスで何を作ろうか？についてアイディアが全く浮かんできませんでした。
そこでサービスの主体を自分ではなく「大切な人たち」としたら、それまでよりはかなりスムーズにアイディアが出てきましたが、「エレベーターピッチ」を作り「ペーパープロトタイプ」で具体的に表現するというプラクティスで、作りたいサービスを端的に簡潔に他の人にわかりやすくそのメリットを説明できるところまで落とし込むというのが私にはとても難しかったです。
何度もメンターさんにアドバイスをいただき、テーマを何度も変更しながら作成してやっとのことで自作サービスの第一歩を踏み出すことができました。
仕様の検討〜技術検証
それまで「外から情報を取得する」「APIを叩く」という経験がなかったので、どうやって実装していけばいいのか、また技術的にはどんな方法を選択するのがよいのか、自分の実力にあった方法は何か、、など調べることや考えることが多くてとても困難な道でした。
行き詰まって困ったときにメンターさんに技術の選択の相談ができたことが本当にありがたかったです。
Discord API
Discordとの情報のやり取りを仲介する仕組みで、これを使いやすくしたラッパーが各種言語で開発されています。 検索すると情報が多く出てくるのがJavaScriptで作成されたDiscord.jsとPythonを使ったDiscord.pyでしたが、Railsを主体としたサービスを作りたいと考えたため、RubyでDiscordとのデータのやり取りができるDiscordrbを選択することにしました。
小さなサンプルアプリを作って挙動を確認しまくる
上記のDiscordrbのGitHubのドキュメントのページを読みまくり、Rubyの小さなプログラムをいくつも書いてデータの取得とどんなデータが取れるのかについて少しずつ慣れていきました。 フィヨルドブートキャンプ内では既にBotを使ったサービスを作った経験のある受講生がいらっしゃって、アドバイスいただけたのもとても大きな力になりました。
↓今回の自作サービスの開発スタート時も大変お世話になったトミーさんのDiscordBot(!youはすでに輪読会には必須アイテム)
途中で仕様を変更した！
データの取得後のランキングの計算方法について、はじめは
- その日1日のうちに投稿された発言について、多く絵文字スタンプが押された順
としていたのですが、よい発言でも夜に投稿されれば反応は少なく不利なのでは？と少し違和感があり、作業の進みが止まってしまいました。
メンターさんと相談している中でこの計算方法がおかしいと指摘いただき、
- ある発言についてその日1日で、多く絵文字スタンプが押された順(発言の投稿日はいつでもよい)
と変更したところ、どの時間帯に投稿された発言でも均等にランクインするチャンスがあり、とてもすっきり！となってWebサイトへ表示する内容もかなり絞り込まれてきて、自作サービスの作成への現実味が増してきました。
集計方法の変更は他の部分への影響もかなりありましたので、最初の技術検証と仕様決めをしっかり行うことの必要性を痛感しました。
いよいよrails new!
仕様の確認と技術検証にたっぷりすぎるくらい時間をかけたので、実際にコードを書き始めてからは約1ヶ月間、かなり集中して作業をすすめることができました。
今回のサービスではCRUDと呼ばれる一般的な動作はないため、通常とは少々違ったRailsの使い方になりましたが、Railsでの開発の楽しさを感じながら取り組んでいきました。
cssフレームワーク
今回はRailsでフロントを書きましたが、今後はVue.jsを導入していきたいと考えているため、共通して使っていけるBootstrap5を使っていくことにしました。 デザインを考えていくのは楽しかったです！が、センスの無さがとにかく辛かったです😭
テストの作成
GWにRSpecを学ぶために1週間のeverydayRails輪読会合宿(←もちろんオンライン)を行って7日間で40時間ほど集中して学びましたので、この自作サービスのテストはRSpecで頑張って作成してみました。
↓GWにRSpec合宿を開催したあとのツイート
昨日無事にeveryday Rails輪読会合宿が終了しましたー🌈7日間で41時間(休憩含)、仲間とRSpecをがっちりと学ぶことができて楽しかったです🎊感謝🙏
— paru@フィヨルドブートキャンプ卒業🎊 (@Paru871) 2022年5月5日
自分の頭と手にRSpecを定着させるべく、今日からはこの本の復習と新しいテスト作成をやってみようと思ってます💪#fjordbootcamp #everydayrailsjp
しかし！APIでのデータの取得やランキングをDiscordへ投稿するという動作が中心の私の自作サービスではmockとstubにかなり苦しめられました。
この経験により初めて取り組んだRSpecにかなり慣れることができましたので、今はもっとテストが書きたい気持ちです！今後はもっと細かい部分まで効率よく正確にテストができるように質を高めて改良していこうと考えています。
タスク管理
GitHubのカンバン機能のProjectを使ってIssueからPullRequestに作業を進めていく流れは自作サービスの前の「チーム開発」のプラクティスで活用されていてやるべき作業が一目瞭然でしたが、自作サービスでは「一人作業なのに役に立つのかな？」と最初は少々疑問でした。
実際使ってみると、自分でIssue登録したものをどんどんこなしてクローズさせるのが楽しい！楽しくなってくると小さなことでもどんどんIssueに登録するので先の見通しもつけやすくなってきたと感じました。
そして何とか完成
スクールで今まで学んできたことをすごい勢いでおさらいして、ほとんど全部の知識を使ったということにとても驚いています！
フィヨルドブートキャンプは現役のエンジニアさんが運営しているスクールなので、本当に実践に沿った「使える技術」を選んでプラクティス化してもらえているのだということがよく理解できました。
この自作サービスへの取り組みを通して新しい技術も学び使うことができて自分にとってはかなりレベルの高いチャレンジでしたが、要所要所をメンターさんやお仲間さんにアドバイスいただき、完成までたどり着くことができました。頑張ってよかったです！
それと、Discord関連のアプリを作られた卒業生の先輩方が書かれたコードは目を皿のようにしてじっくりと読ませていただき、たくさん学ばせていただきました。 ありがとうございました🙇🏻♀️
↓Discordに関する自作サービスを作成された先輩方のリポジトリ github.com
今回の自作サービスの完成までには3ヶ月近くがかかっていることもあり、メンタルの上下や家の事情などなど、さまざまな要因で思うように学習時間が取れず順調ではないときが多々ありましたが、たくさんの方に支えていただきここまでたどり着くことができました。
皆さま本当にありがとうございました。
特に、常に見守りアドバイスくださったスクール運営の駒形さん、町田さん、技術面で何度もペアプロやアドバイスくださったメンターの梅本さん、そしていつでも話を聞いて励ましてくれた輪読会メンバー皆さんやトミーさんには感謝してもしきれません🙇🏻♀️🙇♂️🙇♀️
最後に
長いブログを最後までお読みくださりありがとうございました。
最後に大事なお知らせとお願いをさせていただきます！
