JavaScriptでSTREAM DECKのプラグインを作った

最近STREAM DECKというデバイスを買いました.

こちらの製品で

Amazon.co.jp

よくある設定したマクロををボタンで起動する的なやつです.

当初は物理ボタンやダイヤルで音量調節できたらいいなーって感じで買ったのですが,他にもできることを模索したりいろいろカスタマイズしていくうちに既存のプラグインでは物足りなさを感じた（Macに対応しているプラグインが少ない😡）ので自作しました.

調べているとそれなりにしっかりした開発用ドキュメントが見つかりました.

Getting Started | Stream Deck SDK

In this article you'll learn how to setup your development environment, create your first Stream Deck plugin, and test your plugin in Stream Deck.

https://docs.elgato.com/sdk/

天下のJavaScriptで開発ができるようですね.

しかし,このドキュメントが分かりづらいのか,私の技術力が低いのかでかなり苦戦したので,ここにドキュメントのドキュメントを記しておこうと思います.

ちなみに私は普段ReactとTypeScriptでゴリゴリフロントエンドを開発している人です.MacOSです.

今回作ったもの

YouTubeの現在のチャンネル登録者数が表示されるボタン

YouTubeのAPIでデータを取得してタイトルとして表示

ついでにサムネの画像も変更

なので

ボタンのタイトルを動的に変更

ボタンの背景画像を動的に変更

プラグインでAPIを叩く

を実現することができた

ソースコード

https://github.com/nbr41to/streamdeck-plugin-template

やる

この公式Documentsのしんどかったところは「書いてあるとおりにやっても動かないということ」と「概念を理解するのが難しい」というところ.

なのでガン無視して私がやったことを書いていく.

開発の流れの説明（重要）

これがわからない状態のスタートが一番しんどかったので先に.

まず第一に作ったプラグインをStream Deckのアプリにインストールして動作確認する必要があります.

そのためには作ったものをバンドルしてインストールできるファイルを生成しなければなりません.これを公式DocumentsではPackagingと読んでいるようです.

なので流れはこうです.

コーディングによる開発→作成したものをPackaging→それをStream Deckのアプリにインストール→動作確認→アンイストール→修正→Packaging→…

この

Packaging→それをStream Deckのアプリにインストール→動作確認→アンイストール→修正→Packaging→…

のループがだるかったです.

開発するファイルは基本的にはHTMLとJavaScriptで,HTMLを読み込み,そこにあるJavaScriptが決まったルールで動くといった感じでした.HTMLに直接JavaScriptを書いてもいいし,別ファイルに分割して読み込ませても大丈夫です.

また,プラグインには必要情報などを設定するためのmanifest.jsonがあり,これも編集することになります.

公式のテンプレートを複製

開発の鉄則である「まずは動くものを手元に置く」を達成します.

開発のために用意されたStream Deck Plugin Templateを使います.（いろいろはいっている）

こいつをclone

https://github.com/elgatosf/streamdeck-plugintemplate

shell

git clone https://github.com/elgatosf/streamdeck-plugintemplate

これすれば公式のGetting Startedに書いてあるJavaScriptのSDKはcloneしなくて良い.（もう入っている）

⚠️

公式にはhttps://github.com/elgatosf/streamdeck-plugin-templateをcloneしろとあるが,https://github.com/elgatosf/streamdeck-plugintemplateを使った.どちらが正しいかわからないが,後者だとうまく動いた.まず名前が似すぎ😡😡😡

Packaging

このcloneしたものをPackagingしていきます.

ここにある内容ですね.Packagingに必要なバイナリファイルがあるのでインストールします.

Distribution | Stream Deck SDK

Share your Steam Deck plugin with your friends or publish it on Marketplace for everyone to use.

https://docs.elgato.com/sdk/plugins/packaging

DistributionToolというファイルがあればそれです.

どこにあってもいいですが,リポジトリの直下におきます.

そしたら

shell

./DistributionTool -b -i ./Sources/com.elgato.template.sdPlugin -o Release

を叩けばDistributionToolを使ってプラグインをインストールするためのファイルを生成してくれるはずです.生成する前にReleaseの中にあるファイルを消しておきましょう.

余談：./DistributionTool: command not foundの場合

これは私の体験談ですが,このバイナリファイルが動かなかったので調べたらこいつを使うと良いとのことで使用しました.

https://github.com/TheAppleFreak/stream-deck-distribution-tool

しかし,このmoduleもエラーが出ており,node_modules/stream-deck-distribution/vendorにDistributionToolを置かないと動かなかったです.

そして最終的には,いつの間にかこれを使用せずに前述した方法でPackagingできるようになりました.

本当に謎です.

プラグインをアプリにインストール

DistributionToolでPackagingしたときにできるcom.elgato.template.streamDeckPluginをダブルクリックするとインストールしますか？→はい

なにも設定しなければカスタムのカテゴリにあるはずです.

Actionの追加

shell

需要と気力があれば書きます

propertyinspectorの設定

shell

需要と気力があれば書きます需要があれば書きます

デバック方法

plain text

defaults write com.elgato.StreamDeck html_remote_debugging_enabled -bool YES

Stream Deckのアプリを再起動

http://localhost:23654/にアクセス

ボタン押したときにconsole.logとかでやった

振り返り

汎用性の高そうな処理である

ボタンのタイトルを動的に変更

ボタンの背景画像を動的に変更

の2つができたのがよかった.

また,APIをclientで叩いているように見えるので,API Keyがダダ漏れではないかというのが心配.

nodeのランタイムで叩く方法があればそれをやりたい.

そうすれば公式にメールしてリリースしてもらえそう.

Create by

nobuyuki.K

学校の先生→Web系エンジニア
Next.js / TypeScript / TailwindCSS / Notion が好き。

- Table of contents -

今回作ったものやる開発の流れの説明（重要）公式のテンプレートを複製 Packaging 余談：プラグインをアプリにインストール Actionの追加 propertyinspectorの設定デバック方法振り返り

公開: 2023-08-20

更新: 2024-07-17

いいね: 0 件

コメント: 0 件

カテゴリ:

programming

タグ:

JavaScript

Stream Deck