この記事はまだ編集中です!
Embedded App SDKを使用すると、Discord内でリッチなマルチプレイヤーエクスペリエンスを構築できます。アクティビティは、Discord内のマルチプレイヤーゲームやソーシャル体験です。アクティビティはデスクトップ、ウェブ、モバイルのDiscordクライアント内で実行できるiframeでホストされたウェブアプリケーションです。Embedded App SDK は、Discord と iframe アプリケーション間の通信を処理します。
※引用元:https://github.com/discord/embedded-app-sdk/
Embedded App SDKを使用したDiscordアクティビティの構築については、https://discord.com/developers/docs/activities/overview
- Embedded App SDK - Embedded App SDKを使いこなす
- Activity Examples - Discordアクティビティの使用例
- Technical chat on Discord - DiscordDevelopersのDiscord鯖がある
#activities-dev-help
で質問とかされているようだ
npm install @discord/embedded-app-sdk
[root@~]$ npm install @discord/embedded-app-sdk
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: '[email protected]',
npm WARN EBADENGINE required: { node: '>=18.0.0', npm: '>=8.0.0' },
npm WARN EBADENGINE current: { node: 'v12.22.9', npm: '8.5.1' }
npm WARN EBADENGINE }up to date, audited 15 packages in 2s
1 package is looking for funding
runnpm fund
for detailsfound 0 vulnerabilities
node -v
-> v12.22.9
npm -v
-> 8.5.1
sudo apt purge nodejs npm -y
sudo apt install nodejs
[root@~]$ sudo apt install nodejs
パッケージリストを読み込んでいます... 完了
依存関係ツリーを作成しています... 完了
状態情報を読み取っています... 完了
以下のパッケージが自動でインストールされましたが、もう必要とされていません:
adwaita-icon-theme at-spi2-core dconf-gsettings-backend dconf-service fontconfig gsettings-desktop-schemas gtk-update-icon-cache gyp hicolor-icon-theme humanity-icon-theme javascript-common
(省略)
これを削除するには 'sudo apt autoremove' を利用してください。
以下のパッケージが新たにインストールされます:
nodejs
アップグレード: 0 個、新規インストール: 1 個、削除: 0 個、保留: 0 個。
32.8 MB 中 0 B のアーカイブを取得する必要があります。
この操作後に追加で 200 MB のディスク容量が消費されます。
(データベースを読み込んでいます ... 現在 150619 個のファイルとディレクトリがインストールされています。)
.../nodejs_21.7.1-1nodesource1_amd64.deb を展開する準備をしています ...
nodejs (21.7.1-1nodesource1) を展開しています...
dpkg: アーカイブ /var/cache/apt/archives/nodejs_21.7.1-1nodesource1_amd64.deb の処理中にエラーが発生しました (--unpack):
'/usr/include/node/common.gypi' を上書きしようとしています。これはパッケージ libnode-dev 12.22.9~dfsg-1ubuntu3.4 にも存在します
dpkg-deb: エラー: ペースト subprocess was killed by signal (Broken pipe)
処理中にエラーが発生しました:
/var/cache/apt/archives/nodejs_21.7.1-1nodesource1_amd64.deb
E: Sub-process /usr/bin/dpkg returned an error code (1)
sudo apt autoremove
sudo apt install nodejs
node -v
npm -v
npm install @discord/embedded-app-sdk
成功!!
[root@~]$ npm install @discord/embedded-app-sdk
up to date, audited 15 packages in 2s
1 package is looking for funding
runnpm fund
for detailsfound 0 vulnerabilities
Activities -> GettingStarted
をクリックgit clone [email protected]:discord/getting-started-activity.git
cd getting-started-activity
※このgit cloneは、getting-started-activityディレクトリにあるテンプレート取得してくれるcp example.env .env
cat .env
Q. なぜクライアントIDの前にVITE_があるのか?
A. DISCORD_CLIENT_ID環境変数の前にVITE_を付けることで、クライアント側のコードからアクセスできるようになる。このセキュリティ対策により、ブラウザでアクセス可能な変数のみが利用可能となり、その他の環境変数はすべてプライベートのままとなる
cd client
npm install
npx vite --host
npm install @discord/embedded-app-sdk
git diff
redy
イベントの確認も、async/await関数を使用して設定する import './style.css'
import rocketLogo from '/rocket.png'
document.querySelector('#app').innerHTML = `
<div>
<img src="${rocketLogo}" class="logo" alt="Discord" />
<h1>Hello, World!</h1>
</div>
`;
// 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);
// Discord SDKのセットアップ
setupDiscordSdk().then(() => {
console.log("Discord SDK is ready"); // Discord SDKが準備完了
});
// Discord SDKのセットアップを非同期で行う関数
async function setupDiscordSdk() {
await discordSdk.ready();
}
// HTMLの描画
document.querySelector('#app').innerHTML = `
<div>
<img src="${rocketLogo}" class="logo" alt="Discord" /> <!-- Discordのロゴ画像 -->
<h1>Hello, World!</h1> <!-- Hello, World! -->
</div>
`;
SDKをアプリに追加すると、Webブラウザ内でアプリを表示できなくなる。次のステップでは、ActivityをDiscord内で実行します。Discordでアプリを表示する方法について説明する
npx vite --host
cloudflared tunnel --url http://XXX.XXX.XXX.XXX:5173/
(続き執筆中)