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
350
Discord Embede SDK入門…… してみたかった話
2024-03-22
【エンジニアLTイベント】春のアウトプットLT会登壇資料です
godan
March 22, 2024
Tweet
Share
More Decks by godan
See All by godan
僕の イベントスタッフ 装備の最適解
godan
1
38
YAPC::Hakodateの映像記録を支える技術
godan
5
460
ミシンと刺繍とOSS
godan
2
77
Nest Hubがある生活
godan
2
48
オンライン配信の始め方
godan
3
120
SOFT SKILLSは定期的に読み返したくな良書
godan
2
59
今年どれだけ本読んだ?
godan
0
71
本とスプシと同人誌
godan
0
260
Tesseract.jsで始めるゲームライフ改善
godan
0
90
Other Decks in Programming
See All in Programming
Асинхронность неизбежна: как мы проектировали сервис уведомлений
lamodatech
0
1.3k
為你自己學 Python
eddie
0
520
traP の部内 ISUCON とそれを支えるポータル / PISCON Portal
ikura_hamu
0
180
Stackless и stackful? Корутины и асинхронность в Go
lamodatech
0
1.3k
20年もののレガシープロダクトに 0からPHPStanを入れるまで / phpcon2024
hirobe1999
0
1k
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.4k
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
390
VisionProで部屋の明るさを反映させるシェーダーを作った話
segur
0
100
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
940
Androidアプリの One Experience リリース
nein37
0
1.2k
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
26
6k
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
74
9.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
19
2.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
GitHub's CSS Performance
jonrohan
1030
460k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
Unsuck your backbone
ammeep
669
57k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2k
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の知識がなさすぎて間に合わなかったです… 今年中になかしら⼀つアプリを出したい……!
おわり ⾃宅ネットワークはまたどこかで……