🚀

Discordでアクティビティをつくってみる

2024/03/20に公開

Discord

discordactivity

tech

ことしの3/18、Discord から アクティビティを実装するための開発キット が公開されました。
これは Discord アプリ内の「アクティビティ」というミニゲーム機能に、自分で作成したゲームを追加できるというものです。

とてもおもしろそうだったので、入門してみました。

環境

WSL2 (Ubuntu 22.04)

下準備

cloudflareをインストールする

まず、インストールするためのシステム種別を確認する。
WSL上で以下のコマンドを実行する。

uname -m

たとえば x86-64 だった場合、以下のように表示される。

確認出来たら、以下のページで対応するシステム種別の.deb ファイルのリンクをコピーする。

その後、WSL上で以下を実行。

wget <取得したリンク>

問題なくインストールできているかは、以下のように確認できる。

$ cloudflared --version
cloudflared version 2024.3.0 (built 2024-03-20-1010 UTC)

手順

ステップ１：新しいアプリの作成

Discord Developer Portal にアクセスする。

Discord Developer Portal — API Docs for Bots and Developers

そしたら、右上「New Application」から新しいアプリの作成。

いい感じの名前を入力して、「Create」を押す。
ポリシーに同意するのを忘れずに。

これでアプリの作成が完了した。

続いて、アクティビティの設定をする。
サイドバーから「ACTIVITIES」→「Getting Started」をクリック。

これでアクティビティの登録はできた。設定はあとでやっていく。

次は、認証に必要な情報をメモしていく。
認証形式には OAuth2 が使われている。このチュートリアルでは知らなくても大丈夫だけど、知っておいて損はないかも。

ひとまず、アプリの client IDとclient secretをコピーする。
サイドバーから「OAuth2」をクリックし、認証情報画面を開く。

上部にある「Client information」にある「CLIENT ID」「CLIENT SECRET」をコピーしておく。
メモ帳とかに記録しておくとよいかも。

また、ひとつ下の「Redirects」から、リダイレクトURLを設定しておく。
「Add Redirect」をクリック。

すると、入力項目が出てくる。
今回はとりあえずhttp://localhostにしておく。

最後に、画面下部の「Save Changes」ボタンをクリックして変更を保存しておく。

ステップ２：プロジェクトをセットアップする

今回は、Discordが用意してくれたテンプレートを使ってみる。
WSL上でリポジトリを置きたい場所にcdし、以下のコマンドでテンプレートをクローンする。

git clone git@github.com:discord/getting-started-activity.git
cd getting-started-activity

すると、以下のような構造のリポジトリが確認できる。

├── client
│   ├── main.js       -> フロントの処理
│   ├── index.html
│   ├── package.json
|   |── rocket.png
│   ├── vite.config.js
├── server     
│   ├── package.json
│   ├── server.js     -> バックの処理
└── example.env

なんとなく見てもわかる通り、Web と同じような技術で実装されている。
公式のドキュメントでも以下のように書いてある。

Discord アクティビティは、Discord 内で実行できる Web アプリケーションです。 これにより、Discord 内でリッチなマルチプレイヤーエクスペリエンスを構築できるようになります。

このチュートリアルのテンプレートには、バニラ JavaScript、Node.js、Express、およびViteを備えた最小限のフロントエンドとバックエンドが含まれています。

アプリケーションを構築するときは、好みのバックエンド言語とフレームワークを使用できますが、このガイドでは JavaScript に焦点を当てます。

まずは、環境変数（client_id、client_secret）を書くための.envファイルを作成する。

今回はexample.envというテンプレートファイルが用意されているので、これをコピーして.envに名前を変更しておく。

ここからは.envを編集していく。
テンプレートの値を、適宜コピーしておいた認証情報に置き換える。

VITE_DISCORD_CLIENT_ID=<client_id>
DISCORD_CLIENT_SECRET=<client_secret>

これで、システムから認証情報が使えるようになった。

そしたら、一度フロントエンドを Web ページとして起動してみる。

cd client
npm install
npm run dev

npm run devを実行すると、以下のようにリンクが表示される。

$ npm run dev

> getting-started-activity@0.0.0 dev
> vite

  VITE v5.0.12  ready in 348 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

このリンクをクリックするか、ブラウザーのアドレスバーに入力することで、Web からページを確認することができる。

ステップ３：SDK をインストールする

現状、Web の技術を使って Web ページを表示しただけにすぎない。
ここからは、Discord の SDK（開発キット） を実際に使って、さっきの画面を Discord 内の アクティビティ に表示させていく。

まずは、clientフォルダに移動し、SDK をインストールする。

cd client
npm install @discord/embedded-app-sdk

そしたら、main.jsに数行追加する。

// SDK をインポート
import { DiscordSDK } from "@discord/embedded-app-sdk";

import "./style.css";
import rocketLogo from '/rocket.png';

// SDK のインスタンスを生成
const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID);

setupDiscordSdk().then(() => {
  console.log("Discord SDK is ready");
});

// SDK を介してアプリにアクセス
async function setupDiscordSdk() {
  await discordSdk.ready();
}

document.querySelector('#app').innerHTML = `
  <div>
    <img src="${rocketLogo}" class="logo" alt="Discord" />
    <h1>Hello, World!</h1>
  </div>
`;

注意として、ここからは先ほどのように Web ページとして確認することはできなくなる。

ステップ４：Discord でアプリを実行してみる

ここまで出来たら、あともう少しでアプリを実行できる。

まずはclientに移動し、サーバーを立ち上げる。

cd client
npm run dev

そしたら先ほどと同じようにリンクが表示されるので、これをコピーする。

$ npm run dev

> getting-started-activity@0.0.0 dev
> vite

  VITE v5.0.12  ready in 348 ms

  ➜  Local:   http://localhost:5173/   <- これをコピー
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

そしたら、cloudflaredでネットワークトンネルを開く。
<url>にはさっきのURLをペーストする。

cloudflared tunnel --url <url>

うまくいくと以下のようにURLが生成されるので、これをコピー。

$ cloudflared tunnel --url http://localhost:5173

...

2024-03-20T11:32:44Z INF Thank you for trying Cloudflare Tunnel. Doing so, without a Cloudflare account, is a quick way to experiment and try it out. However, be aware that these account-less Tunnels have no uptime guarantee. If you intend to use Tunnels in production you should use a pre-created named tunnel by following: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps
2024-03-20T11:32:44Z INF Requesting new quick Tunnel on trycloudflare.com...
2024-03-20T11:32:49Z INF +--------------------------------------------------------------------------------------------+
2024-03-20T11:32:49Z INF |  Your quick Tunnel has been created! Visit it at (it may take some time to be reachable):  |
2024-03-20T11:32:49Z INF |  https://yt-zzz-yyy-xxx.trycloudflare.com  <- これをコピー                        |
2024-03-20T11:32:49Z INF +--------------------------------------------------------------------------------------------+

...