初めに
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
git clone https://github.com/discord/embedded-app-sdk.git
npmでのインストール
npmのインストール
以下のnode.jsのサイトにアクセスし左のLTSをダウンロードし、インストーラーを実行してください。
https://nodejs.org/en
以下のコマンドを実行しnpmのバージョンが返ってきたらnpmのインストールに成功しています。
npm -v
SDKのインストール
以下のコマンドを実行する事でnpmを用いてsdkのインストールをすることができます。
npm install @discord/embedded-app-sdk
cloudflaredのインストール
ローカル開発サーバーをインターネットにブリッジするのに使用します。以下のコマンドを実行する事でインストールできます。
winget install --id Cloudflare.cloudflared
Hello World
デベロッパーポータルサイトでアプリを作成
まず初めにデベロッパーポータルサイトにアクセスし、アプリの作成をする必要があります。以下のポータルサイトにアクセスして普段使用しているDiscordアカウントでログインしてください。
https://discord.com/developers/docs/intro
new applicationをクリックし任意のアプリの名前を入力しcreateを押します。
サイドバーからActivities -> Getting Startedを選択します。Get Startedをクリックしアプリを埋め込みにします。
続いてサイドバーからSettings -> OAuth2を選択し、OAuth2 リダイレクト URLに https://127.0.0.1 と入力します。
サンプルプロジェクトのインストール
Hello Worldのサンプルプロジェクトです。任意のフォルダ内にクローンしてください。
git clone https://github.com/discord/getting-started-activity.git
クローンに成功したらサンプルプロジェクトのディレクトリ内に以下のコマンドを実行し入ってください。
cd getting-started-activity
環境変数を設定する。
以下のコマンドを実行する事で環境設定する事ができます。
copy example.env .env
フロントエンドの起動
以下の3つのコマンドを実行する事でフロントエンドを起動する事ができます。
cd client
npm install
npm run dev
コマンドを実行したら http://localhost:5173/ にアクセスしてください。以下のようにHello Worldと表示されている事が確認できます。
アプリを実行する
まず初めに、以下のコマンドでフロントエンドを起動します。
cd client
npm run dev
ターミナルを別ウィンドウで開き以下のコマンドを実行します。
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を貼り付けてください。
開発者モードを有効にする。
普段使用しているDiscordを立ち上げてください。歯車アイコンのユーザー設定を開き、詳細設定を選択し開発者モードを有効にしてください。
Discordから実行
お疲れ様です。ここまで来たらDiscordでアプリを実行できるようになりました。適当な音声チャンネルに入りアクティビティ アイコン (🚀) をクリックすると作成した、アプリが表示されます。アプリをクリックする事で実行する事ができます。
