MENU
シニアが日々の課題をAIを使って解決しようとするサイト
  1. ホーム
  2. Codex / Claude Code
  3. CodexにStream Deck+の構成図を描かせた

CodexにStream Deck+の構成図を描かせた

Codex / Claude Code Stream Deck ＡＩ

下記の記事では、我が家のHOME Assistantに登録されているデバイスの構成図を作成した。複雑になってしまったもの、整理するのが面倒なものの構成図を作るというテーマで、別の対象を探したところ、Stream Deck+があることに気がついた。

Stream Deck+は複数のボタンやダイヤルがあり、それらを配置したページを切り替えることができる。また、複数のプロファイルを切り替えることができ、各プロファイルで多くのページを作成することができる。さらに、ボタンは、単押し、2回押し、長押しの操作を行うことができ、それぞれの押し方に機能を設定することができる。

今回は、「streamdeck-mcp」を使って、Stream Deck+の各ページのボタンに設定された機能の一覧、各プロファイルのページ構成をまとめた図を、Codexに依頼して作成した。他のMCPを使えばデバイス一覧表などを作成できるそうだが、今回は、使用実績のある「streamdeck-mcp」を使うことにした。完全な最終形というわけではないが、試行した内容を紹介する。

あわせて読みたい
Codexに我が家のHome Assistant構成図を描かせた Codexに各種Home Assistant構成図を描かせた

（注）本記事の内容は正確性を保証するものではない。

（2026年7月8日 追記）YouTube動画を追加しました。　https://youtu.be/b-KwgaUXB4M

目次

ざっくりした依頼から始めた

Stream Deck+の全てのボタン及びダイヤルの設定内容を、ツリー形式図や、ページ別構成図や、階層構造図など、さまざまな観点での一覧図にしたいと思います。一覧図の種類を検討し提案してください。ボタン表面に表示している画像も含めて検討してください

提案方針

「1枚の巨大な図」ではなく、複数の図を束ねた「Stream Deck+ 設定アトラス」にするのがおすすめです。

現在の実データは、概算で以下の規模です。

  • 上位プロファイル：29件
  • ページ：89件
  • ボタン割り当て：420件
  • ダイヤル割り当て：163件
  • 画像素材：723件
  • 外部スクリプト：16件

※ボタン・ダイヤル数は、全ページを横断した割り当て件数です。

色々と機能を試すためにしか使っていないので、無秩序にページが増え、数個のボタンしか機能を設定していないページも多い。そのために一覧表を作成して実態を把握し、不要なページの削除や、ボタンの集約などを行う。

一覧図（案）

種類内容
1. 全体構成図Stream Deck+ → プロファイル → ページの全体像
2. 階層ツリー図ページ、フォルダ、子ページ、プロファイル切替をツリー表示
3. ページ別配置図実機と同じ「ボタン4×2＋ダイヤル4個」の配置で再現
4. ページ遷移図戻る、次ページ、フォルダ、プロファイル切替の移動関係
5. アクション系統図ボタン → プラグイン／スクリプト → Home Assistantなどの操作先
6. 操作内容一覧図押下、長押し、回転左右、ダイヤル押下、タッチ操作を整理
7. 画像カタログボタン画像とダイヤル背景をサムネイルで一覧化
8. 重複・問題点図同名プロファイル、重複画像、参照切れ、未設定操作などを表示

特に「ページ別配置図」を中心成果物にします。各ボタンには次を表示します。

  • 実際の表面画像
  • 表示タイトル
  • ボタン番号
  • アクション名
  • プラグイン名
  • 呼び出すスクリプトや操作先
  • 複数状態がある場合の画像一覧
  • 動作確認状態

ダイヤルは、背景画像に加えて「左回転」「右回転」「押下」「タッチ」を分けて記載します。

画像の扱い

画像は単純にファイルを並べるだけでは不十分です。実際のボタン表面は「画像＋タイトル文字＋状態表示」で構成されるため、設定情報から画面を合成して再現します。

  • 通常・ON・OFFなど、全状態の画像を収録
  • ダイヤルのタッチストリップ背景も収録
  • 同じ画像は指紋比較で重複判定
  • 参照されていない画像は「未使用素材」に分類
  • 動的に生成される表示は「実行時表示」と明記
  • 723素材すべては画像カタログに掲載し、ページ図には使用中画像だけ掲載

推奨成果物

  • Stream_Deck_Plus_設定アトラス.pdf
    全体図・階層図・ページ別図をまとめた閲覧用資料
  • Stream_Deck_Plus_設定一覧.xlsx
    プロファイル、ページ、位置、画像、操作内容を検索できる台帳
  • streamdeck_atlas.html
    プロファイルやページをクリックして展開できるローカル閲覧版
  • page_images/
    ページごとの高解像度PNG
  • icon_catalog/
    ボタン画像・ダイヤル背景の一覧

実施計画

  1. 現在のプロファイルを読み取り専用でスナップショット化
  2. 29プロファイル・89ページの設定を共通形式に変換
  3. まず「プロファイル1／Codex_test」でページ図の見本を作成
  4. 見本の見やすさを確認後、全プロファイルへ展開
  5. ボタン画像、文字、ダイヤル、ページ遷移を照合
  6. PDF・Excel・HTML・PNGを一括生成

Stream Deck本体の設定は変更せず、.envのトークンなど秘密情報は一覧図に出しません。同名の「ホーム」「OBS Studio」などは、UUIDの短縮表示を併記して区別します。

この「全体PDF＋検索用Excel＋クリック可能HTML」の三本立てが、見やすさと保守性のバランスが最も良い構成です。

「推奨成果物」の作成を指示した

作成完了しました。

  • PDF：140ページ
  • ページ配置図：89枚
  • 画像カタログ：16枚・723素材
  • Excel：9シート
  • HTML：検索・ページ切替対応
  • Stream Deck設定は未変更、.envは非読取

[設定アトラス PDF]
Stream_Deck_Plus_設定アトラス_2026-07-06.pdf

[設定一覧 Excel]
Stream_Deck_Plus_設定一覧.xlsx

[ローカルHTML版]
streamdeck_atlas.html

[成果物一式]
フォルダ：streamdeck_atlas_2026-07-06

HTMLは参照切れゼロ・スクリプト構文正常を確認済みです。アプリ内ブラウザでの実表示だけは接続機能が利用できず未実施です。

[設定アトラス PDF]の「設定全体図」

各プロファイルのページ構成図
[設定アトラス PDF]の「ページ配置図」
プラグインの「ページ配置図」の例
画像カタログ例
[設定一覧 Excel]の「設定一覧」シート

Stream Deck+の動的表示

設定アトラス PDF（Stream_Deck_Plus_設定アトラス_2026-07-06.pdfに含まれていない「ページ配置図」があるようだったのでCodexに聞いてみた。

添付画像（下記画像）のページは、ページ配置図（PDFファイル）に記載されていますか

はい、記載されています。

PDFの 14ページ目です。

  • プロファイル：プロファイル1
  • ページ：ページ2
  • PDF上の名称：名称なしページ
  • 構成：ボタン8個・ダイヤル4個

外気温、居間、寝室、DJIプラグ、Finder、CPU、TV音量、Mac音量などが一致します。

ただし、添付画像の温度・天気・CPU使用率などは実行時の動的表示です。PDFでは保存画像がない部分を「HA」などの代替表示にしています。

機能の分かりやすい説明がないなどの課題もあるが、実行時のボタンの画像が表示されていないので、まずはこれに対する対策をCodexに相談した。

行時の動的表示を取得する方法はないのですか。他のMCPを用いる方法などでもいいです

あります。最も確実なのは、利用可能な Computer Use MCPでStream Deckアプリ画面を自動撮影する方法です。

推奨方法

  1. Stream Deckアプリを前面表示
  2. プロファイルを固定
  3. 各ページへ順番に移動
  4. 動的表示の更新を待つ
  5. 画面を撮影
  6. ボタン・タッチストリップ・ダイヤル領域を切り出す
  7. 現在のPDF配置図へ実画面として組み込む

添付画像のような、温度・CPU・天気・Home Assistant状態を含む表示を、そのまま取得できます。
まず「プロファイル1・ページ2」で試験取得するのが安全です。

ほかの方法

  • Home Assistant MCP＋画像再生成
    エンティティの現在値を取得してアイコンを再生成できます。ただし、CPU・RAM・天気プラグイン固有の見た目は完全再現できません。
  • Stream Deck SDK通信の捕捉
    プラグインは実行時画像をsetImageでStream Deckアプリへ送っています。実際に、このMacのHome Assistantプラグインも画像をData URIとして送信しています。Elgato公式SDK
    ただし、公式APIには現在表示中の画像を取得するgetImage相当が見当たりません。したがって通信を横取りするには、プラグイン改造またはWebSocketプロキシが必要です。これは精密ですが、更新で壊れやすい方法です。WebSocket API

現在のStream Deck MCPはプロファイルやページ設定の読み書きが中心で、実行中画面を取得する機能はありません。

結論として、Computer Use MCPによる全ページ自動スクリーンショット取得が、最も安全で見た目も正確です。

どれぐらいの作業量になるのか、動的表示をしているページ数を調べた。

動的表示をしているページの一覧表を作成してください

動的表示ページの一覧表を作成しました。

  • 対象ページ：46
  • ライブ情報ページ：8
  • 状態連動ページ：38
  • 動的操作：177
  • PDFページ番号・対象位置・取得優先度・判定理由を収録
「動的表示ページ」の一覧（動的表示ページといっても、ライブ情報ページや状態連動ページなどの種類がある）
関連する「プラグイン」や動的ページと判定した理由なども表示されている

ユーザーが手動で行う作業もあるのですか

完全に手動ではありません。
推奨方法は「CodexがMac上のStream Deckアプリを操作して、表示中の動的画面をスクリーンショット取得する」方式です。

ただし、最初だけユーザー側の協力が必要になる可能性があります。

必要になりそうなことは次の程度です。

  • Stream Deckアプリを起動しておく
  • macOSの「画面収録」「アクセシビリティ」許可が必要なら承認する
  • もしCodexからページ切替がうまくできない場合だけ、対象ページを表示してもらう
  • 実機側にしか出ない表示がある場合は、そのページ表示を手伝ってもらう

それ以外、つまり

  • 動的表示ページ一覧を見ながら対象ページを順に開く
  • 画面を撮影する
  • ボタン部分・タッチバー・ダイヤル部分を切り出す
  • 一覧表やPDFに反映する

このあたりはCodex側で進められます。

私の感覚では、現実的には「半自動」がいちばん安全です。
まず1ページだけ試験取得して、画像の切り出し精度と実際の動的表示が取れているか確認し、その後に全ページへ展開するのがよいです。

処理は「半自動」で行うとの回答であるが、ユーザーが具体的にどのように手伝うのかよく分からないが、macOSの「画面収録」「アクセシビリティ」を許可する方法を質問して、許可する設定を行った。

設定はこれで大丈夫です。実際に試験取得できました。

Codex Computer UseでStream Deckアプリを前面化し、現在表示中の「プロファイル1 / ページ2」の動的表示を画像として保存・切り出しまで確認しました。

試験切り出し画像はこちらです。

Codexのマウスも表示されている

確認できたこと：

  • 「画面収録」権限は有効
  • 「Codex Computer Use.app」のアクセシビリティ権限も有効
  • Stream Deckアプリの前面化（補足：アクティブウィンドウとして最前面に表示すること）が可能
  • 動的表示、温度・CPU/RAM・天気・Home Assistant系表示などを実画面として取得可能
  • ボタン、タッチバー、ダイヤル表示を一覧図用に切り出し可能

次は、この方式で「動的表示ページ一覧」に載っている対象ページを順番に開き、実画面キャプチャ付きの一覧資料へ反映できます。

何も設定しないページなどに対する処理を確認した。

ページ数が多いですが、何も設定されていないページは対象ではないのですね

はい、その理解で合っています。

今回の「動的表示ページの実画面キャプチャ」の対象は、基本的に次のページだけです。

  • 温度・天気・CPU/RAM・Home Assistantなど、表示内容が変化するページ
  • Wave Link、OBS、ホットキー切替など、状態に応じて見た目が変わる可能性があるページ
  • ボタン、タッチバー、ダイヤルに何らかの設定が入っているページ

逆に、次は対象外でよいです。

  • 何も設定されていない空ページ
  • ページだけ存在していて、ボタン・ダイヤル・タッチバーに実質的な設定がないページ
  • 完全に静的なアイコンだけで、既存PDFの内容で十分なページ

なので全ページを手で開いて撮る必要はありません。
先に作成した「動的表示ページ一覧」に基づいて、対象ページだけを順に取得する形がよいです。

目安としては、全89ページのうち、動的表示として拾うべき候補は46ページです。
その中でも本当に実時間の値を撮る優先度が高いのは、天気・温度・Home Assistant・CPU/RAMなどのページです。

全ての動的ページの処理を依頼

どうやらStream Dexkアプリのページ切り替えやプロファイル切り替えもCodexがやるということだったので全ての動的ページの処理を依頼した。

完了しました。Stream Deck+実機の動的表示対象ページを処理し、実画面キャプチャ付きの一覧資料を作成しました。

  • 取得対象: Stream Deck+実機の動的表示ページ 42ページ
  • エラー: 0件
  • 除外: 空ページ、完全静的ページ、別デバイスの動的ページ 4件
  • 復旧確認: 優先プロフィールと各プロフィールのCurrentPageは元の状態へ復旧済み

作成物はこちらです。

  • [Stream_Deck_Plus_動的表示実画面一覧_2026-07-06.pdf]
  • [runtime_capture_index.html]
  • [実画面キャプチャ画像フォルダ]
  • [取得結果メタデータ]

PDFは表紙・中身・最終ページを画像化して確認済みです。
温度、CPU、天気などの値は撮影時点の実行時表示です。

実画面キャプチャ一覧
実画面キャプチャ例

図解をより分かりやすく、また、各ボタンに機能説明を付けるなどの改良の余地はあるが、一応、ページやプロファイルの一覧化という目的は達成できた。

Codexの作業の邪魔をしていたかの確認

Codexの作業中に、私がスクリーンキャプチャを撮ったりして、作業の邪魔をしていたようなので、そのことについて質問した。

Computer Useの作業中に、私がスクリーンキャプチャを撮ったりましたので、作業の邪魔をしたかもしれません。作業中は、ユーザーが作業を行わない方がいいですね

はい、その通りです。Computer Useで画面操作・撮影をしている間は、できればユーザー側では操作しない方が安全です。

特に影響しやすいのは次です。

  • スクリーンショット撮影
  • ウィンドウ切り替え
  • クリック、ドラッグ、キー入力
  • Stream DeckアプリやCodexを前面/背面にする操作
  • macOSのスクリーンキャプチャ選択オーバーレイを出す操作

今回も途中で「スクリーンショット選択オーバーレイが写った画像」が一度ありました。
最終処理では取り直し・確認をしているので、成果物自体は問題ありません。

今後の運用としては、

「これからComputer Useで操作します」と私が言ったら、
「完了しました」と返すまでは、なるべくMacを触らずそのまま見守る

という形が一番安定します。

もし途中で止めたい場合は、操作せずにチャットで「止めて」と送ってもらうのが安全です。

作業中は、ときどき、ページの切り替わりが画面上で確認できたが、Stream Deckアプリが前面に表示され、Codexの画面が見えない状態で状況が分からなかったので、MacのCodexと連携させているiPhoneのCodexを開いたところ、Codexの作業を邪魔することなく、Codexの作業中のメッセージをモニターすることができた。このことについてCodexに確認した。

Stream Deckアプリが前面に出ている時、西行の状況が分からなかったので、iPhoneでCodexを開いてみたところ、モニタリングできました。この使い方に問題はありませんか

問題ありません。むしろ、その使い方はかなり良いです。

iPhone側でCodexの進行状況を見るだけなら、Macの前面アプリやスクリーンキャプチャには干渉しません。
なので、Stream DeckアプリをMacで前面に出したまま、iPhoneで「今作業中なのか」「承認待ちなのか」を確認するのは安全です。

注意点はこのくらいです。

  • iPhoneで見るだけならOK
  • iPhoneから「止めて」などチャットで指示するのもOK
  • 承認ボタンがiPhone側に出ているなら、そこで承認/拒否してOK
  • Mac側でCodexや別アプリを前面に出すのは避ける
  • Mac側でスクリーンショット、クリック、キー入力は避ける

つまり、作業中の監視は「Macを触らず、iPhoneで見る」が一番安全です。

今後はこちらも、Computer Use作業に入る前に「ここからMacは触らないでください」、終わったら「もう触って大丈夫です」と明確に言うようにします。安心感、大事ですからね。

苦労した点や工夫した点を聞いた

処理が完了すると、作業中の表示は見えなくなってしまうが、実際はページの切り替えに苦労しており、違う方法を試したりしていた。その点についても聞いてみた。

困難だった点、工夫した点を教えてください。作業中のメッセージを見ていたところ、Stream Deckアプリのページ切り替えや、プロファイル切り替えで試行錯誤していたように見えました。例えば、このような点です。

はい、見えていた通りです。
今回いちばん難しかったのは「Stream Deckアプリの表示を、確実に目的ページへ切り替えること」でした。

主な困難と工夫はこのあたりです。

  1. Stream DeckアプリのUI操作が素直ではなかった

Computer Useからは、ページ番号やプロフィール名は見えていました。たとえば「プロファイル1」「ページ1/2/3」などは読み取れました。

ただ、クリックしても期待通りに動かない場面がありました。

特にページ番号は、見た目上は「3」が選択状態になったのに、実際のキャンバス表示はページ2のまま、という状態が起きました。つまり「UI部品の選択」と「Stream Deckが内部的に表示しているページ」が一致しませんでした。

これは少し罠っぽかったです。
見た目だけ見れば成功に見えるので、設定データ側のCurrentPageも確認して「本当に切り替わっていない」と判断しました。

  1. プロファイル切り替えメニューが操作しづらかった

プロフィール名のドロップダウンもアクセシビリティ上は見えていましたが、通常クリックや座標クリックでは安定して開けませんでした。

Stream DeckアプリはQt系UIらしく、macOS標準アプリほどアクセシビリティ操作が素直に通らない印象でした。
ここで無理にクリック連打すると、誤操作や別ページの撮影ミスにつながるので、GUI操作だけで進めるのはやめました。

  1. 「UIをクリックして切り替える」方式から「状態を一時変更して再起動する」方式へ切り替えた

ここが今回の一番大きな工夫です。

最終的には、Stream Deckアプリのボタンを押してページを切り替えるのではなく、

  • Stream Deck+で優先表示するプロフィール
  • 各プロフィールのCurrentPage

だけを一時的に変更し、Stream Deckアプリを再起動して、そのページを表示させて撮影しました。

大事なのは、ボタン設定・ダイヤル設定・画像・アクション内容は変更していないことです。
変えたのは「今どのプロフィール/ページを表示するか」という現在位置だけです。

さらに、処理前に元の状態を保存して、最後に戻すようにしました。

  1. 復旧確認を二重にした

自動処理後に、

  • Stream Deck+の優先プロフィールが元の「プロファイル1」に戻っているか
  • 18個のStream Deck+プロフィールそれぞれのCurrentPageが元に戻っているか

を確認しました。

結果はCurrentPage不一致0件でした。
ここはかなり気を使いました。こういう作業は「撮れた」より「元に戻った」が大事なので。

  1. 画面キャプチャの切り出しも少し工夫が必要だった

Macの画面全体は3840×2160のRetina解像度で保存されますが、アプリのウィンドウ座標はmacOSのポイント単位です。
つまり単純に座標を使うとズレます。

そこで、

  • Stream Deckウィンドウの位置とサイズを取得
  • Retina倍率を考慮
  • ウィンドウ全体を切り出し
  • その中からStream Deck+デバイス表示部分を切り出し

という段階にしました。

これで、右側のアクション一覧やデスクトップ背景を含まず、Stream Deck+の表示部分だけを安定して取得できました。

  1. 「動的ページ全部」ではなく「Stream Deck+実機対象」に絞った

動的表示ページ一覧には46ページありましたが、その中にはStream Deck MK.2や仮想デッキ系のページも含まれていました。

今回の目的はStream Deck+なので、実機モデルがStream Deck+の42ページだけを対象にしました。これは処理ミスを減らすための絞り込みです。

  1. PDF生成でも軽い修正が必要だった

最初のPDFでは、表紙のプロフィール別一覧が溢れて、2ページ目がほぼ空になる問題が出ました。
そこで表紙レイアウトを2列に直し、PDFを作り直して、表紙・中身・最終ページをレンダリング確認しました。

まとめると、今回の山場は「Computer Useで見えているUIをそのまま信じない」ことでした。

見えている・クリックできる・選択状態に見える、だけでは不十分で、実際のStream Deck内部状態や撮影画像と照合しながら進める必要がありました。
最終的には、GUI操作に頼りすぎず、現在位置だけを安全に一時変更して撮る方式にしたのが、いちばん安定したポイントです。

苦労した点や工夫した点を尋ねたところ、堰を切ったように一気に回答が流れた。溜まっていた鬱憤を出力スピードで表現したようにも思えた。質問の雰囲気を少し変えるだけで、回答もそれに合わせて変わったように思える。

Codex / Claude Code Stream Deck ＡＩ
Codex computer use MCP Stream Deck Stream Deck+
目次