StreamDeckの独自Plugin開発のTemplateを実際に書き出すまで

7889 ワード
StreamDeck Plugin Plugin テキストリンク

ゴール

StreamDeckの独自Pluginを開発したい人の第一歩の記事になればと思います。

手順

  • GithubからTemplateをclone
  • ディレクトリ、ファイルの文字列を置換
  • 配布ファイルを生成

参考サイト

GithubからTemplateをclone

git clone [email protected]:elgatosf/streamdeck-plugintemplate.git

ディレクトリ、ファイルの文字列を置換

com.elgato.templateをyour.identifier.pluginに置き換える。

例: com.iwaken.practice

配布ファイルを生成

配布するときは、Sourceを共有するのではなく、streamDeckPluginファイルを書き出して共有する。これはDeveloperToolにより生成することができる。

https://developer.elgato.com/documentation/stream-deck/sdk/exporting-your-plugin/
のDownloadからOSに応じてダウンロード

今回わかりやすいように作業ディレクトリ直下に置く

Macの場合

./DistributionTool -b -i /Sources/your.identifier.plugin.sdPlugin -o Release/

Windowsの場合

.\DistributionTool.exe -b -i .\Sources\your.identifier.plugin.sdPlugin\ -o .\Release\

で生成。
生成されたファイルをダブルクリックするとStreamDeckにインストールされる。

再インストールする場合

StreamDeckにすでにインストールされているとインストールされないため、再度インストールする場合は、StreamDeckからアンインストールしてから行う。

アイコンの変更

manifest.jsonを開き
IconとImageをvalueを変更します。

manifest.json
{
  "Actions": [
    {
      "Icon": "action/images/iwakenimage",
      "Name": "Example Action",
      "States": [
        {
          "Image": "action/images/iwaken"
        }
      ],
      "Tooltip": "This is an example tooltip",
      "UUID": "com.iwaken.practice.action"
    }
  ],
  "SDKVersion": 2,
  "Author": "Elgato",
  "CodePath": "index.html",
  "PropertyInspectorPath": "propertyinspector/index.html",
  "Description": "Example description",
  "Name": "Stream Deck Template",
  "Icon": "action/images/iwaken",
  "URL": "https://www.elgato.com/en/gaming/stream-deck",
  "Version": "1.0.1",
  "OS": [
    {
      "Platform": "mac",
      "MinimumVersion": "10.11"
    },
    {
      "Platform": "windows",
      "MinimumVersion": "10"
    }
  ],
  "Software": {
    "MinimumVersion": "4.1"
  }
}

このように

iwaken.png
[email protected]
iwakeniamge.png
[email protected]

を生成します。

これらがボタンのiconと右側のメニュー欄のiconに使用されます。