Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Discord Embede SDK入門…… してみたかった話
Search
godan
March 22, 2024
Programming
1
460
Discord Embede SDK入門…… してみたかった話
2024-03-22
【エンジニアLTイベント】春のアウトプットLT会登壇資料です
godan
March 22, 2024
Tweet
Share
More Decks by godan
See All by godan
献立を支える技術
godan
1
49
僕の イベントスタッフ 装備の最適解
godan
2
130
YAPC::Hakodateの映像記録を支える技術
godan
5
610
ミシンと刺繍とOSS
godan
3
140
Nest Hubがある生活
godan
2
82
オンライン配信の始め方
godan
3
160
SOFT SKILLSは定期的に読み返したくな良書
godan
2
80
今年どれだけ本読んだ?
godan
0
95
本とスプシと同人誌
godan
0
320
Other Decks in Programming
See All in Programming
(Extension DC 2025) Actor境界を越える技術
teamhimeh
1
210
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
ohmori_yusuke
0
170
高度なUI/UXこそHotwireで作ろう Kaigi on Rails 2025
naofumi
4
3.2k
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
2
130
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
930
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
350
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
480
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
130
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
740
CSC509 Lecture 01
javiergs
PRO
1
430
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
290
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2k
Navigating Team Friction
lara
189
15k
Designing Experiences People Love
moore
142
24k
Designing for Performance
lara
610
69k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Bash Introduction
62gerente
615
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Producing Creativity
orderedlist
PRO
347
40k
Site-Speed That Sticks
csswizardry
11
880
How STYLIGHT went responsive
nonsquared
100
5.8k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Transcript
虎の穴ラボ エンジニア
⾃⼰紹介 最近は⿓が如く3とラスティッド‧モスがマイブーム 倫理が退廃した世界と ⼈類が退廃した世界が好き
Discord Embedded SDKについて - Discordの通話にアクティビティとしてアプリを起動できる - watch together, gartic phoneなど⼀部に公開されてい
た - 18⽇に⼀般でもSDKを通して実装できるように!
Discord Embedded SDKについて https://discord.com/build/embedded-app-sdk
Discord Embedded SDKについて - Discordの通話にアクティビティとしてアプリを起動できる - watch together, gartic phoneなど⼀部に公開されていた
- 18⽇に⼀般でもSDKを通して実装できるように! - 将来的には収益化などもできそう - > 「デベロッパーが⾃らのアプリを構築、共有、配信し、ユーザーの⽬に触れ、そして収益化する。私たちはDiscordを、その全てができる最⾼の場所にした いと考えています」 https://gigazine.net/news/20240313-discord-sdk-third-party/
とりあえず⼊⾨する - ⾊々遊べそうな気配を感じる - 会社でもDiscordは使っているのでなにか仕込みたい → とりあえず触ってみよう!
とりあえず⼊⾨する - Discord内のiFrameで動作するページ - やりとりは⼤雑把に2種類 - Discordのイベントに対して関数を⽤意して引っ掛ける - Discordに対してコマンドを発⾏する
とりあえず⼊⾨する Client App Discord (iFrame) Discord API App Server ソケット開通
初期化 アプリ情報取得 アプリ情報 認証リクエスト OAuth code 送付 認証 アクセストークン アクセストークン SD K が い い 感 じ に や っ て く れ る
とりあえず⼊⾨する とりあえず公式の「Building Your First Activity in Discord」を試す https://discord.com/developers/docs/activities/building-an-activity
とりあえず⼊⾨する Discord Developer Portalからアプリを作る
とりあえず入門する // 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 = ` <div> <img src="${rocketLogo}" class="logo" alt="Discord" /> <h1>Hello, World!</h1> </div> `;
とりあえず⼊⾨する サーバーを実⾏したら合わせてCloudflared 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
Cloudflare tunnelとは - Cloudflareを通して外部からlocalへトンネリングしてくれ る - 今回はローカルの開発サーバーへアクセスするためのURL を取得するために使っている
URLを登録する
URLを登録する - 悪意あるエンドポイントにリクエストしない対策 - パスごとにアクセス先のエンドポイントを指定する
Hello, world!
ここで⼒尽きました React導⼊までは頑張った
ここで⼒尽きました - ⾊々遊べそう - 参加サーバーや名前、発⾔中?なども取れそう - 基本はSPAなのでwebでできることは基本全部できる - 普段使ってるサービス内で⾃分のアプリが動いてる
ここで⼒尽きました - 複数ユーザーの同期を取る必要 - ポーリングか、WebSocketか何かしらがいる - WebSocketの知識がなさすぎて間に合わなかったです… 今年中になかしら⼀つアプリを出したい……!
おわり ⾃宅ネットワークはまたどこかで……