Stream Deckを持っているので、Pluginを作成してみます。

公式から出ている開発ドキュメントは以下にあります。

Stream DeckのPlugin開発のGetting startedは以下です。

Node.js環境で開発できるらしいです。

すでにNode.js環境はあるので、ガイドにしたがって、お手軽にコマンドを実行してCLIをインストール、テストプラグインを作成します。

Stream Deckには、Stream Deck MobileというAndroid/iOSアプリがあり、それを利用すると、Windows PCで起動したStream Deckアプリと連携させて、実機のStream Deckデバイス代わりになります。

今回、プラグイン開発のCLIでコマンドを実行すると、モバイルアプリでもテストプラグインが動作しました。

詳細には対応できないことがあるかもしれませんが、そこは確認しつつとなります。

ディレクトリ構成

.
├── *.sdPlugin/
│   ├── bin/
│   ├── imgs/
│   ├── logs/
│   ├── ui/
│   │   └── increment-counter.html
│   └── manifest.json
├── src/
│   ├── actions/
│   │   └── increment-counter.ts
│   └── plugin.ts
├── package.json
├── rollup.config.mjs
└── tsconfig.json

上記はhttps://docs.elgato.com/streamdeck/sdk/introduction/getting-startedから引用です。

imgsには、プラグインで使うアイコンなどの画像を入れます。

プラグイン導入時のデフォルトアイコン（背景画像）、Stream Deckアプリのプラグイン一覧で表示されるプラグインのアイコンなどをここに入れるようです。

uiには、プラグインを配置した際の設定エリアをHTMLファイルで設定します。

sdpi-componentsというStream Deckプラグイン開発用のWebコンポーネントが準備されているようです。

srcがプラグイン開発の本体であるソースコードです。

ドキュメントでは「index.tsがプラグインのエントリーポイントです」となっていますが、現時点（2024/12）ではplugin.tsでした。
rollup.config.mjsに、input: "src/plugin.ts",という記載がありましたので、ここで指定するようです。

actions/increment-counter.tsがプラグインの機能の本体です。
plugin.tsに以下の記載があり、プラグインの機能をクラス形式で実装し、導入するようです。

import { IncrementCounter } from "./actions/increment-counter";

実行方法

プラグインを実行するスクリプトは通常のNode.js環境での開発と同様に、package.jsonに記載されています。

"scripts": {
    "build": "rollup -c",
    "watch": "rollup -c -w --watch.onEnd=\"streamdeck restart com.****.****\""
},

npm run watchでスクリプトを実行すると、以下のように実行されます。

rollup v4.28.1
bundles src/plugin.ts → com.****.****.sdPlugin/bin/plugin.js...
created com.****.****.sdPlugin/bin/plugin.js in 2.9s
watch.onEnd $ streamdeck restart com.****.****
✔ Restarted com.****.****

[2024-12-09 18:46:43] waiting for changes...

これを実行中に、PC上のStream Deckアプリの表示がリロードされ、アプリウィンドウ右側のプラグイン一覧にtestカテゴリのcounterプラグインが表示されます。

これで、通常のプラグインと同様にStream Deck上に配置することできます。

watchスクリプトはホットリロードになっているようで、actions/increment-counter.tsなどのソースコードを変更すると、少し時間はかかりますが、アプリおよびデバイスへ反映されました。

これは便利ですね。

公式ドキュメントでは、以降の工程で、テストプラグインのカウンター機能をバイナリカウンタにしたり、256からゼロへリセットされる機能を設けたりしています。

バイナリカウンタについては、現時点（2024/12）ではすでに、テストプラグインは増加値を1～5までに変更できる機能が設けられていました。

VSCodeと接続したデバッグ方法も、上記のページで紹介されていました。

これにより、ステップ実行をはじめとするデバッグが可能となります。

以降でも、ドキュメントではさまざまな解説がされています。

終わりに

Node.js環境で開発できるということで、HTML/CSS/JSに関して多少知識はある程度のわたしでも、とっつきやすさを感じました。

開発方法についても、公式ドキュメントの説明でそれほどつっかからなかったので、はじめやすいです。

今のところ、つくりたいものは思いついていないのですが、題材となるものを考えて、何かつくってみたいと思います。

もし、共有できそうな情報ができましたら、また記事にするかも知れません。

ここまで読んでくださり、ありがとうございました。