Discord内で動作するゲームやアプリの開発キット（SDK）の環境構築からHello World

# 初めに
Discordは3月19日、埋め込みアプリSDK（ソフトウェア開発キット）を公開しました。同開発キットでは、Discord内でプレイ可能なゲームなどのアクティビティを開発することが可能となっています。
これを受けて早速この記事では、SDKの環境構築の方法からHello Worldまでをまとめていきます。

※今後、仕様変更が入る可能性がありますので詳細は以下の公式ドキュメントを参照してください。
https://discord.com/developers/docs/developer-tools/embedded-app-sdk

# 環境構築

### SDKのインストール
SDKのインストールにはGithubリポジトリからcloneするかnpmを用いてインストールする2種類が用意されています。お好きな方法を使用してください。

#### Githubからclone
```cmd:
git clone https://github.com/discord/embedded-app-sdk.git
```
#### npmでのインストール
##### npmのインストール
以下のnode.jsのサイトにアクセスし左のLTSをダウンロードし、インストーラーを実行してください。
https://nodejs.org/en

![スクリーンショット 2024-03-19 154753.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/2a3e4136-a489-acf7-7be5-f2bd54e90fb1.png)

以下のコマンドを実行しnpmのバージョンが返ってきたらnpmのインストールに成功しています。
```cmd:
npm -v
```

##### SDKのインストール
以下のコマンドを実行する事でnpmを用いてsdkのインストールをすることができます。

```cmd:
npm install @discord/embedded-app-sdk
```

### cloudflaredのインストール
ローカル開発サーバーをインターネットにブリッジするのに使用します。以下のコマンドを実行する事でインストールできます。

```cmd:
 winget install --id Cloudflare.cloudflared
```

# Hello World
## デベロッパーポータルサイトでアプリを作成

まず初めにデベロッパーポータルサイトにアクセスし、アプリの作成をする必要があります。以下のポータルサイトにアクセスして普段使用しているDiscordアカウントでログインしてください。
https://discord.com/developers/docs/intro

new applicationをクリックし任意のアプリの名前を入力しcreateを押します。
![8ff7e70a3f6ae2b3c01a7f343069d3fa.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/f4e5deb7-bca3-84a1-5892-4db64b6ccec3.png)

サイドバーからActivities -> Getting Startedを選択します。Get Startedをクリックしアプリを埋め込みにします。
![f1792543430347a9aeaa1104350c657e.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/3ebd24ff-7c96-6bc4-0dc2-362e6c857d94.png)

続いてサイドバーからSettings -> OAuth2を選択し、OAuth2 リダイレクト URLに https://127.0.0.1 と入力します。

![534a7d8e091c580f37a07bf1b687d4d0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/978fd96f-4c09-aa6c-bcbc-e3a5853757b3.png)

## サンプルプロジェクトのインストール
Hello Worldのサンプルプロジェクトです。任意のフォルダ内にクローンしてください。

```cmd:
 git clone https://github.com/discord/getting-started-activity.git
```
クローンに成功したらサンプルプロジェクトのディレクトリ内に以下のコマンドを実行し入ってください。

```cmd:
cd getting-started-activity
```
## 環境変数を設定する。
以下のコマンドを実行する事で環境設定する事ができます。

```cmd:
copy example.env .env
```

## フロントエンドの起動

以下の3つのコマンドを実行する事でフロントエンドを起動する事ができます。
```cmd:
cd client
```
```cmd:
npm install
```
```cmd:
npm run dev
```
コマンドを実行したら http://localhost:5173/ にアクセスしてください。以下のようにHello Worldと表示されている事が確認できます。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/49c92db6-693d-8478-6fe1-3071f632c43c.png)

## アプリを実行する
まず初めに、以下のコマンドでフロントエンドを起動します。
```cmd:
cd client
```
```cmd:
npm run dev
```

ターミナルを別ウィンドウで開き以下のコマンドを実行します。
```cmd:
cloudflared tunnel --url http://localhost:5173
```
上記のコマンドを実行すると
Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  
https://funky-jogging-bunny.trycloudflare.com
というメッセージが出てきます。このURLをコピーしてください。

Discordデベロッパーポータルサイトに戻りサイドバーからActivities->URL Mappingsを選択しTARGETに先ほどのURLを貼り付けてください。

![f358ea7f94a2ef97e85cfec348f0796b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/0a80b90d-98ab-bbd3-281e-b0c50aa64a8b.png)

## 開発者モードを有効にする。
普段使用しているDiscordを立ち上げてください。歯車アイコンのユーザー設定を開き、詳細設定を選択し開発者モードを有効にしてください。

![17be1b4e0481c9180a25bcb234e5f619.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/9d751343-4a78-17ac-af73-50fb2ea78c89.gif)

## Discordから実行
お疲れ様です。ここまで来たらDiscordでアプリを実行できるようになりました。適当な音声チャンネルに入りアクティビティ アイコン (🚀) をクリックすると作成した、アプリが表示されます。アプリをクリックする事で実行する事ができます。

![image (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/ae2440e5-ccbf-16a7-1ae6-f1da820ea719.png)

![スクリーンショット 2024-03-19 180128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/b201d5c2-03e0-ef49-ddf3-18e018b0f480.png)

![GJBH3moasAAjy5u.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/632959/3416519a-78b1-d1e9-556a-53f63521f71d.jpeg)