Wonderland EngineでDiscordアクティビティを構築する

Wonderland EngineでDiscordアクティビティを構築する

Jonathan Hale

Discordアクティビティを作成したいですか？Discordアクティビティはウェブベースであるため、高性能な3Dレンダリングが必要な場合、Wonderland Engineは最適です。

こちらが始めるためのステップバイステップガイドです！

無料でサインアップ

Wonderland Engineプロジェクト例 

はじめに、Discord Activity example repositoryをローカルマシンにクローンします。

git clone https://github.com/WonderlandEngine/discord-activity-example.git

次に、Discord Developer Portalで新しいDiscordアクティビティを作成し、例のコードを実行できるよう設定します。

新しいDiscordアプリケーションを作成する 

まず、Discord Developer Portalで新しいアプリケーションを作成します。作成後に、APPLICATION_IDをDISCORD_CLIENT_IDとして例のコードのindex.jsファイルにコピーして保存します。

次に、example.envファイルをコピーして.envとして保存します。この中でDISCORD_CLIENT_IDをあなたのAPPLICATION_IDで置き換えてください。

Screenshot: Create an activity

次に、Discordアクティビティがユーザーを認証し、ユーザー情報を取得できるようにOauthフローを設定します。

DiscordアクティビティのOAuth2メニューを開き、リダイレクトURIにhttp://127.0.0.1を入力します。次に、Reset Secretをクリックして新しいDISCORD_CLIENT_SECRETを生成し、ローカルの.envファイル内の秘密を生成したものに置き換えます。

Screenshot: Activity OAuth Settings

最後に、アクティビティがチャネルから起動できるようにアクティビティを有効にします。

Screenshot: Enable Activity

アクティビティを開始するには、あなたのDiscordアカウントのアプリに追加する必要があります。

これを行うには、アクティビティのインストールセクションを見つけ、ブラウザでインストールリンクを開きます。 開いたらアプリに追加をクリックします。

Screenshot: Install Activity

Discordアクティビティのセットアップと実行方法の完全なガイドはDiscord Docsで見つけることができます。

ローカルでの実行 

私たちのゲームをDiscord内で見るのはもうすぐです！ターミナルを開き、serverフォルダに移動します。ここでnpm installを実行してすべての依存関係をインストールします。次に下記の手順に従ってローカルでアクティビティに接続します。

  1. (serverフォルダ内で) サーバーをnpm run devとnpm run tunnelで実行します。
Requesting new quick Tunnel on trycloudflare.com...
+--------------------------------------------------------------------------------------------+
|  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
|  https://alice-in-wonderland.trycloudflare.com                                             |
+--------------------------------------------------------------------------------------------+
  1. Discord Developerポータルで、DiscordアプリのURLマッピングを更新し、cloudflare tunnelが提供するURLに/をマップします。
    Screenshot: Activity URL Mapping
  2. Wonderland EditorでDiscordActivityExample.wlpを開きます。
  3. 開発者モードを有効にするをDiscordクライアントで有効にします。

npm run devで開始したnpmサーバーは、Wonderland Editorのウェブサーバーとウェブソケットをcloudflareトンネルを通してリバースプロキシします。

アクティビティを開始する 

Discordのテストサーバーに移動し、任意のボイスまたはテキストチャネルで、開発中のアクティビティが表示されるはずのアプリランチャーを開きます。アクティビティが表示されない場合は、名前を検索してみてください。

アプリをクリックすると、Discord内からローカルで実行中のアプリが起動します！

Screenshot: Launch Activity

Wonderland Cloudへのデプロイ 

Wonderland EngineプロジェクトをWonderland Cloudにデプロイし、Discord認証サービスをデプロイしてリンクするためにWonderland Cloud CLIをインストールしましょう。

npm install -g @wonderlandcloud/cli

Wonderland EngineアカウントページでWonderland APIトークンを作成し、プロジェクトのルートディレクトリにwle-apitoken.jsonとして保存します。

次に、フロントエンドとバックエンドコードをWonderland Cloudにデプロイするために後で実行する必要があるデプロイメントスクリプトの必要な調整をステップバイステップで見ていきましょう。

  1. create-activity-page: 新しいプロジェクトデプロイメントを作成します。作成したプロジェクトの完全な名前に注目してください。
  2. build-server: Dockerイメージをビルドします。<ImageTag>を選択するDockerイメージのタグ名に置き換えます。
  3. push-server: 生成したDockerイメージを公開します。
  4. create-api: Discord認証サービスを公開します。プレースホルダを置き換えてください。DISCORD_CLIENT_SECRETはDiscordアプリのoauthページから入手できます。これにより、新たなWonderland Cloud APIデプロイメントが作成されます。
  5. create-api-path: APIデプロイメントを’/api’パス上のページドメインにリンクします。

最後に、Wonderland Cloudへのデプロイメントから得たプロジェクトドメインをDiscordアプリのURLマッピングに追加します。

ドメインがわからない場合は、デプロイが成功した後に作成されるdeployment.jsonファイルで確認できます。

すべての手順を正しく実行した場合、Discordアクティビティを開始できるはずです。参加した際に認証確認ウィンドウが表示され、それをクリックすると、ウェルカムメッセージが変更されてあなたの名前を含むようになります。

そうでない場合は、私たちのDiscordサーバーに参加してください。喜んでお手伝いします！

Discordコミュニティに参加する
Last Update: September 9, 2025

最新情報をお届けします。