Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

Discord.js でボットを作る ~発言させるまで~

$
0
0

!この記事は前に書いた記事の続きです。まだ読んでない人は下のリンクから飛んでください!

前の記事
████

このページでやること

  1. 状況に応じてアカウントを作成
  2. ボットの作成からトークンの取得まで
  3. コードを書く
  4. サーバーに上げる

前置き

文字だと分かりにくいところもありそうなので、動画を配置いたしました。
よかったら見てみてください。

ボットの作成

Discord アカウントを持っていない ー> アカウントを作る
サーバーを作っていない、または入っていない -> サーバーを作る
ボットを作っていない -> ボットを作る
準備が整っている -> コードを書く

Go to...アカウントを作るサーバーを作るボットを作るコードを書く
Select███████████████████████████

アカウントを作る

びゅーん
では行きましょう。
まずは、ここにアクセスして、アカウントの登録をします。
それだけです。
次に行きましょう。

サーバーを作る

びゅーん
既にサーバーがある人は飛ばしちゃってください。

1. サーバーに入れてもらう

友達とかに招待してもらう方法です。
画面左にある「+」をクリックします。
そしたら「サーバーに参加」をクリック、
教えてもらったコードを入力し、参加をクリックします。
ただ、ボットを作成するにあたって権限を与えてもらう必要があります。

僕も友達のサーバーに入れてもらうことにした。
> ん?あれ?あ、そうか!
元々友達がいないんだっけ (´・ω・`)

2. サーバーを作る

サーバーを作る方法です。
まず画面左にある「+」をクリックします。
そしたら「サーバーを作成」をクリックします。
サーバー名入力して、新規作成をクリックします。
これでOKです。次へ行きましょう。

ボットを作る

びゅーん
では早速作っていきましょう。
まずはここにアクセスします。そして、右上の方にある New Applicationをクリックします。
そしたら NAMEにボットの名前を入力して Createを押します。
するとなんか出てきます(語彙力)簡単に説明すると、

  • APP ICON = ボットのアイコン。
  • NAME = ボットの名前。
  • DESCRIPTION (MAXIMUM 400 CHARACTERS) = 説明。400字まで。
  • CLIENT ID = ボットの ID
  • CLIENT SECRET = シークレット...
  • IRL EXAMPLE = こんな感じのやつ。

...という様な感じです。
CLIENT IDはコピーして何かにメモしておきましょう。
では左側の SETTINGSを見てください。
今は General Informationを選択しています。これを Botに変えてください。
すると画面は変わって真ん中に BUILD-A-BOTと表示されます。横の Add Botをクリック。
そしたらなんか出てくるので Yes, do it!を押しましょう。

A wild bot has appeared!

と出たら成功です。これでボットができます!
でももし、

Too many users have this username, please try another.

と言われてしまった人は残念ながらその名前は使えないので、他の名前にする様にしましょう。
悪い例: testbotなど


ではここに表示されている項目について簡単に説明します。

  • ICON = ボットのアイコン。
  • USERNAME = ボットの名前。タグも表示される。
  • TOKEN = トークン。ボットの中で一番大事なやつ。決してインターネットで晒すことをしてはいけない。
  • PUBLIC BOT = ON ならそのボットの CLIENT IDが分かっててかつ権限を持っていればだれでもそのボットをサーバーに招き入れることができます。逆に OFF にすれば自分しか追加できなくなります。
  • REQUIRES OAUTH2 CODE GRANT = OFF のままにしときましょう。

TOKENも何かにメモしておきましょう。
では次です。サーバーに追加します。
さっきコピーした CLIENT IDを使います。

https://discordapp.com/api/oauth2/authorize?client_id=CLIENT ID&permissions=0&scope=bot

みたいにして飛ぶと、DISCORDに接続と書かれてるページに飛びます。
「サーバーを選択」とあるので、ここでさっき作った - または入ったサーバーを選びましょう。

ここで何も表示されない人は、おそらく権限がありません。下にボタンを設置したので飛んでみてください。

Go to...サーバーを作る
Select███████

サーバーで確認してみて、これでボットが表示されていれば成功です。次へ行きましょう。

コードを書く

今度はディレクトリを用意します。
僕の場合 C:\Users\裕斗\ProjectsNode.jsというディレクトリを作りました。

C Drive
    |- Users
        |- 裕斗
            |- Projects
                |- Node.js ← これ
                |- Python
                |- Ruby
                ~ etc...
            |- デスクトップ
            |- ダウンロード
            ~ etc...
        |- パブリック
        |- Default
        ~ etc...
    |- System32
    |- Program Files
    ~ etc...

空白さえ入っていなければ大丈夫そうです。
そしたらそこで bashあるいは cmdterminal - termuxを開きます。そして npm init -yを入力します。
Yarn が入ってる人は yarn init -yです。
すると、package.json ができます。

package.json
{"name":"Node.js","version":"1.0.0","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\"&& exit 1"},"author":"","license":"MIT"}

大体こんな感じ。

{
  "name": "名前",
  "version": "バージョン",
  "description": "説明",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "自身の名前",
  "license": "MIT"
}

nameは小文字の方がいいかな。
そこで今度は npm install discord.jsを入力します。(Yarn なら yarn add discord.js)
終わったら早速ボットのコードを書いていきます!
ディレクトリに index.jsというファイルを作ります。

Windows の人でファイルのアイコンが下のやつみたいな感じになっていたら拡張子が変わっていません。

名前更新日時種類サイズ
📄 index.jsYYYY/MM/DD HH:MMテキスト ドキュメント0 KB

直す方法は コントロール パネルを開く -> デスクトップのカスタマイズをクリック -> フォルダー オプションをクリック -> 表示タブをクリック -> 詳細設定を下のほうまでスクロールして「登録されている拡張子は表示しない」のチェックを外す -> 適用 -> OK
すると index.js が index.js.txt になってると思うので、名前の変更をクリックして最後の .txt を消します。
こんなのが出てきても「はい」をクリックしちゃっていいです。
image.png

そうして出来た「index.js」に早速記述していきましょう!

index.js
constDiscord=require('discord.js')constclient=newDiscord.Client()client.on('ready',()=>{console.log(`${client.user.username}でログインしています。`)})client.on('message',asyncmsg=>{if(msg.content==='!ping'){msg.channel.send('Pong!')}}client.login('トークン')

取りあえずはこれでOK。最後のトークンにはさっきコピーした TOKEN をコピペします。

Name#0000でログインしています。

の様に表示されて Discord を開くとボットがオンラインになっています!
!pingと入力してみてください。
するとボットが「Pong!」と返してくれます!

上手くいかない時はインターネットの問題であることが多いです。
一度確認してみてください。

では仕組みを説明していきます。まずこれ。

index.js - 1 と 2 行目
constDiscord=require('discord.js')constclient=newDiscord.Client()

ここでは定義をしています。さっき npm install...で追加したやつですね。

index.js - 4 ~ 6 行目
client.on('ready',()=>{console.log(`${client.user.username}でログインしています。`)})

これは準備が出来たらプロンプトに「~でログインしています。」と表示させるやつです。
JavaScript は console.log('メッセージ')がプロンプトにメッセージを表示させる基本形です。
エラーがどこで起きているかとかの確認によく使うので、覚えておきましょう。
では次。

index.js - 8 ~ 12 行目
client.on('message',msg=>{if(msg.content==='!ping'){msg.channel.send('Pong!')}}

これはそのまま日本語に訳してしまった方がきっと分かりやすいです...

日本語訳
発言(message)を確認したらそれを msg とする {
  もし、発言内容(msg.content)が「!ping」なら {
    チャンネルに「Pong!」と発言する
  }
}

こんな感じです。
では最後。

index.js - 14 行目
client.login('トークン')

ボットでログインするためのやつです。以上です。

その他

知って得する豆知識

ちなみに、

if(msg.content==='!ping'){msg.channel.send('Pong!')}

の最初の行、

if(msg.content==='!ping'){

===のところを、

if(msg.content=='!ping'){}

と書いても動くには動きますが、そうすると後々大変なことになってしまうので、やめた方がいいでしょう。
これは eqeqeqeqeqの違いです。
厳密等価演算子等価演算子の違いと言ったりもします。
eqeqを使ってしまうと、

> 31989183 == 92259572 == 29948 == 9927919185813 == 93853 == 0

の結果が trueになってしまいます。つまり、
31989183 = 92259572 = 29948 = 9927919185813 = 93853 = 0が正解になってしまうのです...

動画

まだできてないです。できるまでお待ちください...

ネタ

IRL Example を再現!

戻る

名前

PERMISSIONS
✅ Bake a cake
✅ Buy you a nice seafood dinner
✅ Have an existential crisis
✅ Microbrew some local kombucha
✅ Record a new mixtape.

終わりに

作ってみてどうでした?楽しかったり嬉しかったりしてくれたら幸いです。
次からはボットのコマンドを作っていきましょう。


Viewing all articles
Browse latest Browse all 8691

Trending Articles