スムージーの備忘録

Discord Embeddedをとりあえず動かしてみた。

動作環境

  • Node v20.11.1
  • Windows 11
  • Git

とりあえず公式のHello,worldデモを動かすまで

  1. 諸々環境作成に必要なものをインストール

Node.jsインストール

Node.jsダウンロード先

embedded app SDKインストール

PowerShell
コピー 
npm install @discord/embedded-app-sdk

cloudflaredインストール

参考

cloudflared
コピー 
winget install --id Cloudflare.cloudflared

  1. Discord側の設定

New Applicationから新規アプリを作成する。

DiscordBot作成画面

OAuth2からCLIENT IDを控える

CLIENT ID と CLIENT SECRET の両方が必要なので注意

CLIENT ID

ACTIVITIESよりGetting Startをクリックする。 ACTIVITIES

ここからアクティビティの画面の向きや対象プラットフォームを指定できる。 Settings

  1. サンプルコードの実行

サンプルコードをGitからクローンする。

Git
コピー 
git clone https://github.com/discord/getting-started-activity.git

getting-started-activity/example.env このファイルを.envにリネームする。 CLIENT IDなどを入力する。

.env
コピー 
VITE_DISCORD_CLIENT_ID=CLIENT IDをここに入力
DISCORD_CLIENT_SECRET=CLIENT SECRETをここに入力

getting-started-activity/client/ フォルダからnpm install→npm run devを実行。 実行

表示されているURLを押すとブラウザ上で実行結果が見れる。 Web実行画面

Discordで表示するにはもう一つ作業が必要となる。 別途PowerShellにて

PowerShell
コピー 
cloudflared tunnel --url http://localhost:5173

URLは先程のnpm run devで実行されたときに表示されたURLを指定する。

四角で囲まれたところにURLが記載されているのでこれを控える。 cloudflared

DiscordのデベロッパーポータルサイトのURL MappingsにURLを登録する。 デベロッパーポータルサイト

最終確認

  • クローンしたサンプルコードのClientから実行している。
  • cloudflaredを実行し生成されたURLをポータルサイトに登録している。

以上の二点を満たせてる状態になっていれば実行できるはずです。

Discordの通話に参加しアクティビティを選択する画面を開くと自分のアクティビティが存在するはずです。

アクティビティ選択画面

それを選択すると以下のようにサンプルが実行され表示されます。

実行結果

ついにアクティビティを自分で作れるようになったのでBot制作以外にもやれることが増えて最高です。
Webつよつよ人間は本領発揮できそうなのでこれからが楽しみですね。

←記事一覧
© 2024 Smoothie1023.