esmieの技術倉庫

RTA / 配信 / ゲーム関連のつくったもの置き場

PCゲームのプレイ記録を出力するDiscord Botの導入#1 GlitchでBotを動かす

この記事は、私が作ったDiscord Bot 「Gaming Logger」の導入方法を解説する記事です。

全3回構成で、この記事(#1)と#2で導入方法を説明します。#3は出力形式のカスタマイズ方法紹介なので、導入だけの人は#2まで読めばOKです。

ー ご了承 ー
Botの仕様と製作者の技術不足により「Botをサーバーに招待するだけ!」という公開方法が難しく、導入にちょっと(だいぶ)手間がかかってしまいます。
その分誰にでもわかりやすいように記事を書いたつもりなので、よろしければお付き合いください。

ー Contents ー

Gaming Loggerとは

PCで「いつ」「どのくらい」「どのゲーム」をプレイしたのかをDiscordを介して取得し、DiscordのチャンネルとGoogle スプレッドシートに記録するBotです。
コードはNode.jsで記述してあり、Glitch1上で24時間オンライン稼働します。

記録例: f:id:esmie:20201217135148p:plainf:id:esmie:20201217135150p:plain

この記事で対象とする人

  • DiscordユーザーでPCゲームのプレイ記録をつけたい人
    (プログラミング全く分からなくても大丈夫!)
  • GlitchとGASの連携について知りたい人 ⇒ 導入方法#2 で解説しています

対象としない人

  • Discordのステータスに「○○をプレイ中です」を絶対に表示させたくない人

このBotはDiscordのユーザーステータスからゲームのプレイ状況を読み取っているので、これが非表示だとうまく動作しません。申し訳ない...

ある特定のゲームだけステータスに表示されないようにしている場合は、そのゲームの記録は残りませんがそれ以外のゲームのプレイ記録は出力できます。

全体図

Bot周りの関係図はこんな感じです。 図中では [Steam] となっていますが、設定をすることで他のPCゲームにも対応可能です。

f:id:esmie:20201212134239j:plain

必要なもの

  • Discordアカウント
  • Glitchアカウント
  • Googleアカウント

導入方法

1. Discordサーバーとチャンネルをつくる

まず、自分の個人サーバーとプレイ記録を出力するチャンネルをつくります。もうあるよ、という方は手順2に進んでください。 Discordのアカウントがない場合は、Discordの新規登録画面にアクセスしてアカウント登録をしましょう。

個人サーバー(自分が管理権限を持っているサーバー)をつくります。Discordの画面左端の+マークをクリックしてサーバーを追加して、

f:id:esmie:20201212135135j:plain

Create My Ownをクリックして選択します

f:id:esmie:20201212135138j:plain

お好きなサーバー名を入力して新規作成をクリック

f:id:esmie:20201212135142j:plain

これで自分のサーバーができました。

次に、Botがプレイ記録を出力する用のチャンネルをつくります。「テキストチャンネル」と表示されている右側の+をクリックしてチャンネルを作成して、

f:id:esmie:20201212135145j:plain

プレイ記録用だと分かりやすいような名前を入力、チャンネルを作成をクリックします

f:id:esmie:20201212135148j:plain

こんな感じの画面が表示されていたらOKです

f:id:esmie:20201212135153j:plain

2. Botを新規作成する

Discord Developer Portalにアクセスして、Discordアカウントでログインします。

このような画面が表示されるので、右上のNew Applicationをクリック

f:id:esmie:20201212133306p:plain

お好きな名前を入力してCreateをクリックします。ここで入力する名前はBotの名前ではないのでどんな名前でも問題ないですが、Botの名前と同じにすると分かりやすいです。

f:id:esmie:20201212134028p:plain

こんな感じの画面になったら成功

f:id:esmie:20201212134032p:plain

次に、左欄からBotを選択してからAdd BotをクリックしてBotを作成します。

f:id:esmie:20201212134035p:plain

PUBLIC BOTの項をOFFPRESENCE INTENTの項をONにして、下にポップアップしたSave Changeをクリック
(PRESENCE INTENTにチェックを忘れると、Botがユーザーステータスを取得できないためうまく動作しなくなります)

f:id:esmie:20201212134041p:plain

セーブが完了してポップアップが消えたら、左欄からOAuth2を選択してSCOPESの欄にあるbotにチェックを入れます

f:id:esmie:20201212134100p:plain

そうすると下にBOT PERMISSIONSが表示されるので、真ん中の列一番上のSend Messagesにチェックを入れます。
ここではBotにどんな権限を与えるかを選択していて、今回は「テキストを送信する」権限だけあれば問題ないです。

f:id:esmie:20201212134105p:plain

最後に、SCOPESBOT PERMISSIONSの間に表示されているURLをCopyボタンクリックでコピー、ブラウザのアドレスバー(URLが表示されている部分)にペーストして Enter を押します。

f:id:esmie:20201212134053p:plain

このような画面が表示されるので、先程つくった個人サーバーを選択してはいをクリック

f:id:esmie:20201212134057p:plain

「認証しました」と表示されていればOKです

f:id:esmie:20201212134109p:plain

Discordの個人サーバーを確認してみると、右側の欄にちゃんとBotが追加されていることが分かります。

f:id:esmie:20201212134153j:plain

3. Glitchのプロジェクトを作成する

Glitchとは、ウェブ上でNode.jsを動かすことができるサービス(いわゆるPaaS)です。環境構築いらずで他のPaaSとの連携もしやすいため、今回はこれを用いてBotを動かしていきます。

まず、Glitchにアクセスしてログイン、アカウントを持っていない場合は新規登録してからログインします。

ログインするとこのような画面になっているので、右上のNew Project > Import from Githubをクリックします。

f:id:esmie:20201212141719p:plain

Githubからソースコードをインポートするための入力欄がポップアップするので、下記URLをコピペしてOKをクリック
https://github.com/esmieimse/Gaming-Logger-Bot

f:id:esmie:20201212141722p:plain

しばらく Loading Project となった後、このような画面になったらインポート成功

f:id:esmie:20201212141726p:plain

左上に表示されているプロジェクト名は、変更してもしなくても大丈夫です。

左側のファイル一覧から.envをクリックして開き、Variable Valueと書かれた欄に DISCORD_BOT_TOKEN, USER_ID, CHANNEL_IDをそれぞれ入力します 。 (一番下 GAS_URL はまだ空欄でOK)

f:id:esmie:20201212141730p:plain

各値についての説明

  • DISCORD_BOT_TOKEN
    BotとGlitchを紐づけるための鍵のようなもの、絶対に外部へ漏らしてはいけない(戒め)
    1.で作成したBotのページからSETTINGS > Botの中にあるTOKENからコピーして貼り付け
  • USER_ID
    自分の Discord ユーザーID
    取得方法は下記参照
  • CHANNEL_ID
    プレイ記録を出力したいチャンネルのID
    取得方法は下記参照

User ID / Channel ID の取得方法(クリックで表示) Discord画面から、左下ユーザー設定をクリック

f:id:esmie:20201212145222p:plain

テーマを選択して下のほうにある開発者モードを ON 、右上の×で設定画面を閉じる

f:id:esmie:20201212145226p:plain

この状態で右欄のユーザーIDを取得したいユーザーにカーソルを合わせて右クリック
一番下にIDをコピーという項があるのでこれをクリックする

f:id:esmie:20201212145230p:plain

チャンネルIDも同様に、IDを取得したいチャンネルの名前の上で右クリック⇒IDをコピーをクリックする

f:id:esmie:20201212145233p:plain

次に続く

長くなってしまったので一旦ここで区切ります。
次回はGoogle Apps Scriptを使って、Botの24時間駆動とスプレッドシートへの書き込みができるようにします。

シリーズ記事

第1回:この記事
第2回:PCゲームのプレイ記録を出力するDiscord Botの導入#2 GlitchとGASの連携
第3回:PCゲームのプレイ記録を出力するDiscord Botの導入#3 出力ログのカスタマイズ


  1. Glitch: Node.jsを使ったウェブアプリを作成・公開することができるサービス