XENEON EDGE用のカスタムウィジェットの作成方法

XENEON EDGEは単なるセカンダリディスプレイではありません。最も頻繁に確認したい情報を表示するスペースとして活用できます。iCUEには標準でウィジェットが用意されていますが、独自のウィジェットを作成することも可能です。カスタムシステムモニターや天気予報、あるいはさらに専門的な機能を求めている場合でも、ウィジェットの作成は想像以上に簡単です。

このガイドでは、カスタムウィジェットの仕組み、技術リファレンスの入手先、そしてAIツールを活用することでプロセスを劇的に効率化する方法について解説します。

カスタムウィジェットはHTML、CSS、JavaScriptで構築されており、Chromiumベースのレンダリングエンジン（QtWebEngine）上で動作します。

構造的には、各ウィジェットは、2つの必須ファイルを含むフォルダです：

• index.html：ウィジェットのエントリポイント（マークアップ、スタイル、およびスクリプト）。
• manifest.json：ウィジェットに関するメタデータ。名前、バージョン、対応デバイス、必要なプラグインなどが含まれます。

オプションのファイルには、追加のCSSやJavaScript、画像アセット、およびローカライズ用のtranslation.jsonが含まれます。

ここでは仕様をすべて繰り返すのではなく、マニフェスト形式に関する完全なリファレンス、ユーザーが設定可能なコントロールタイプ（スライダー、カラーピッカー、センサーセレクターなど）、センサーおよびメディア用のプラグインAPI、iCUEに接続するためのランタイムフックについては、すべてElgatoの公式ドキュメントに記載されています。そちらが公式な情報源であり、フレームワークの進化に合わせて常に最新の状態に保たれています。

• https://docs.elgato.com/icue/widgets/

CORSAIRは、この作業を簡単にするために「WidgetBuilder Kit」を提供しています。このキットは2つのパーツで構成されています：

• WidgetBuilder CLI (icuewidget)：新しいウィジェットフォルダを作成し、マニフェストとHTMLの検証を行い、その結果をiCUEにインポート可能な.icuewidgetファイルとしてパッケージ化するコマンドラインツールです。
• AIアシスタントのためのスキル：AIモデルに有効なiCUEウィジェットの生成方法を教える構造化されたプロンプト。

これらを組み合わせることで、スキャフォールド、生成、検証、パッケージ化という一連のプロセスをすべて網羅できます。WidgetBuilder Kitのダウンロードは以下からご利用いただけます。

カスタムHTMLウィジェットを作成するのに、ウェブ開発者である必要はありません。ClaudeやChatGPTなどのAIツールやその他の大規模言語モデルを使えば、平易な言葉で説明するだけで、実際に動作するウィジェットのコードを生成することができます。

WidgetBuilder Kitに含まれるスキルを、お好みのAIアシスタントにアップロードしてください。Claude、ChatGPT、Geminiなど、ファイルのアップロードに対応しているものであれば何でも利用可能です。このスキルは、ウィジェットの仕様、XENEON EDGE、ポンプ用LCD、キーボード用LCDのデバイスサイズと解像度、およびレイアウト、マニフェスト、プラグインの使用に関する規約について、モデルに事前学習を行います。

スキルが読み込まれたら、希望する内容を説明してください。例えば、次のような感じです：

「XENEON EDGE用のウィジェットを作成してください。背景はダークカラーで、温度に応じて緑から赤へと変化するカラーゲージでCPUとGPUの温度を表示し、設定パネルで警告閾値をカスタマイズできるようにしてください。」

AIがindex.html、manifest.json、および必要な補助ファイルを生成します。このスキルは、モデルを構造化されたワークフローに沿って進めます。具体的には、確認のための質問を行い、レイアウトを設計し、コードを生成し、結果のテストとパッケージ化を支援します。

表示したいデータの内容や表示形式について、具体的に明記してください。対象となるデバイス（XENEON EDGE、キーボードのLCD、ポンプのLCD、またはそのすべて）も明記してください。ユーザーが設定を変更できるようにしたい場合は、どのような項目を調整可能にするかを記述してください。また、ウィジェットに外部データ（天気、株価、APIから取得するデータなど）が必要な場合は、その旨を事前に伝えてください。そうすることで、AIがデータソースの選択について適切なアドバイスを行うことができます。

AIがファイルを生成したら、WidgetBuilder CLIで処理を行い、出力を検証して結果を.icuewidgetファイルにパッケージ化します。もし何か不備があれば、AIに変更点を指示してください。この反復的なプロセスにより、コーディングの経験がなくてもウィジェットを作成できるようになります。

ウィジェットのパッケージ作成が完了したら、iCUEの「ウィジェット」パネルにある「+」ボタンをクリックし、ファイルを選択してiCUEにインポートします。また、システム上の.icuewidgetファイルをダブルクリックしてもインポートできます。iCUEがファイルの検証を行い、問題がなければ、対応しているすべてのデバイスのウィジェット一覧にウィジェットが表示されます。

手作業でコードを書く場合でも、AIを使ってウィジェットを生成する場合でも、以下の点に留意してください：

一目でわかるようにしましょう。優れたウィジェットは、最も重要な情報を数秒以内に伝えます。表示内容を把握するためにウィジェットをじっくり見なければいけないようでは、複雑すぎます。重要なデータは目立つ場所に配置しましょう。

複数の状態を想定した設計を行いましょう。ウィジェットがネットワークデータやセンサーの測定値に依存している場合は、そのデータが利用できない場合にどうなるかを検討してください。初期化中は読み込み中の状態を表示し、問題が発生した場合は明確なエラーメッセージを表示します。また、画面が真っ白になるのではなく、オフラインを示すインジケーターと共に、最後に正常だったデータを表示し続けるのが理想的です。

画面サイズを考慮してください。XENEON EDGEのウィジェットスロットは、Small（横840×344）からExtra Large（横2536×696）まであります。ウィジェットが複数のサイズに対応している場合は、レスポンシブなレイアウトにしてください。単にすべての要素を拡大するだけではいけません。大きなサイズでは余分なスペースを活用して、より多くの情報を表示したり、読みやすさを向上させたりしてください。

実際のデバイスでテストしてください。ブラウザのプレビューでは問題なく見えても、XENEON EDGE本体では表示が異なる場合があります。ウィジェットをインポートしたら、完成とみなす前に実際のハードウェアで確認してください。

自信を持って作り上げたものができあがったら、それを他の人に公開する方法はいくつかあります。最も簡単なのは、.icuewidget ファイルとしてエクスポートし、友人やコミュニティのメンバーと直接共有することです。

ウィジェット開発者がElgato Marketplaceに直接公開できるクリエイター向けポータルがまもなく登場します。このポータルでは、無料および有料のウィジェットの両方がサポートされます。これにより、デザイナーや開発者は、より広範なXENEON EDGEコミュニティに確実にリーチできるようになります。