Upgrade to Pro — share decks privately, control downloads, hide ads and more …

DenoでDiscordBot作成!

 DenoでDiscordBot作成!

toranoana.deno #12の登壇資料です。
https://yumenosora.connpass.com/event/281120/

WBC観戦のためにdiscordenoというライブラリを使ってDiscordBodをDenoで開発した話です。

ライブの録画はこちら
https://www.youtube.com/watch?v=iHj72BvgoZY

More Decks by 虎の穴ラボ株式会社

Other Decks in Technology

Transcript

  1. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    WBC観戦に向けて
    Deno で DiscordBot作成
    〜Discordeno〜
    虎の穴ラボ 新規開発チーム
    河野 裕隆
    T O R A N O A N A L a b

    View full-size slide

  2. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    自己紹介
    河野裕隆
    ● 2019/08入社
    ● 新規開発チーム
    ○ クリエイティア他
    虎の穴ラボへの入社理由
    ● スキルを高めあえる仲間がほしい
    ● ユーザーに近い仕事がしたい
    2
    好きなもの
    ● VOCALOID(初音ミク)
    ● 謎解き、クイズ
    今期イチオシアニメ
    ● 江戸前エルフ
    ● 推しの子
    関係ないですが →
    この子も目が「☆」です

    View full-size slide

  3. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    みなさん
    WBC⚾見ましたか?
    3

    View full-size slide

  4. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    虎の穴ラボでは・・・
    ● 観戦会を実施
    ○ ラボでは業務外(趣味)の参加者を募る仕組みがある
    ■ 一緒にボードゲーム
    ■ 近くに住んでいる人とご飯会
    4

    View full-size slide

  5. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    とは言っても
    野球詳しくないメンバーも多い
    (オタク企業だし・・・)
    5

    View full-size slide

  6. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● 野球に詳しくない人と楽しくWBC観戦したい!
    ○ 選手の特性がわかりにくい
    ■ ドメイン知識が必要
    ■ 数値化してあるデータを観戦時に出せれば良い
    選手情報を返してくれるDiscord Botを作ろう
    作ったもの
    6

    View full-size slide

  7. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● Discord Bot(※今日はBotの実装側の話のみします)
    ○ 特定ワードに反応する(テスト用)
    ○ スラッシュコマンドで特定の反応を返す
    作ったもの
    7

    View full-size slide

  8. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    作ったもの
    8

    View full-size slide

  9. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● Deno で書き
    ● Discordeno を使い
    ● GitHub で管理し
    ● Deno Deploy にあげ
    ● Discord で利用
    技術構成
    9
    実装
    push
    deploy
    コマンド生成
    コマンド実行
    レスポンス
    コマンド送信
    botコメント

    View full-size slide

  10. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    Discordeno
    10
    ● https://github.com/discordeno/discordeno
    ○ 良い点
    ■ 基本なんでもできる
    ■ 型情報でなんとなく実装できる
    ■ コードコメントは充実している
    ■ Deno Deployとの親和性
    ○ 少し不便な点
    ■ ドキュメントが少ない
    ■ Python等のライブラリと扱いがちょっと違う

    View full-size slide

  11. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● 全体構成
    実装概要
    11
    ←送信する画像(選手に対応する某野球ゲームの画像)
    ←外部依存関係の管理
    ←メイン実装
    ←メンバー配列(ほぼJSON、背番号をキーに選手情報)
    ←環境変数や.envファイルの読み込み

    View full-size slide

  12. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    const bot = discordeno.createBot({
    token: Secret.DISCORD_TOKEN,
    intents:
    discordeno.Intents.Guilds |
    discordeno.Intents.GuildMessages |
    discordeno.Intents.MessageContent,
    events: {
    ready: (_bot, payload) => {
    console.log(`${payload.user.username} is ready!`);
    },
    },
    });
    ● Botを作る
    DISCORD_TOKENはBotに割り振られたキー情報
    実装概要
    12

    View full-size slide

  13. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● スラッシュコマンドを作る
    GUILD_IDはサーバーに割り振られたキー情報
    // コマンドの定義作成
    const listCommand: discordeno.CreateSlashApplicationCommand = {
    name: "member_list",
    description: "代表メンバーを返します
    ",
    };
    // コマンドの登録処理
    await bot.helpers.createGuildApplicationCommand(listCommand, Secret.GUILD_ID);
    // コマンド受信時の処理
    bot.events.interactionCreate = async (b, interaction) => {
    switch (interaction.data?.name) {
    case "member_list": {
    b.helpers.sendInteractionResponse(interaction.id, interaction.token, {
    // レスポンス
    });
    break;
    }
    }
    実装概要
    13

    View full-size slide

  14. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    // レスポンスのところの抜粋
    {
    content: "メッセージ",
    file: member.imageName ?
    { blob: await fileToBlob(member.imageName), name: member.imageName } :
    undefined,
    }
    ● 画像を送る
    fileに{ blob: Blob, name: string }(interface FileContent)を渡す
    実装概要
    14

    View full-size slide

  15. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● Blob型への変換に悩んだ(TypeScript的な話)
    ● Switchからの画像取得
    ○ スマホ経由で画像送ってた
    ○ SDカード経由でやればよかった
    ■ SDカードリーダー持ってないけど・・・
    苦労した点
    15
    const fileToBlob = async (path: string): Promise => {
    return new Blob([(await Deno.readFile(`./images/${path}`)).buffer]);
    };

    View full-size slide

  16. Copyright (C) 2022 Toranoana Lab Inc. All Rights Reserved.
    ● Deno Deployで無料でできるのは良い
    ○ なんの工夫もしていないので定期的に停止しちゃうのが悲しみ
    ● ドキュメントが充実していなくても型情報で補完されるメリット
    ○ それはそれとしてドキュメントほしい
    ○ ソース内のコメントは充実している
    ● みんなで野球が見れて楽しかった(K◯NAMI感)
    参考(Platさんのブログ)
    https://zenn.dev/platina/articles/b57817025d08de
    まとめ
    16

    View full-size slide