Wonderland EngineでDiscordアクティビティを作成する

Discordアクティビティを作成したいですか？Discordアクティビティはウェブベースなので、Wonderland Engineはゲーム内で高パフォーマンスの3Dレンダリングを実現するための優れた選択肢です。

ここでは、開始するためのステップ・バイ・ステップガイドを紹介します！

Wonderland Engineプロジェクトの例

まず、Discordアクティビティの例のリポジトリをローカルマシンにクローンしましょう。

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

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

新しいDiscordアプリケーションの作成

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

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

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

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

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

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

アクティビティのInstallationセクションを見つけ、インストールリンクをブラウザで開いてください。開いたら、Add to my Appsをクリックしてください。

Discordアクティビティの設定と実行方法についての完全なガイドは、Discord Docsをご覧ください。

ローカルでの実行

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

(serverフォルダ内で) npm run devとnpm run tunnelでサーバーを実行します:

1Requesting new quick Tunnel on trycloudflare.com...
2+--------------------------------------------------------------------------------------------+
3|  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
4|  https://alice-in-wonderland.trycloudflare.com                                             |
5+--------------------------------------------------------------------------------------------+

Discord Developer Portalで、DiscordアプリのURLマッピングをCloudflareトンネルが提供するURLに/をマップするように更新します。
Wonderland EditorでDiscordActivityExample.wlpを開きます。
開発者モードを有効化します。

私たちがnpm run devで開始したnpmサーバーは、Cloudflareトンネルを介してWonderland EditorのウェブサーバーとWebSocketをリバースプロキシします。

アクティビティの開始

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

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

Wonderland Cloudへの展開

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

1npm install -g @wonderlandcloud/cli

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

次に、デプロイスクリプトを実行してフロントエンドとバックエンドコードをWonderland Cloudにデプロイするために必要な調整をステップ・バイ・ステップで解説します。

create-activity-page: 新しいプロジェクトデプロイを作成します。作成されたプロジェクトのフルネームに注意してください。
build-server: Dockerイメージをビルドします。<ImageTag>を選択したDockerイメージタグ名に置き換えます。
push-server: Dockerイメージを公開します。
create-api: Discord認証サービスを公開します。プレースホルダーを置き換えます: DISCORD_CLIENT_SECRETはDiscordアプリのOAuthページから取得できます。これにより、Wonderland Cloud APIデプロイメントが作成されます。
create-api-path: APIデプロイメントをページドメインの’/api’パスにリンクします。

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

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

すべての手順に従った場合、Discordアクティビティを開始できるはずです。参加時に認証確認ウィンドウが表示され、クリックするとウェルカムメッセージが変更され、あなたの名前が表示されるはずです。

それ以外の場合は、私たちのDiscordサーバーに参加してください。喜んでサポートいたします！

私たちのDiscordコミュニティに参加する

Last Update: January 23, 2026