Slide 1

Slide 1 text

虎の穴ラボエンジニア

Slide 2

Slide 2 text

⾃⼰紹介最近は⿓が如く3とラスティッド‧モスがマイブーム倫理が退廃した世界と⼈類が退廃した世界が好き

Slide 3

Slide 3 text

Discord Embedded SDKについて - Discordの通話にアクティビティとしてアプリを起動できる - watch together, gartic phoneなど⼀部に公開されていた - 18⽇に⼀般でもSDKを通して実装できるように!

Slide 4

Slide 4 text

Discord Embedded SDKについて https://discord.com/build/embedded-app-sdk

Slide 5

Slide 5 text

Discord Embedded SDKについて - Discordの通話にアクティビティとしてアプリを起動できる - watch together, gartic phoneなど⼀部に公開されていた - 18⽇に⼀般でもSDKを通して実装できるように! - 将来的には収益化などもできそう - > 「デベロッパーが⾃らのアプリを構築、共有、配信し、ユーザーの⽬に触れ、そして収益化する。私たちはDiscordを、その全てができる最⾼の場所にしたいと考えています」 https://gigazine.net/news/20240313-discord-sdk-third-party/

Slide 6

Slide 6 text

とりあえず⼊⾨する - ⾊々遊べそうな気配を感じる - 会社でもDiscordは使っているのでなにか仕込みたい → とりあえず触ってみよう!

Slide 7

Slide 7 text

とりあえず⼊⾨する - Discord内のiFrameで動作するページ - やりとりは⼤雑把に2種類 - Discordのイベントに対して関数を⽤意して引っ掛ける - Discordに対してコマンドを発⾏する

Slide 8

Slide 8 text

とりあえず⼊⾨する Client App Discord (iFrame) Discord API App Server ソケット開通初期化　アプリ情報取得　アプリ情報認証リクエスト OAuth code 送付認証アクセストークンアクセストークン SD K がいい感じにやってくれる

Slide 9

Slide 9 text

とりあえず⼊⾨するとりあえず公式の「Building Your First Activity in Discord」を試す https://discord.com/developers/docs/activities/building-an-activity

Slide 10

Slide 10 text

とりあえず⼊⾨する Discord Developer Portalからアプリを作る

Slide 11

Slide 11 text

とりあえず入門する // Import the SDK import { DiscordSDK } from "@discord/embedded-app-sdk"; import "./style.css"; import rocketLogo from '/rocket.png'; // Instantiate the SDK const discordSdk = new DiscordSDK(import.meta.env.VITE_DISCORD_CLIENT_ID); setupDiscordSdk().then(() => { console.log("Discord SDK is ready"); }); async function setupDiscordSdk() { await discordSdk.ready(); } document.querySelector('#app').innerHTML = `

Hello, World!

Slide 12

Slide 12 text

とりあえず⼊⾨するサーバーを実⾏したら合わせてCloudﬂared tunnelを実⾏する $ npm run dev client terminal output VITE v5.0.12 ready in 100 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help $ cloudflared tunnel --url http://localhost:5173

Slide 13

Slide 13 text

Cloudﬂare tunnelとは - Cloudﬂareを通して外部からlocalへトンネリングしてくれる - 今回はローカルの開発サーバーへアクセスするためのURL を取得するために使っている

Slide 14

Slide 14 text

URLを登録する

Slide 15

Slide 15 text

URLを登録する - 悪意あるエンドポイントにリクエストしない対策 - パスごとにアクセス先のエンドポイントを指定する

Slide 16

Slide 16 text

Hello, world!

Slide 17

Slide 17 text

ここで⼒尽きました React導⼊までは頑張った

Slide 18

Slide 18 text

ここで⼒尽きました - ⾊々遊べそう - 参加サーバーや名前、発⾔中?なども取れそう - 基本はSPAなのでwebでできることは基本全部できる - 普段使ってるサービス内で⾃分のアプリが動いてる

Slide 19

Slide 19 text

ここで⼒尽きました - 複数ユーザーの同期を取る必要 - ポーリングか、WebSocketか何かしらがいる - WebSocketの知識がなさすぎて間に合わなかったです… 今年中になかしら⼀つアプリを出したい……!

Slide 20

Slide 20 text

おわり⾃宅ネットワークはまたどこかで……