1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ノートPCの内蔵キーボードで自作キーボードの便利機能を使いた過ぎてWebキーマッピングツール「haruka」を作った

1
Last updated at Posted at 2026-04-18

はじめに

自作キーボード界隈でよく見かけるタップ&ホールドやレイヤーって便利ですよね。個人的にもあのあたりの機能はかなり好きです。

ただ、自分はノートPCのポータビリティも捨てたくない派です。外にも持ち運びをするので重量的な観点から尊師スタイルはあまり好みではありません。ノートPCなのに蓋を閉じられなくなるのも、家の中で使う場合であっても個人的にはちょっと敬遠してしまいます。

とはいえ、ノートPCの内蔵キーボードでありながら、こんなことはやりたくなります。

  • Space を長押ししている間だけ数字レイヤーを出したい
  • CapsLock を Ctrl にしつつ、単押しでは別なキーを出したい
  • Mac と Windows で、できるだけ同じ思想のキーマップを使いたい

自分は MacBook Air では Karabiner-Elements、Windows のノートPCでは AutoHotkey v2 を使っていました。Mac と Windows で同じようなキーマップを再現するのに別々のツールを使っていたんですが、設定ファイルの書式がぜんぜん違うので割と苦労していました。

一度設定してしまえばそこまで高頻度に変更するものではないので、しばらくは平穏無事な生活を送っていました。しかし、キーマップというものは使い込むほどに課題が見えてきたりするもので、とうとう「もうちょっとあそこをこうしたいな」みたいな欲求が芽生えてきます。

最初は「もうあの面倒な設定ファイルは触りたくない」と我慢していたんですが、我慢できなくなるタイミングが来てしまいました。

そのときに「あ、両方に対応した設定ファイルを自動生成するキーマッピングツールを作ればいいんじゃね?」となりました。それが今回のツールを作ったキッカケです。

もともと AI 駆動開発の題材として、何か規模的にちょうどいい Web アプリケーションはないかなと探していたので、その意味でもちょうどいいタイミングでした。

haruka とは

haruka は、ブラウザ上でキーマップを視覚的に編集し、同じ設定から次の 3 フォーマットを出力できる Web アプリケーションです。

  • kanata (.kbd)
  • Karabiner-Elements (.json)
  • AutoHotkey v2 (.ahk)

インストール不要で、ブラウザだけで完結します。

1 つの UI をベースとしながら 3 つのフォーマットに対応しているのが強みです。ツールが違えばその分学習コストが掛かるので、本ツールの強みは学習コストの低さと言ってもいいかもしれません。

Mac と Windows をまたいで同じ思想のキーマップを作りたい人には、そこそこ刺さるんじゃないかなと思っています。

haruka を試す

どんな人向けか

ファーストターゲットは、自作キーボード民でありながら、ノートPCのポータビリティを重視してしまうために結果的に尊師スタイルを敬遠してしまうような人です。自分含めニッチオブニッチなターゲットですね。

それと、自作キーボードには手を出していないけど、タップ&ホールドのような便利機能を試してみたい方も対象になるのかなと思っています。

要するに、ノートPCの内蔵キーボードのまま、自作キーボードでよく使われる便利機能だけ取り込みたい人向けです。

haruka でできること

ひとまず主な機能はこんな感じです。

機能 説明
3 フォーマット出力 kanata / Karabiner-Elements / AutoHotkey v2 を 1 つの UI から生成
レイヤー 最大 8 層、リネーム・並べ替え対応
タップ&ホールド 短押しと長押しで別のアクションを割り当て
レイヤー制御 押している間だけ有効なレイヤー、恒久切り替えの両方に対応
修飾キー Ctrl / Shift / Alt / Meta を左右独立で指定可能
JIS → US リマップ JIS キーボード上で US 配列前提のキーマップを組める
URL シェア 設定を URL に埋め込んで共有
テンプレート JIS 109 / ANSI 104 / Apple JIS 112 / Apple US 109
日英切替 UI の日本語・英語切替

具体的な活用例

実際に自分がどう使っているのかをいくつか書いておきます。キーマップの最適解は人それぞれ違うので、あくまで一例です。

1. Space 長押しで左側にテンキー的な配列を再現する

ノートPCのビルトインなキーボードでありながら 30% レイアウトを追加コスト無しで実現できるのは実に気持ちがいいものです。完全な自己満足と言われればそれまでですが、こういうのは気持ちよさが大事です。

個人的には Space キーにタップ&ホールドを仕込んで別レイヤーにテンキー的な配列を再現しています。マウスを操作しながら左手のみで数字の入力が完結できるのは、スプレッドシート系ツールを多用する人には刺さるんじゃないでしょうか。

2. 矢印キーを HJKL に割り当てる

vim ユーザーならお馴染みの割り当てですね。

カーソル移動のたびに右手をホームポジションから矢印キーまで伸ばすのは、地味ですが積み重なるとそこそこロスがあります。HJKL に矢印キーを割り当てておくと、ホームポジション付近のまま移動操作が完結します。

単体で見ると小さな改善ですが、エディタ操作やテキスト編集の頻度が高い人ほど効いてくると思います。

3. CapsLock をタップで Tab、ホールドで Ctrl にする。ついでに物理 Tab は Shift+Tab にしておく

個人的に推しているキーの組み合わせがこのあたりです。

自作キーボードユーザーでなくとも多くのユーザーが愛してやまない CapsLock の置き換えですが、Windows ユーザーであれば Ctrl への置き換えが鉄板だと思います。やはりあのポジションには Ctrl キーがよく似合います。

自分はタップ&ホールドで、CapsLock をタップは Tab、ホールドは Ctrl にしています。さらに Tab キーを Shift+Tab に置き換えることで、Tab と Shift+Tab をワンタップで実現するようにしています。

日本語入力では、スペースキーによる変換以外にも Tab による予測変換を使うことがあると思いますが、Shift+Tab も比較的出番の多い操作に思えます。1 つ前の変換候補に戻るために、わざわざ Shift キーのお世話になるのは効率が悪いなと感じています。

矢印キーのように上下左右が同じノリで扱えるように、日本語変換でも次の変換と前の変換がなるべく対等になる方がスッキリしますね。

これが最強って話ではないですが、気軽に試すための選択肢が 1 つ増えたことに意義があるんじゃないかなって思います。

JIS → US リマップを入れた理由

JIS → US リマップはかなりニッチに見えると思いますが、自分にとっては必須機能でした。

手持ちのマシンが全て JIS 配列なんですが、自分が欲しいキーマップが US 配列を前提としているため、この機能を入れています。OS の設定を US 配列にしてしまえばいいんですが、それだと認識されなくなるキーがありました。

親指がお世話になる最下段のキー達を有効活用するには、OS の設定は JIS のままである必要がありました。そこで、OS 側は JIS のまま維持しつつ、出力されるキーコードだけを US 配列寄りに変換する機能を入れています。

万人向けではないですが、ここで困っている人にはかなり刺さるんじゃないかなと思います。

既存ツールと何が違うのか

kanata には公式・非公式の GUI ツールがいくつかありますし、Karabiner-Elements にも Web ルールエディタがあります。haruka の強みは、単に 3 フォーマットに対応していることだけではありません。

1. 1 つの UI をベースに 3 つのフォーマットを扱える

ツールが違えば、その分だけ学習コストが掛かります。haruka では 1 つの UI をベースに 3 つのフォーマットを扱えるので、出力先ごとに操作を覚え直さなくて済むようにしています。

2. Vial や Remap を触ったことがある人なら入りやすい

UI については、Vial や Remap、QMK Configurator などを使ったことがある方であれば、ひとまずすんなり使いこなせるようなデザインにしています。

自分がやりたかったことの大半がレイヤーとタップ&ホールドなので、UI がシンプルに収まっただけという面もありますが、結果的にはそこが良かったかなと思っています。

3. ブラウザですぐ触れる

インストール不要なので、「とりあえず試してみる」までの距離が短いです。キーマップは試行錯誤しながらブラッシュアップしていくものなので、初速の軽さは大事です。

要するに、haruka の強みは学習コストの低さにあるのかなと思っています。

開発で工夫したポイント

工夫したのは UI 周りです。

既存ツールの使用感を前提に、学習コストをどこまで下げられるかと、3 つのツールの仕様差異をどこで吸収するかは工夫しました。

実際に使ってみて、自分の思い描いた使用感になっているかどうかをトライ&エラーで詰めていった感じです。頭で思い描いても使用感として思い通りにならないことは多かったと記憶しています。

名前の由来

開発当初から Mac 側は Karabiner-Elements を使う前提としていましたが、Windows 側は AHK v2 から別なツールに乗り換えようと模索していました。そのときに kanata を知ったんです。

kanata の設定ファイルのフォーマットについて調べるうちに、「こりゃ、自分で書くより、ツールを作って書かせたほうが自分にとってメリットが大きいんじゃないか」と思い、ツール開発を考え始めました。

kanata という名称を最初は katana(刀)と空目してしまい、「刀の相棒なら鞘(saya)だろう」と勝手に盛り上がって、ツールの名称を Saya と名付けてしまいました。

その後、katana ではなく kanata であることが判明し、変更を考えることになります。saya という響きが女性の名前のようだったので、女性っぽい響きで kanata と相性のいいものを思い描いたときに haruka という名称が思い浮かびました。「遥か彼方(haruka kanata)」という言い回しもあるので、そう思い浮かんだんだと思います。

蛇足にはなりますが、大阪と神戸で 12 年ほど住んでいたこともあり、某漫才師のコンビ名が脳裏をよぎりましたが、響きの良さから haruka のままにしました。

技術スタック

ひとまず技術スタックはこんな感じです。

技術 用途
SvelteKit (Svelte 5 runes) + TypeScript フロントエンド実装
Tailwind CSS v4 スタイリング
CodeMirror 6 設定ファイルのプレビュー
Paraglide JS 日英 i18n
Vitest + Playwright テスト

おわりに

haruka は、もともと自分専用ツールとして作ったものです。ひとまず自分の欲しい機能は実装しきったので、今後はリクエストがあれば強化していく感じになると思います。

とはいえ、同じように「ノートPCの内蔵キーボードで、自作キーボードの便利機能を使いたい」と考える人には、そこそこ役に立つんじゃないかなと思っています。

外付けキーボードを持ち歩かなくても、ソフトウェアだけでキーマップをかなり作り込めますし、Mac と Windows をまたいで似た構成を使いたい人にも向いています。

自分専用ツールとして作ったので、今後のフィードバックに期待ですね。

haruka を試す

フィードバックや機能リクエストがあれば、GitHub の Issue で歓迎です。

GitHub リポジトリ

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?