ゲームのプレイ履歴を取得・表示するwebアプリ

# プロジェクト概要
PCゲームのプレイ履歴を見ることができるアプリを作成しよう！


# プロジェクトの目的
- stemaやepicでプレイ時間を見ても、それぞれでダウンロードしたゲームのタイトルでしか確認することができない。
そのため、discordのアクティビティからゲームのプレイ情報を取得することによってゲームのプレイ時間を確認できるようにしようというのが目的～


# 使用する技術(言語、ライブラリ)
> Vite
React
Tailwind CSS
discord.js
supabase
Render
Uptime Robot
Varcel

# Viteとは
Viteはより速く無駄のない開発体験を提供することを目的としたビルドツールです。
ホットリロードに対応しており、Reactの環境構築なども簡単にできて良き

https://ja.vite.dev/

# Reactとは
UIを構築するためのjsライブラリです。
コンポーネントごとに作成できるため再利用性は保守性が高くなる

https://ja.react.dev/

# Tailwind CSSとは
ユーティリティファースト (Utility-First)」 というコンセプトを特徴とする、非常に人気のあるCSSフレームワークです。
クラスにTailwind CSSが用意したユーティリティクラスを指定することで容易にCSSを適用させることが可能。
ただ、途中からクラスが増えすぎてよくわからんくなる

https://tailwindcss.com/

# discord.jsとは
Discord.js は、Node.js を使って Discord API と簡単にやり取りするための強力なライブラリです。主に、Discord ボットを作成するために利用されます。
GASなどでもbot作成できますが、GASではコマンドに反応して実行する処理を書けないためdiscord.jsにしました。

https://discord.js.org/

# supabaseとは
ウェブアプリケーションやモバイルアプリケーションを開発する際に必要となる、データベース、認証、ストレージ、API といったバックエンド機能をオールインワンで提供してくれます。これにより、開発者はフロントエンドの開発に集中でき、開発スピードを大幅に向上させることができます。

https://supabase.com/

# Renderとは
Render (レンダー) は、ウェブアプリケーション、バックグラウンドワーカー、データベースなどを簡単かつ迅速にデプロイ・運用できる最新のクラウドプラットフォーム (PaaS) です。
Renderを使用してdiscordのbotをデプロイしました。

https://render.com/

# Uptime Robotとは
Uptime Robot は、ウェブサイトやサーバー、API、そしてボットなどが正常に稼働しているかを監視してくれるサービスです。
指定したウェブサイトの URL に定期的にアクセスし、正常なレスポンス (通常は HTTP ステータスコード 200) が返ってくるかを確認します。ウェブサイトのダウンタイム監視に最も一般的に使われます。
Renderをデプロイしたときに非アクティブな状態が15分間続くスリープしてしまうため、対策としてUptime Robotによって定期的にhttpリクエストを送ります。

https://uptimerobot.com/

# Varcelとは
Vercel  は、フロントエンド開発者のために設計されたクラウドプラットフォームです。特に、人気の React フレームワークである Next.js の開発元として知られており、Next.js アプリケーションのデプロイとホスティングに最適化されています。

https://vercel.com/

# プレイ情報を取得
まず、コマンドによって追跡するユーザーをsupabaseに保存
ユーザーのアクティビティが始まるとプレイ開始時間を取得し、アクティビティが終了するとsupabaseにタイトルとプレイ時間を保存

:::note
VSCodeの拡張機能であるdiscord presenceを使用することでアクティビティに現在使用しているファイルを確認できるようになります。
そこからゲームのプレイだけでなく、VSCodeで使用していたファイルも保存できるようにしました。
:::

### `user` テーブル
追跡するユーザーを格納します。

| カラム名 | データ型 | 説明 |
| :--- | :--- | :--- |
| `id` | `int8` |  |
| `created_at` | `timestamptz`| プロファイル作成日時 |
| `user_id` | `text` | discordのユーザーID |

### `game` テーブル
プレイ情報を保存します。

| カラム名 | データ型 | 説明 |
| :--- | :--- | :--- |
| `id` | `int8` |  |
| `created_at` | `timestamptz`| プロファイル作成日時 |
| `title` | `text`| ゲームタイトル |
| `time` | `int4`| ゲームのプレイ時間 |
| `user_id` | `text` | discordのユーザーID |
| `language` | `text` | 使用していたプログラミング言語 |

# webアプリでプレイ情報を確認
- Discordログイン認証（OAuth2）
- プレイ時間のグラフ作成
- みんながプレイしている最近のトレンド(1週間)

# デプロイしたやーつ
自作したBotの招待url

https://discord.com/oauth2/authorize?client_id=1361532077732008139&permissions=2147485696&redirect_uri=https%3A%2F%2Fvaztyxvyvhrhwcdabsnh.supabase.co%2Fauth%2Fv1%2Fcallback&integration_type=0&scope=bot

webアプリ

https://game-library-alpha-rosy.vercel.app/

# Step 1: Botをサーバーに招待
Botをdiscordのサーバーに招待し、Botがユーザーのアクティビティを取得することでぽプレイ時間を確認することができるようになります！

# Step 2: コマンドで設定
Botを招待したのちに、コマンドで設定をすることでアクティビティを取得するかどうかを設定します。
`/trackme` ：プレイ時間を追跡するように設定
`/untrackme`：プレイ時間を追跡を解除するように設定

# Step 3: Webアプリで閲覧
GameLibraryで確認
↓グラフの例
![example.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4058543/d04c7d4d-8ed4-4458-bb96-03583039b5fd.png)


# Step 4: VsCodeを使用している人へ
VsCodeの拡張機能であるDiscord Presenceを導入し、discordのアクティビティに開いているファイルを表示できるようにすることで、GameLibraryでも使用している言語の情報を見ることができるようになります。


# さいごに
めんどいのでこれで終わり
気が向いたらこーどものせｍ