Discord埋め込みアプリの公式サンプルの取得とインストールと実行確認1/2

Discord は、さまざまな趣味ごとに用意されたサーバーの中で会話や交流が楽しめるプラットフォームです。

2024 年 3 月に Discord 上でプレイできるアプリを作成できる「Discord 埋め込みアプリソフトウェア開発キット (SDK) 」が公開されたので、ローカル環境公式サンプルをダウンロード・インストールして、実行結果をウェブブラウザで確認します。

Discord トップページの一部 20240423...

パート1(全2話)では、「Discord 埋め込みアプリソフトウェア開発キット (SDK) 」を用いた公式サンプルダウンロード・インストールする手順を紹介します。
環境変数を定義する .env ファイルや、 npm install コマンドがインストールする内容についても紹介します。

前回の記事

前回は、Discord 上で動作するアプリを作成するための「Discord 埋め込みアプリソフトウェア開発キット (SDK) 」のインストールの手順を紹介しました。
PC ローカルで開発中の Discord 埋め込みアプリをインターネット上に公開して安全にテストするために cloudflared をインストールする手順も紹介しました。

公式のガイド

Discord 上でプレイできるゲームの作り方については公式の「Discord Developer Portal — Documentation — Getting Started」を参考にします。

そのページの中に書いてあるように、アプリ開発の際は、他の人が利用していない自分のサーバーでビルドおよびテストを行うように書かれています。

アプリ開発にあたっては、他の人がアクティブに利用していないサーバーでビルドおよびテストを行ってください。自分のサーバーがまだない方は、無料で作成できます

Discord Developer Portal — Documentation — Getting Started

自分用の Discord のサーバーを作成する手順については後日公開の記事を参照してください。

公式サンプルのダウンロード

git コマンドで公式サンプルのソースなどをダウンロードします。

discord 埋め込みアプリの公式サンプルを git でカレントディレクトリにダウンロードします.

コマンドプロンプトのカレントディレクトリの直下に getting-started-activity フォルダが作成されてダウンロードされるので、 git コマンドを入力する前に、ダウンロード先の上位のディレクトリに cd コマンドで移動しましょう。

cd コマンドで異なるドライブのディレクトリに移動するには /d をつけます。
以下の例では mkdir でダウンロード先のディレクトリを作成しながら移動しました。

Microsoft Windows [Version 10.0.19045.4291]
(c) Microsoft Corporation. All rights reserved.

C:\Users\User>cd /d g:\dev

g:\Dev>mkdir Discord

g:\Dev>cd Discord

g:\Dev\Discord>mkdir EmbeddedApp

g:\Dev\Discord>cd EmbeddedApp

ダウンロード先のディレクトリに移動したら、以下の git コマンドで、カレントディレクトリの下に公式サンプルをダウンロードします。

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

git コマンドは筆者の環境では数秒で完了しました。

g:\Dev\Discord\EmbeddedApp>git clone https://github.com/discord/getting-started-activity.git
Cloning into 'getting-started-activity'...
remote: Enumerating objects: 23, done.
remote: Counting objects: 100% (14/14), done.
remote: Compressing objects: 100% (12/12), done.
Receiving objects:  69% (16/23)
Receiving objects: 100% (23/23), 47.23 KiB | 9.45 MiB/s, done.
Resolving deltas: 100% (3/3), done.

コマンドプロンプトのカレントディレクトリをエクスプローラで開くと getting-started-activity フォルダが作成されています。

discord 埋め込みアプリの公式サンプルをダウンロードした後のフォルダ.

環境変数を設定した .env の作成

ダウンロードにより作成されたフォルダ内にある example.env をコピー・リネームして .env ファイルを作成します。

discord 埋め込みアプリの公式サンプルの example.env をコピー&リネームして .env ファイルを作成します..

コマンドプロンプトで copy コマンドを使って同様のことができます。

copy example.env .env

example.env ファイルには以下のテキストデータが保存されていました。

VITE_DISCORD_CLIENT_ID=YOUR_DISCORD_CLIENT_ID_HERE
DISCORD_CLIENT_SECRET=YOUR_DISCORD_CLIENT_SECRET

.env ファイルについて

.env ファイルは環境変数を定義したテキストファイルです。

`.env`ファイルとは?

`.env`(ドットエンヴ)ファイルは、環境変数を保存するためのシンプルなテキストファイルです。環境変数とは、プログラムが動作する環境に関する情報(例:データベースの接続情報、APIキーなど)を格納する変数のことです。

【Python】.envファイルについて分かりやすく理解したいときのための記事|ごろじ

PHP などでも .env は使われているようですが、 Node.js でも 2023 年 9 月からサポートされました。

2023年9月頭にリリースされたNode.js v20.6.0にbuilt-in .env file supportという記載がありました。

Node.jsでdotenvがいらなくなったっぽいので使ってみる #JavaScript – Qiita

公式サンプルに必要なパッケージのインストール

ダウンロードした公式サンプルのフォルダ getting-started-activity の client フォルダに cd コマンドで移動します。

g:\Dev\Discord\EmbeddedApp>cd getting-started-activity

g:\Dev\Discord\EmbeddedApp\getting-started-activity>cd client
discord 埋め込みアプリの公式サンプルの client フォルダ..

client ディレクトリで npm install を実行します。

npm install

npm install を使うと同じディレクトリの package.json の Dependencies と devDependencies に書かれたパッケージをインストールします。
※ npm install には他の使い方もあります。

npm installとpackage.jsonが存在するディレクトリでコマンドを打てば、package.jsonに記述されている依存パッケージを自動でインストールしてくれる

npmとpackage.json #Node.js – Qiita

公式サンプルの client/package.json には devDependencies だけがあります。

{
  "name": "getting-started-activity",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^5.0.8"
  }
}

devDependencies開発で必要なパッケージのリストです。
vite というビルドツールが要素として記述されています。
参照:はじめに | Vite

devDependencies

devDependencies の頭にある dev は development(開発)という意味があり
その名の通り開発環境でのみ利用し、
本番環境にデプロイする際には不要なパッケージや依存関係を保存します。
eslint,prettier,tailwindcss などです。

dependenciesとdevDependenciesの違い

そのため今回は npm install により開発に必要な vite がインストールされました。

今回の npm install の結果は以下です。

g:\Dev\Discord\EmbeddedApp\getting-started-activity\client>npm install

added 10 packages, and audited 11 packages in 3s

3 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

g:\Dev\Discord\EmbeddedApp\getting-started-activity\client>

今回はここまで

今回、パート1(全2話)では、Discord 上でプレイできるアプリを作成できる「Discord 埋め込みアプリソフトウェア開発キット (SDK) 」を用いた公式サンプルダウンロード・インストールする手順を紹介しました。
環境変数を定義する .env ファイルや、 npm install コマンドがインストールする内容についても紹介しました。

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

タイトルとURLをコピーしました