ショートカットで使える操作を増やし、既定のキーを決め直した

前回の記事では、キーボードショートカットのキーを、操作ごとに自由に割り当てられるようにした話を書きました。キーは画面で 1 つずつ変えるほか、JSON でまとめて書くこともできます。最後に「割り当てられる操作を増やし、既定のキーを振り直す」と書いたので、今回はその続きです。

今回は、キーを割り当てられる操作を 16 個から 41 個に増やし、既定のキー（何も変えていないときのキー）を最初から決め直しました。これまでのキーから実際に変わったのは 4 つです。この記事では、どのキーをどう変えたかと、そのときに決めたことを書きます。

操作を 16 個から 41 個に増やした

増やしたのは、画面のボタンやメニューにはあるのに、キーでは使えなかった操作です。

上の表は、増やした操作をおおまかに分けたものです。操作が増えたので、ショートカットの一覧も 4 つのまとまりから、「再生とテンポ」「トラックとビート」「音と録音」「履歴」「AI と BPM の検出」「表示」「設定とファイル」「ヘルプ」の 8 つに分け直しました。

既定のキーを決め直した

これまでの 16 個の操作のうち、既定のキーがあったのは 14 個で、操作が少なかったころに頭文字で決めたものでした。たとえば、トラックを追加は M（マルチトラックの M）、リセットは R、タイマーは T、ミュートは V（ボリュームの V）です。

操作が倍以上になると、頭文字では決めきれません。タップ（Tap）とタイマー（Timer）は同じ T で、録音（Rec）とリセット（Reset）も同じ R です。そこで、新しい操作も含めて、既定のキーを最初から決め直しました。

これまでのキーから変えたのは、次の 4 つです。⇧ は Shift、⌘ は Mac の ⌘（Windows では Ctrl）です。

空いた T はタップ、R は録音待機に使います。そのままにしたのは、Space（再生）・A（AI に BPM を尋ねる）・P（プログレッシブ）・D（テーマ）・L（設定の一覧）・F（全画面）・S（保存）・?（一覧）・⌘Z・⇧⌘Z です。

キーを選ぶときは、次の 4 つを決まりにしました。

よく使う操作ほど 1 文字に

練習のあいだに何度も押す操作ほど、修飾キーなしの 1 文字にしました。ほかのサービスで覚えたキーがそのまま使えるよう、よく知られた割り当てに合わせています。ミュートは YouTube と同じ M、次のトラックと前のトラックは Gmail と同じ J と K です。音量は、動画プレイヤーの mpv と同じく 0 で上げて 9 で下げます。

タップテンポは、曲に合わせて続けて押すので、Shift を押さない T にしました。タイマーのほうは、練習を始める前に 1 回押せば済むので ⇧T に移しました。

似た操作は隣のキーに

BPM の上げ下げは . と , にしました。キーボードで隣り合っていて、Shift を押した文字の > と < で向きもわかります。その > と < は、プログレッシブの目標の BPM の上げ下げに使いました。プログレッシブの開始の BPM（. と ,）と目標の BPM（> と <）を、同じ 2 つのキーで、Shift を押すかどうかだけで分けて動かせます。

最初は、キーに + と − が書かれている = と - も考えました。ところが日本語の配列（JIS）では、= は - と同じキーを Shift を押して打つ文字です。. と , は US 配列でも JIS 配列でも隣り合っていて、どちらの配列でも同じ押し方になります。

1 文字のキーは、うっかり押しても困らない操作だけ

前回の記事で書いたとおり、このアプリでは、修飾キーなしの 1 文字のキーもショートカットに使っています（入力欄で文字を打っているあいだは効きません）。そのぶん、ほかのキーを押すつもりで触れてしまうこともあります。

初期状態にリセットは、テンポ・拍子・トラックをまとめて最初に戻すので、押し間違えると作業が消えます。これまでは R の 1 文字でしたが、Shift を付けた ⇧R に移しました。選んでいるトラックを消す操作にも、既定のキーを割り当てていません。トラックの削除は ⌘Z で戻せますが、うっかり押しただけでトラックが消えるのは避けたいためです。

ブラウザと OS のキーを避ける

⌘ を付けたキーは、ブラウザや OS が使っていることが多いので、既定には ⌘Z・⇧⌘Z だけを残しました。今回増やした操作の既定のキーは、どれも 1 文字か、Shift と一緒に押すキーです。

自分で変えたキーはそのまま残る

既定のキーを変えると、もとのキーを覚えている人が迷います。どのキーを変えたかと理由は、リリース情報にも書きました。

キーを自分で変えていた人は、変えたキーのまま使えます。アプリが保存しているのは既定から変えた割り当てだけで、既定のままの操作は何も保存していないためです。既定のままにしていた操作は、新しい既定のキーになります。

// 保存するのは、既定と違う割り当てだけ
const simple = Object.fromEntries(
  SIMPLE_ACTIONS.filter(
    (action) =>
      !onlyChanged || keymap.simple[action.id] !== action.defaultKeystroke,
  ).map((action) => [action.id, keymap.simple[action.id]]),
);

たとえば、ミュートを自分で X に変えていた人は、振り直したあとも X でミュートします。何も変えていなかった人は、M でミュートするようになります。ミュートに前の既定と同じ V をわざわざ割り当て直していた人も、M になります。V は既定と同じだったので、保存されていなかったからです。

メニューにもキーを出す

アプリのメニューでは、各項目の右に、その操作のキーを表示しています。キーを割り当てられる操作が増えたので、メニューにもキーが出る項目が増えました。

既定のキーのない操作（オーディオから BPM を特定など）にも、自分でキーを割り当てれば、メニューにそのキーが出ます。

ボタンの部品の中にある操作をキーで動かす

増やした操作の多くは、アプリの状態をまとめて持つストア（zustand）の関数を呼ぶだけで済みました。BPM の上げ下げや、トラックの繰り返しの切り替えです。

困ったのは、必要な情報や処理が画面の部品の中にある操作です。タップテンポは、1 回目に押した時刻を TAP のボタンの部品の中で覚えているので、部品の外からは動かせません。お気に入りと URL のコピーも、サーバーとやり取りする処理が、設定の名前を表示する部品の中にあります。

そこで、キーが押されたときに何をするかを、部品の側から登録しておく形にしました。キーが押されると、登録された処理が動きます。再生と停止はもとからこの形で、それに倣っています。

// TAP のボタンの部品が、キーで呼ばれたときの動きを登録する
useEffect(
  () =>
    registerTapTempoController({
      tap: () => {
        setOpen("tap");
        tap();
      },
    }),
  [tap],
);

キーを押すと、TAP を押したときと同じく、パネルを開いてから数えます。登録している部品が画面にないときは、キーを押しても何も起きません。

録音待機の R は、REC のボタンが画面に出ていなくても使えるようにしました。REC のボタンははじめは出ていません。そのときに R を押すと、ボタンを出してから録音待機にします。待機しているかどうかが、画面で見えるようにするためです。

次・前のトラックの J・K は、トラックの帯（トラックが並んでいるところ）でトラックを押したときと同じく、鳴っていれば止めてから選びます。端のトラックでは、それより先に進みません。

プリセットとトラックは「何番目か」で選ぶ

「BPM を 120 にする」のように、値を指定して使う操作もあります。こちらは上の 41 個とは別に数えていて、3 個から 13 個に増やしました。増やした 10 個は次のとおりです。

迷ったのは、テンポのプリセットとトラックです。どちらも使う人が足したり消したりするので、割り当てた先が後から消えることがあります。プリセットやトラックの ID（1 つずつに付いた識別子）で割り当てを覚えておくと、消えたものを指す割り当てが残り、使う人に直してもらう手間が増えます。

そこで、画面に並んでいる順番で選ぶ形にしました。「2 番目のプリセット」と割り当てれば、プリセットを入れ替えても、その時点で 2 番目にあるプリセットの BPM になります。その番号のものがないときは、何もしません。

// 画面のプリセットのボタンの N 番目。ないときは何もしない
const preset = state.allPresets.filter((entry) => entry.enabled)[index - 1];
if (preset) state.setBpmRange([preset.bpm, preset.bpm]);

トラックの番号ごとに Alt と数字のキーを割り当てれば、alt-1（Alt と 1）で 1 番目、alt-2 で 2 番目のトラックに移れます。

キーマップの JSON に ctrl+j と書いたら

割り当てをまとめて書くキーマップの JSON では、キーを mod-shift-z のように - でつないで書きます。コードエディターの Zed と同じ書き方です。一方で、ctrl+j のように + でつなぐ書き方もよく見かけます。これを受け付けるかも決めました。

+ でつないだキーはエラーにして、- でつなぐ書き方をエラーの文で示すことにしました。

theme:switch のキー「ctrl+j」は、+ ではなく - でつなぎます（ctrl-j）。Windows の Ctrl と Mac の ⌘ は mod と書きます

+ を - と同じに読むだけなら、すぐにできます。それでも受け付けなかったのは、このキーマップの ctrl の意味のためです。前回の記事で書いたとおり、ctrl は Mac の Control キーを指し、Windows の Ctrl は mod が受け持ちます。ctrl のキーは、Control キーのない端末では効きません。Windows の人がいつもの書き方で ctrl+j と書くと、読み込めても Windows では効かない割り当てになります。

+ でつないだときだけ ctrl を mod と読む手もありました。ただ、それでは書き方によって同じ ctrl の意味が変わり、かえってわかりにくくなります。エラーにして、正しい書き方と mod のことを一緒に出すほうが、書いた人が一度で直せます。

mod++ のように + キーそのものを使うときは、最後の + をキーとして読み、mod-+ と書くようエラーの文で示します。