Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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]); };

Slide 16

Slide 16 text

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