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
260
Discord Embede SDK入門…… してみたかった話
2024-03-22
【エンジニアLTイベント】春のアウトプットLT会登壇資料です
godan
March 22, 2024
Tweet
Share
More Decks by godan
See All by godan
ミシンと刺繍とOSS
godan
1
50
Nest Hubがある生活
godan
2
30
オンライン配信の始め方
godan
3
91
SOFT SKILLSは定期的に読み返したくな良書
godan
2
44
今年どれだけ本読んだ?
godan
0
61
本とスプシと同人誌
godan
0
200
Tesseract.jsで始めるゲームライフ改善
godan
0
76
プレゼンテーションで表紙を作る技術
godan
1
70
Re:Re:GASで始めるゲーム開発
godan
0
180
Other Decks in Programming
See All in Programming
実践 Advanced CallKit 〜快適な通話の実現に向けて〜
mot_techtalk
3
120
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Understand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する!Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
sumio
3
340
ブラウザ互換の重要性 - あらゆるユーザーに価値を届けるために必要なこと
yamanoku
0
110
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
520
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.6k
Modular Monolith Go Server with GraphQL Federation + gRPC
110y
1
570
Architecture Decision Record (ADR)
nearme_tech
PRO
1
640
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
500
New Order in Cascade Sorting Order
mugi_uno
3
2.6k
Some more adventure of Happy Eyeballs
coe401_
2
160
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
290
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
46
4.6k
It's Worth the Effort
3n
182
27k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
363
22k
Building Flexible Design Systems
yeseniaperezcruz
325
37k
Statistics for Hackers
jakevdp
793
220k
The World Runs on Bad Software
bkeepers
PRO
64
11k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
A Modern Web Designer's Workflow
chriscoyier
691
190k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
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の知識がなさすぎて間に合わなかったです… 今年中になかしら⼀つアプリを出したい……!
おわり ⾃宅ネットワークはまたどこかで……