Mac のキーボードを楽にカスタムするアプリを作りたかった

真夏の自由研究〜AIを使って雑にアプリを作ろう！〜 9日目は shiro が担当します。

こんにちは。2025年4月に中途入社し、人事労務を開発しています、shiro です。今回は私が週末に個人開発で作っているアプリを紹介いたします。

解決したかったこと

私は普段は自作キーボードを使用して、かつキーの配置をゴリゴリにカスタマイズして使っています。一般的なものと比較して、配置が変わっていないアルファベットは「Q」と「A」の 2 つだけです。ただ、会議などがあってオフィス内を移動するとき、常に外付けのキーボードを携行するのは現実的ではありません。

この課題を Mac で解決するには、『Karabiner-Elements』というアプリを入れて、本体のキーボードの論理配列を編集することが有力な選択肢になります。複数のキーの同時押しなどの条件つきの入力も、Karabiner-Elements であれば、『complex modification』という機能で実現できます。しかし、この complex modification は JSON で記述する必要があり、複雑なルールを全てのキーを網羅しつつ直接編集するのは非常に骨が折れます。

この問題を、Karabiner-Elements のルールの記法に準拠したJSONを出力する Web GUI を用意することで解決しよう、というのが今回のアプリです。

出来上がったもの

shiroinock.github.io

GitHub Pages でホストしています。実際の Karabiner-Elements のプロファイルをアップロードすると、編集画面が開くようになっています。

Karabiner-Elements のプロファイルを編集する Web アプリ『Sling』の編集画面。 — 『Sling』の編集画面

どうやって作った？

Claude Max 20x を個人で契約し、Claude Code からの出力 100% で作成しています。

Claude Max の契約にお金をかけている分、このアプリの利用にあたってのお金をかけたくなかったので、静的なページでかつ軽量に作れるように技術スタックやホスティング先の選定の壁打ちから付き合ってもらったり、なるべく Claude Code に長時間自走してもらえるように実装予定の機能のアイデアを大量に作っておき、私の就寝中に実装してもらったりなど、業務では試せない使い方をすることを意識して作りました。

特に、Claude Code に自走してもらうということはつまり、人間への確認なしであらゆる処理を行う操作権限を与えておくということなので、開発環境を破壊されるリスクを背負います。夏にはピッタリの背筋が冷える感覚を味わいました。今のところ何事もなく開発できているのでよかったです。今になって、Dev Containers を使えばもっと心安らかに就寝できたかな、と反省しています。

難しかったこと

LLM はその特性上、文章の解釈をすることは得意です。一方で文章以外はあまり得意でなく、最近ではマルチモーダル対応の LLM もコーディングエージェントで利用可能になっていますが、その精度はあまり期待できません。今回のアプリでもその性質のために、UI がうまく作れずに苦労しました。

JIS（日本語配列）のエンターキーの UI。本来は左下が欠けるべきなのに右下が欠けた形状になっており、隣のキーとかぶっている状態のスクリーンショット — JIS（日本語配列）のエンターキーを作ろうとして右下が欠けてしまった。そもそも配置もおかしく、隣のキーの背後に埋まってしまっている。

ダークモードになっても白いままの JIS エンターキーのUIと、それを実装した Claude が「ダークモードに対応した」と言い張っているセッションのスクリーンショット — JIS エンターは SVG を使って特殊形状に対応した。しかし、色のプロパティを流し込む方法が異なるため白いまま。それでも「対応しました、完璧です！」と言い張る Claude。嘘つき。

自分自身で直接コードを編集した方が早いとわかっていながら、その気持ちをグッと我慢して、プロンプトを磨きました。

ファイル、該当の行数
使ってほしい値
あえてコンポーネントを入れ子にすることで配置を調整するテクニック

などなど… 要求することに対して、どのように言語化すれば内容が正しく伝わるかを吟味する癖がつきました。AI とのやりとりでターン数を削減しトークン使用量を節約できたり、出力の精度を高め手戻りを防ぐことで実装完了までリードタイムを短縮できたりなど、業務での AI 活用にもいいフィードバックになりました。 (余談ですが、このスキルは対人のコミュニケーションでも有用だと感じました。特にレビューコメントやドキュメンテーションに効くと思います。)

その甲斐あって、現在では JIS エンターの見た目の問題は解消しています！（代わりに他のキーのコンポーネントの色が壊れているのですが…時間がある時に直します…）

配置と色の問題が直った JIS エンターキーの UI のスクリーンショット — 綺麗な JIS エンター！

総括

AI を利用した開発の、特にフロントエンドでの難しさを存分に体感することができました。加えて、個人的にこれまでインフラやバックエンドでの経験が多かったので、手軽にフロントエンドの開発に着手して高速にアウトプットが出せるようになったことは大きな収穫でした。皆さんも、AI コーディングエージェントを使って、自分の欲しいと思ったアプリをシュッと作ってみるのはいかがでしょうか。

github.com

補遺

一通り作り終えてから、Karabiner-Elements の機能の制約によって、連続した 2 キーの押し込みが、先に打鍵したキーが離されるまでの間は強制的に同時押しと認識されてしまう問題が発覚しました。私自身の用途では暴発が絶えず、いまだに本格利用できていません。タイトル『作りたかった』をここで回収します。前提技術のリサーチは入念に行いましょう。