コマンドパレット Command Palette
キーボードショートカットで呼び出す検索・コマンド実行パレット。
ライブデモ
Ctrl + K または下のボタンで起動
ソースコード
<div class="demo-command-palette-wrap"><div class="demo-cmdpal-wrap">
<p class="demo-cmdpal-hint">Ctrl + K または下のボタンで起動</p>
<button class="demo-cmdpal-trigger" id="demoCmdTrigger">⌘ コマンドパレット</button>
<div class="demo-cmdpal-overlay" id="demoCmdOverlay">
<div class="demo-cmdpal" role="dialog" aria-label="コマンドパレット">
<div class="demo-cmdpal-input-wrap">
<span class="demo-cmdpal-icon">⌘</span>
<input class="demo-cmdpal-input" id="demoCmdInput" type="text" placeholder="コマンドを入力…" autocomplete="off">
</div>
<ul class="demo-cmdpal-list" id="demoCmdList">
<li class="demo-cmdpal-item active" data-cmd="home">🏠 ホームに移動</li>
<li class="demo-cmdpal-item" data-cmd="search">🔍 検索を開く</li>
<li class="demo-cmdpal-item" data-cmd="settings">⚙️ 設定</li>
<li class="demo-cmdpal-item" data-cmd="theme">🎨 テーマを変更</li>
<li class="demo-cmdpal-item" data-cmd="help">❓ ヘルプを表示</li>
</ul>
</div>
</div>
</div></div>.demo-command-palette-wrap { min-height: 400px; position: relative; }
.demo-cmdpal-hint { font-size: 12px; color: #999; margin: 0 0 8px; }
.demo-cmdpal-trigger {
padding: 10px 24px; border: 1px solid #e5e7eb; border-radius: 8px;
background: #fff; color: #555; cursor: pointer; font-size: 14px;
transition: all 0.2s;
}
.demo-cmdpal-trigger:hover {
border-color: var(--ui-primary); color: var(--ui-primary);
}
.demo-cmdpal-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.5); align-items: flex-start; justify-content: center; padding-top: 15vh; }
.demo-cmdpal-overlay.open { display: flex; }
.demo-cmdpal { background: #ffffff; border-radius: 12px; width: 90%; max-width: 560px; max-height: 60vh; overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.3); }
.demo-cmdpal-input-wrap {
display: flex; align-items: center; gap: 8px;
padding: 14px 16px; border-bottom: 1px solid #e5e7eb;
}
.demo-cmdpal-icon {
font-size: 16px; color: var(--ui-primary); font-weight: 700;
}
.demo-cmdpal-input {
flex: 1; border: none; outline: none; font-size: 15px;
color: #333; background: transparent;
}
.demo-cmdpal-list {
list-style: none; margin: 0; padding: 6px;
max-height: 200px; overflow-y: auto;
}
.demo-cmdpal-item {
padding: 10px 12px; border-radius: 8px; cursor: pointer;
font-size: 13px; color: #555; transition: all 0.15s;
}
.demo-cmdpal-item:hover,
.demo-cmdpal-item.active {
background: color-mix(in srgb, var(--ui-primary) 10%, #fff);
color: var(--ui-primary);
}
}
[data-ui-theme="dark"] .demo-cmdpal { background: #1f1f28; }(function() {
const trigger = document.getElementById('demoCmdTrigger');
const overlay = document.getElementById('demoCmdOverlay');
const input = document.getElementById('demoCmdInput');
const list = document.getElementById('demoCmdList');
const items = () => list.querySelectorAll('.demo-cmdpal-item:not(.hidden)');
let activeIdx = 0;
function open() {
overlay.classList.add('open');
input.value = '';
filterItems('');
setTimeout(() => input.focus(), 50);
}
function close() { overlay.classList.remove('open'); }
function filterItems(q) {
list.querySelectorAll('.demo-cmdpal-item').forEach(el => {
el.classList.toggle('hidden', q && !el.textContent.toLowerCase().includes(q.toLowerCase()));
el.style.display = (q && !el.textContent.toLowerCase().includes(q.toLowerCase())) ? 'none' : '';
});
activeIdx = 0; updateActive();
}
function updateActive() {
const all = items();
all.forEach((el, i) => el.classList.toggle('active', i === activeIdx));
}
trigger.addEventListener('click', open);
overlay.addEventListener('click', e => { if (e.target === overlay) close(); });
input.addEventListener('input', e => filterItems(e.target.value));
input.addEventListener('keydown', e => {
const all = items();
if (e.key === 'ArrowDown') { e.preventDefault(); activeIdx = (activeIdx + 1) % all.length; updateActive(); }
if (e.key === 'ArrowUp') { e.preventDefault(); activeIdx = (activeIdx - 1 + all.length) % all.length; updateActive(); }
if (e.key === 'Escape') close();
if (e.key === 'Enter' && all[activeIdx]) { close(); }
});
document.addEventListener('keydown', e => {
if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); open(); }
});
})();AIプロンプト
Basic
コマンドパレットをHTML/CSS/JSで作ってください。Ctrl+Kで画面中央にモーダルが開き、コマンドを検索・選択できます。
Custom
以下の仕様でコマンドパレットを実装してください。 - Ctrl+K / Cmd+K で起動 - インクリメンタル検索（入力に応じてリアルタイム絞り込み） - コマンドにカテゴリ分け（ナビ、設定、アクション） - プライマリカラー: #2563eb - 矢印キーで項目を選択、Enterで実行 - 最近使ったコマンドを上位に表示
Advanced
アクセシビリティ対応のコマンドパレットを実装してください。 - role="dialog" + role="listbox" + role="option" の適切な設定 - aria-activedescendant でキーボード選択を通知 - combobox パターン準拠 - ESCで閉じる + フォーカス復帰 - prefers-reduced-motion対応 - 仮想スクロール（大量コマンド対応） - ファジーマッチ検索アルゴリズム - コマンド履歴のlocalStorage永続化