JavaScriptでSTREAM DECKのプラグインを作った
JavaScriptでSTREAM DECKのプラグインを作った
最近STREAM DECKというデバイスを買いました.
よくある設定したマクロををボタンで起動する的なやつです.
当初は物理ボタンやダイヤルで音量調節できたらいいなーって感じで買ったのですが,他にもできることを模索したりいろいろカスタマイズしていくうちに既存のプラグインでは物足りなさを感じた（Macに対応しているプラグインが少ない😡）ので自作しました.
調べているとそれなりにしっかりした開発用ドキュメントが見つかりました.
天下のJavaScriptで開発ができるようですね.
しかし,このドキュメントが分かりづらいのか,私の技術力が低いのかでかなり苦戦したので,ここにドキュメントのドキュメントを記しておこうと思います.
ちなみに私は普段ReactとTypeScriptでゴリゴリフロントエンドを開発している人です.MacOSです.
今回作ったもの
YouTubeの現在のチャンネル登録者数が表示されるボタン
YouTubeのAPIでデータを取得してタイトルとして表示
ついでにサムネの画像も変更
なので
- ボタンのタイトルを動的に変更
- ボタンの背景画像を動的に変更
- プラグインでAPIを叩く
を実現することができた
ソースコード
やる
この公式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
git clone https://github.com/elgatosf/streamdeck-plugintemplate
これすれば公式のGetting Startedに書いてあるJavaScriptのSDKはcloneしなくて良い.（もう入っている）
<aside>
⚠️ 公式にはhttps://github.com/elgatosf/streamdeck-plugin-templateをcloneしろとあるが,https://github.com/elgatosf/streamdeck-plugintemplateを使った.どちらが正しいかわからないが,後者だとうまく動いた.まず名前が似すぎ😡😡😡
</aside>
Packaging
このcloneしたものをPackagingしていきます.
ここにある内容ですね.Packagingに必要なバイナリファイルがあるのでインストールします.
DistributionToolというファイルがあればそれです.
どこにあってもいいですが,リポジトリの直下におきます.
そしたら
./DistributionTool -b -i ./Sources/com.elgato.template.sdPlugin -o Release
を叩けばDistributionToolを使ってプラグインをインストールするためのファイルを生成してくれるはずです.生成する前にReleaseの中にあるファイルを消しておきましょう.
余談：./DistributionTool: command not foundの場合
これは私の体験談ですが,このバイナリファイルが動かなかったので調べたらこいつを使うと良いとのことで使用しました.
しかし,このmoduleもエラーが出ており,node_modules/stream-deck-distribution/vendorにDistributionToolを置かないと動かなかったです.
そして最終的には,いつの間にかこれを使用せずに前述した方法でPackagingできるようになりました.
本当に謎です.
プラグインをアプリにインストール
DistributionToolでPackagingしたときにできるcom.elgato.template.streamDeckPluginをダブルクリックするとインストールしますか？→はい
なにも設定しなければカスタムのカテゴリにあるはずです.
Actionの追加
需要と気力があれば書きます
propertyinspectorの設定
需要と気力があれば書きます需要があれば書きます
デバック方法
defaults write com.elgato.StreamDeck html_remote_debugging_enabled -bool YES
Stream Deckのアプリを再起動
http://localhost:23654/にアクセス
ボタン押したときにconsole.logとかでやった
振り返り
汎用性の高そうな処理である
- ボタンのタイトルを動的に変更
- ボタンの背景画像を動的に変更
の2つができたのがよかった.
また,APIをclientで叩いているように見えるので,API Keyがダダ漏れではないかというのが心配.
nodeのランタイムで叩く方法があればそれをやりたい.
そうすれば公式にメールしてリリースしてもらえそう.
Discussion