[個人開発]Discordの使用時間を計測するアプリ　「Discord-Log」を作りました

## はじめに
この度、Discordのボイスチャンネルの使用時間を自動で計測するアプリ**「Discord-Log」**をリリースしました。
このアプリは、[RUNTEQ](https://runteq.jp/)というプログラミングスクール内限定でリリースしているアプリになりますので、サービスリンクは載せていません。
ご了承ください。
####Discord-Log####
![top3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625435/51f53738-2397-aa95-258b-c02a3bb8aa11.png)

## このサービスを作った背景
結論からお伝えすると、私がDiscordの**ボイスチャンネルにいる時間=学習時間**であったため、簡単にその時間を計測できるサービスが欲しいなと感じたからです。
私自身、学習時間を計測する習慣はありませんでしたが、学習するときはDiscordを使うようにしていました。
そのため、**Discordのボイスチャンネルを使用した時間を計測できれば、学習時間がわかるよね**。ってことで、このアプリを作りました。

※ここからは少し長いので、興味がない方は次章へ進んでください。サービスを作った背景を語ります。

みなさんは、こんな言葉を聞いたことはありませんか？

**「エンジニア転職に必要な学習時間　1000時間」**

私のアプリの構想はこの言葉から始まりました。
その時、既にプログラミングを学習し始めて5ヶ月が過ぎていました。

その当時の私は学習時間を計測する習慣がなく、
「自分って今どれくらい学習をしてきてるんだろう。」
「５ヶ月過ぎてるってことはそろそろ1000時間に近づいてきているのかな？」
「てか、本当にプログラミングの力が、身についているのかな？」
「はあ、、、自分はエンジニアになれるのだろうか。。。」
なんてことを考えながら、自分の現在地がわからなかったり、自分のやってきたことに自信が持てなくなり、日々の学習に対するモチベーションが乱高下していました。

**学習時間を計測することと、モチベーションには相関関係があります。**
>[東大生が教える！時間を計って勉強すると圧倒的に勉強効率が上がる5つの理由](https://goukaku-suppli.com/archives/18876)

私自身もそのことを知って、タイマーやポモドーロテクニックのような学習法を試してみたのですが、タイマーを押し忘れたり、記録をするのが面倒になってやめたりと、そう長くは続きませんでした。

[RUNTEQ](https://runteq.jp/)では、コミュニティのコミュニケーションツールとしてDiscordを使用しています。
Discordでは、受講生や卒業生、運営チームと気軽にお話をすることができます。
また、自習室のようにみんなで集まって勉強したり、議論したり、先輩に相談してみたり、勉強の息抜きとして他の受講生と雑談したりなどなど、24時間365日好きなときに利用することができます。
毎日のようにたくさんの受講生や卒業生、運営チームが交流をしています！
いいですよね！！


私も学習の場として、Discordを使用していました。

そんな時に思ったのが、**「Discordの使用時間を自動で測ってくれるアプリがあれば、学習時間を記録せずに済むな」**と、　そう思いました。

私自身やRUNTEQ受講生が日々の学習やコミュニケーションの場として使っているDiscordで、使用している時間を計測して視覚化することがができれば、**「時間を測ること」**と**「時間を記録すること」**の2つの作業を自動で行うことができます。これは正しく一石二鳥、一挙両全です！！

よし！これだ！！

こうして「Discord-Log」を作ってみようと決意しました！

だらだらと、すいません。
お付き合いくださった方ありがとうございます。大好きです。


## サービス概要
Discord-Logは、**登録したDiscordアカウントのボイスチャンネルの使用時間を自動で計算して、グラフとして視覚化するアプリ**です。
このアプリは、Rubyで作成したDiscordのBotアプリと、Railsで作成した「Discord-Log」の合わせ技になっております。

## ターゲットユーザー
RUNTEQの受講生

## 望む未来
このアプリを通じて、1人でも多くの人がモチベーションの波を抑えて1000時間の学習到達目標に到達し、エンジニア転職を成功させること。



## 使い方

####Discord-Log####

**Discordのボイスチャンネルに入室して退出後、画面をリロードすると時間が計測され表示されます**
![556ce3e3db330d117267d32d6e8ca83b.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625435/61130cf9-9044-8b57-f811-b037fb156d3e.gif)

**1.アプリの登録の仕方**

**サーバーの管理者の場合**　
**①「サーバーにBotを登録する」**
サーバーの管理者の方は、自身が管理者になっているサーバーにBotを登録してください。
このBotは、ボイスチャンネルの入室・退出の際にRailsアプリのエンドポイントに対してPOSTリクエストを送信しています。
(※サーバーにBotが登録されていないと使用時間を計測することはできません。)

**②　Discordアプリの「サーバー設定」　→ 「ウィジェット」　→　「ウィジェットを有効化」をクリック**
このウィジェットを有効化することにより、サーバー内のチャンネル情報を取得することができるようになります。

**サーバーの管理者の方とその他のユーザーの共通処理**
**① アプリの「Discord-Logを使う」より、「認証」を行ってください。「認証」が済みますと、アプリに登録したことになります。**
認証からマイページ画面に行く間に、認証処理でユーザーを登録し、DiscordAPIの「ユーザーが所属している全てのサーバー」と「それらサーバーの全てのボイスチャンネル」を取得するエンドポイントに対してGETリクエストを送信しています。
そして、遷移後にはそれらの情報が表示されるようになっています。


**2.機能の紹介**

**①マイページ**
ログイン後に遷移する画面になります。
この画面では、**ログインユーザーの全サーバーのボイスチャンネルの使用時間**を確認することができます。
サイドバーには、**ログインユーザーが所属している全てのサーバー**が表示されます。
その下には、**そのサーバー内にある、ボイスチャンネル**が表示されるようになっています。
(この時、登録されているサーバーやチャンネルが表示されていない時は、「[アプリの登録の仕方](#1アプリの登録の仕方)」の「ウィジェットを有効化」する処理ができてない可能性がありますので、ご確認ください。)


![5045bbbd46d6663b981fe9f6763d0cc5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625435/abc8b3a9-5923-c25e-2ef3-ed7b80c61aa3.gif)





**②サーバー詳細ページ**
サイドバーにある、サーバー名のボタンリンクをクリックすることで、サーバーの詳細ページへ遷移することができます。
この画面では、**そのサーバー内にある、ボイスチャンネルの使用時間**を確認することができます。
![7b6a52596f1789796adfc3d3d8899e46.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625435/39c2199e-668b-c096-8420-2d5e4e80a68a.gif)


**③ボイスチャンネル詳細ページ**
同じく、サイドバーにある、ボイスチャンネル名のボタンリンクをクリックすることで、ボイスチャンネルの詳細ページへ遷移することができます。
この画面では、そのボイスチャンネルの使用時間を確認することができます。
![bf673d68cff45274cb483780d08ad5e6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625435/76bc9cfb-3b5a-03ba-5d4f-6b4c337ed3ba.gif)



## 使用技術

**○Railsアプリ(Discord-Log)**
>Ruby 2.6.6
Ruby on Rails 6.0.3
Discord API　
slim 
sorcery 
chartkick
Bootstrap
config
dotenv-rails



**○Rubyアプリ(Botアプリ)**
>Ruby 2.6.6
discordrb
net/http
uri
json


## 開発期間
約1.5ヶ月



## ER図
![Discord_Log-Page-1 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625435/29b9c873-554f-5663-52cf-3b517acb150b.png)





## 工夫したこと
####1.アプリの継続利用における障壁を無くすこと####
コンセプトとしては、**「めんどくさがり屋な自分でも使いたいと思えるか？」**ということを念頭に置いて、自問自答しながら作成しました。
このアプリに、**一度登録すると、自動的にBotとRailsアプリのDBに時間が保存・計測されます。**
なので、**ユーザーは一度登録をして、Discordの使用時間を振り返りたいと思ったタイミングで再度アプリに訪問するだけ**で、それまでの使用時間が表示されます。
これによって、**毎日の学習時間を自分で記録する手間が省けます。**

これならめんどくさがり屋な私でも、使いやすいですよね！



####2.Discordを普段と同じように使って、時間が計測されるようにすること####
DiscordのBotは、**サーバー内のユーザーの音声ステータスが変更された時に動いています**。
(音声ステータスとは、DiscordのカメラのON・OFFやミュートのON・OFF、スピーカーのON・OFFなどです。)
![jj.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625435/19e39970-3460-df57-fc50-194c28a3c815.png)

この**ユーザーの音声ステータスが変わったタイミングで、そのユーザーがボイスチャンネルにいるかどうかBotが確認しています**。
ボイスチャンネルにユーザーが居ればどのユーザーが、どのチャンネルに入室したかの入室処理を、ユーザーが居なければどのユーザーが、どのチャンネルを退出したかをRailsアプリにPOSTリクエストで送信しています。

チャンネルに入室・退出した際は必ずこれらのアクションが行われるため、このBotのイベントが発火します。


しかし、以下のように２つの問題が起きました。

**①音声ステータスが変わるごとに入室リクエストが送られてしまう問題**

**②ボイスチャンネルの横移動をしたら前居たボイスチャンネルが退出処理されていない問題**

これらを解決しない限り、普段通りにDiscordを使いながら簡単に学習時間の計測ができません。
なのでめんどくさがり屋な私は使いたくないなと思いました。

どのように解決したのかは、長くなるので割愛しますが、これらを解決することで、Discordを普段通りに使用しても時間が計測されるようになりました。

![d1892ce4a45332fe57da3f1cb2b5b7f5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/625435/fae18c9d-373a-7f95-3f8f-964c04c0b87f.gif)





####3.サーバーやボイスチャンネル名の名前の変更や削除に対応すること####
Discordアプリで、サーバーやボイスチャンネルの名前を変更したり、削除したりすることはよくあると思います。
変更の場合は、DBにあるデータをログイン時のAPIを叩いたタイミングで更新するようにしました。
削除の場合は、ログイン時のAPIを叩いたタイミングでDBにあるサーバー(もしくはチャンネル)のIDだけを配列をまず取得します。それらをAPIを叩いて取得した情報と照らし合わせ、取得してきた情報があれば配列から削除します。最後に配列から残ったIDをDBから削除するようにしました。


## 終わりに
初めての投稿で、拙い文章で申し訳ないです。
それでも、最後まで読んでくださりありがとうございました。

もし大人数のサーバーで勉強するのが中々難しいよって人もいると思います。
その時は、個人でサーバーを作って、使用することもできます。(ちなみに僕もそうやって最初は使っていました。)

僕のように自分の現在地がわからずにモチベーションを下げてしまうことなく、学習を続けてくれる受講生が1人でも増えればいいなって思っています。