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
Spotify物理リモコンがほしい v0.2
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
田中みそ
May 26, 2022
Technology
390
0
Share
Spotify物理リモコンがほしい v0.2
2022/5/26 Music LT Vol.2 登壇スライド
田中みそ
May 26, 2022
More Decks by 田中みそ
See All by 田中みそ
アレをアレに埋め込むアレを作ってみた
miso
0
120
プラレールのめちゃくちゃ良く折れるアレをできる限り手抜きして3Dプリンターでなんとかしようとした
miso
0
93
子どもの写真からデフォルメフィギュアを作ってみた
miso
1
950
LINE x IoT 入門ハンズオン
miso
0
290
M5ATOMでNintendo Switchを自動化してみた
miso
0
670
ngrokを使ったLINE Bot開発を超絶楽ちんにする「linegrok」のご紹介
miso
0
490
opnizのご紹介
miso
0
890
ルービックキューブスクランブラーが欲しかったので作ってみた
miso
0
970
MineCraftのレッドストーンを現実世界まで拡張してみた
miso
0
220
Other Decks in Technology
See All in Technology
Hooks, Filters & Now Context: Why MCPs Are the “Hooks” of the AI Era
miriamschwab
0
130
制約を設計する - 非決定性との境界線 / Designing constraints
soudai
PRO
6
2.4k
Cortex Codeでデータの仕事を全部Agenticにやりきろう!
gappy50
0
350
デシリアライゼーションを理解する / Inside Deserialization
tomzoh
0
230
プロダクトを育てるように生成AIによる開発プロセスを育てよう
kakehashi
PRO
1
920
ふりかえりがなかった職能横断チームにふりかえりを導入してみて学んだこと 〜チームのふりかえりを「みんなで未来を考える場」にするプロローグ設計〜
masahiro1214shimokawa
0
330
2026年度新卒技術研修 サイバーエージェントのデータベース 活用事例とパフォーマンス調査入門
cyberagentdevelopers
PRO
6
7.2k
AI前提とはどういうことか
daisuketakeda
0
170
DevOpsDays2026 Tokyo Cross-border practices to connect "safety" and "DX" in healthcare
hokkai7go
0
110
Hello UUID
mimifuwacc
0
130
あるアーキテクチャ決定と その結果/architecture-decision-and-its-result
hanhan1978
2
570
AIを活用したアクセシビリティ改善フロー
degudegu2510
1
170
Featured
See All Featured
Information Architects: The Missing Link in Design Systems
soysaucechin
0
870
Building Applications with DynamoDB
mza
96
7k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
310
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.4k
The Limits of Empathy - UXLibs8
cassininazir
1
290
What’s in a name? Adding method to the madness
productmarketing
PRO
24
4k
The Spectacular Lies of Maps
axbom
PRO
1
680
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
Mozcon NYC 2025: Stop Losing SEO Traffic
samtorres
0
200
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
260
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
inesmontani
PRO
3
3.3k
Transcript
Spotify物理リモコンがほしい v0.2 田中みそ 2022/5/26 Music LT Vol. 2
自己紹介 田中 みそ (田中 大樹) Qiita: miso_develop Twitter: miso_develop Facebook:
田中みそ Music LT主催 LINE API Expert IoT界隈やスマートスピーカー界隈に よくいます
Spotify物理リモコンがほしい背景 • 普段スマートスピーカーからSpotifyで音楽を流すけど、 曲選択や音量調整といった操作は音声ではやりづらい • なのでWeb Playerを使ってPCから操作してるけど、 PCのあるところに行かないといけなかったり、 ウインドウ切り替えたりと地味にめんどくさい
コンポのリモコンみたいなので操作したい 理想はコンポ(死語?)のリモコン感覚で物理ボタンを ポチポチしてSpotifyをコントロールできたらいいな
(余談)こんなのもあるらしい https://www.itmedia.co.jp/news/articles/2202/23/news041.html より
ソフトウェア実装
Spotify Web API https://developer.spotify.com/documentation/web-api/reference/#/operations/transfer-a-users-playback より
Spotify Web API • シンプルなREST API • Spotify for Developersにログインするとプロジェクト
(APP)を作成でき、Client ID/Secretが発行される • 曲情報やアルバム情報取得APIなんかがあり、 Player APIも一通り揃ってる • ただし無料プランだとPlayer APIは動かない…
(余談)初回3ヶ月無料キャンペーン中! https://www.spotifypremium.jp/ より
Web Consoleがとても便利 https://developer.spotify.com/console/get-user-player/?market=ES&additional_types= より
Web Consoleがとても便利 https://developer.spotify.com/console/get-user-player/?market=ES&additional_types= より
Web Consoleがとても便利 https://developer.spotify.com/documentation/general/guides/authorization/code-flow/ より
Use Caseに合わせたクラスを作成 Use Case • 再生/停止 • 次の曲へ • 前の曲へ
• 音量アップ • 音量ダウン • リピート • シャッフル https://github.com/thelinmichael/spotify-web-api-node より
ハードウェア実装
物理コントローラーどうするか • ひとまずM5Stackでプロトタイプ実装 • 3ボタンあるので組み合わせでUse Caseは網羅できる • 前の曲へ A •
再生/停止 B • 次の曲へ C • 音量ダウン A B • 音量アップ B C • リピート A C • シャッフル A B C
物理コントローラーどうするか
プロトタイプのシステム構成 Web API JavaScriptでマイコンを制御できるIoTフレームワーク。 M5Stackから直接Web API叩けるけど、Cで実装し たくなかったのでopnizを使ってTypeScriptで実装。 ボタン信号
本番構成 マイコン: M5ATOM or M5Stamp ソフトウェア実装:Spotify Web API & opniz
物理ボタン:どうしよう… https://www.switch-science.com/catalog/7360/ より
物理ボタン案その1 • 4x3キーパッド作成キット • 350円 • 小さすぎるかも? https://akizukidenshi.com/catalog/g/gK-12229/ より
物理ボタン案その2 • 100均のUSBテンキーボード • 330円! https://note.com/tomorrow56/n/n9e9a02586d76 より https://lang-ship.com/blog/work/usb-numeric-keypad/ より
物理ボタン案その3 • 謎の赤外線リモコン • 多分昔買った電子パーツ詰め合わ せみたいのについてきたやつ • ボタンいっぱいあるし最適解かも
物理ボタン案その3 https://lang-ship.com/blog/work/m5sitckc-daiso-remote-led/ より https://akizukidenshi.com/catalog/g/gM-07245/ より