HTMLツール

無料 HTML Invoker Command Generator

Generate declarative command buttons for dialogs, popovers, and disclosure elements using the Invoker Commands API. No JavaScript needed.

ツールを読み込み中...

HTML Invoker Command Generatorとは

Invoker Commands APIはJavaScriptなしでボタンが他の要素を制御できるようにする宣言的HTML機能です。commandfor属性（ターゲット要素のIDを指す）とcommand属性（アクションを指定する）を使用することでボタンはダイアログの開閉、ポップオーバーの切り替え、details要素の展開/折りたたみ、カスタムコマンドイベントの発生ができます。これはonclickハンドラーを宣言的でアクセシブルなHTMLに置き換えます。

クイックアンサー

Invoker Commands APIを使用してJavaScriptなしでダイアログ、ポップオーバー、詳細要素を制御する宣言的ボタンを作成します。commandforをターゲット要素のIDに設定しcommandをアクション（show-modal、toggle-popover、open、close）に設定します。組み込みコマンドはネイティブに機能しカスタムコマンドはターゲットでcommandイベントを発生させます。

Last updated: 2026-05-28

制限事項

Invoker Commandsは特定のターゲットタイプでのみ機能します：dialog（show-modal、close）、popover（show-popover、hide-popover、toggle-popover）、details（open、close、toggle）。その他の要素にはカスタムコマンドイベントハンドラーが必要です。
ブラウザサポートはBaseline 2025：Chrome 117以上、Edge 117以上、Safari 18以上。Firefoxのサポートは開発中です。古いブラウザにはJavaScriptクリックハンドラーのフォールバックが必要です。
カスタムコマンドはcommandイベントを発生させますが組み込みの動作は実行しません。カスタムコマンドを処理するにはターゲットにJavaScriptイベントリスナーを追加する必要があります。

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

使い方

ターゲット要素のIDを入力しターゲットタイプ（dialog、popover、details、custom）を選択します。
コマンドを選択します。ターゲットタイプによってサポートされるコマンドが異なります（show-modal、toggle-popover、openなど）。
ボタンテキストを設定します。オプションでターゲット要素テンプレートとJSフォールバックを含めます。
生成されたHTMLをコピーします。サポートするブラウザでは組み込みコマンドにJavaScriptは不要です。

主な用途

ボタンが宣言的にダイアログを開くモーダルダイアログトリガーと同じく宣言的に機能するダイアログ内の閉じるボタンを作成します。
クリックハンドラーや状態管理なしでトグルボタン付きのポップオーバーメニューを構築します。
summary要素の代わりに外部ボタンで制御するdetails/開示ウィジェットを作成します。

用途

使用例

例

宣言的モーダルダイアログ

設定ダイアログに開くボタンと閉じるボタンが必要です。開くボタンにcommandfor="settings-dialog" command="show-modal"を使用しダイアログ内の閉じるボタンにcommand="close"を使用します。開閉動作にJavaScriptは不要です。

例

ポップオーバーメニューの切り替え

ユーザーメニューのポップオーバーが1つのボタンで開閉します。commandfor="user-menu" command="toggle-popover"を使用します。ブラウザがポップオーバーの状態を管理するためJavaScriptでの追跡は不要です。

よくあるミス

一致するターゲット要素IDなしでcommandforを使用するとボタンは静かに何も行いません。ターゲットIDが一致することを常に確認してください。
ターゲットタイプでサポートされていないコマンドを使用するとshow-modalはdialog要素でのみ機能しtoggle-popoverはpopover要素でのみ機能します。
invokerコマンドはBaseline 2025であることを忘れがちです。古いブラウザにはJavaScriptクリックハンドラーのフォールバックが必要です。

検証

コマンドボタンをクリックしターゲット要素が正しく開く、閉じる、または切り替わることを確認します。
JavaScriptを無効にしてテストし組み込みコマンドがスクリプトなしで機能することを確認します。

FAQ

HTML Invoker Command GeneratorのFAQ

InvokerコマンドはJavaScriptがまったくなくても機能しますか？

はいdialog、popover、details要素の組み込みコマンドの場合。ブラウザはshowModal()、close()、showPopover()、hidePopover()、toggleコマンドをネイティブに処理します。カスタムコマンドの場合はターゲット要素にcommandイベントリスナーを追加します。1つのリスナーですべてのコマンド呼び出しを処理します。

commandとonclickの違いは何ですか？

commandは宣言的でありブラウザにターゲット上で実行するアクションを指示します。onclickは命令的でありアクションを実行するJavaScriptを記述します。commandは組み込みアクションのためにJavaScriptなしで機能します。また支援技術に意図を伝えます。command="show-modal"のボタンは汎用的なクリックハンドラーよりも明確に目的を通知します。