自作キーボード温泉街の歩き方

自作キーボードの世界は温泉に例えられます。自作キーボードの温泉街の楽しい歩き方を紹介します。

(初心者編)Remapを使ってキーマップを書き換えよう

こんにちは。自キ温泉ガイドのサリチル酸です。

f:id:Salicylic_acid3:20181119233252p:plain

今回はRemapという、国内で開発され2021年2月16日にオープンβテストが始まったWebソフトを使ったキーマップの変更方法を紹介したいと思います。

2022/4/6 内容の最新化を行いました。

2023/2/16 Remapの最新のQMKへの対応状況について書きました。

はじめに

以前VIAというキーマップ書き換えソフトの解説をしていますが、VIAは今までエディタでソースコードに向き合う必要があったキーマップ変更作業をグラフィカルに簡単に行えるもので、初心者だけでなく経験者にもいい体験を提供してくれるものでした。

今回解説するRemapというツールはVIAで必要だった端末へソフトのインストールが不要になり、Chromeブラウザから直接キーマップの変更を行えるようになったツールです。

Remapとは

国内の自作キーボード開発者である@yoichiro氏と@adamrocker氏が共同で開発されたオープンソースソフトウェアです。

@yoichiro氏のアドベントカレンダーの記事を読んで期待していた方も多いと思います。

www.eisbahn.jp

アドベントカレンダーの時はWebVIAという名前で開発を進めていましたが、Remapに改称した後にオープンβ版として公開されました。

RemapはQMKファームウェア(自作キーボードによく使われるオープンソースファームウェア)を書き込まれたキーボードのキーマップを、パソコン上のChrome画面から直接操作・反映できるWebソフトウェアです。

この直接操作・反映できるというところがポイントで、従来のConfiguratorでHexファイル(キーマップのファイル)を生成してToolboxで書き込むという方法では手間と時間がどうしても発生してしまいます。

それをこのRemapではパソコン上にソフトをインストールしなくても実施できます。

つまり、他のパソコンでもChromeさえ入っていたらすぐにキーマップを変更が可能という、キーマップの試行錯誤という自作キーボードの醍醐味を更にダイレクトに楽しめるのです。

f:id:Salicylic_acid3:20210217232138p:plain

Remapへのアクセス方法

Chromeブラウザで以下のリンクを開き、Remapへアクセスします。

remap-keys.app

キーボード設定画面を開く

f:id:Salicylic_acid3:20210303015418p:plain

「START REMAP FOR YOUR KEYBOARD」をクリックします

f:id:Salicylic_acid3:20210217232138p:plain

こんな画面が出てきます

キーボードを接続する

f:id:Salicylic_acid3:20210217233613p:plain

「+KEYBOARD」をクリックします

f:id:Salicylic_acid3:20210217233840p:plain

接続したいキーボードを選択し「接続」をクリックします

Remapにキーマップがマージされている場合

そのままキーマップ編集画面が表示されます。

この時、画面にはキーボードに書き込まれているキーマップが自動反映されています。

f:id:Salicylic_acid3:20210217233943p:plain

未発売のNaked64SFv3です。テストついでにマージしてもらいました。

Remapにキーマップがマージされていない場合

f:id:Salicylic_acid3:20210217234917p:plain

マージされていない場合キーマップJSONの取り込み画面が表示されます

f:id:Salicylic_acid3:20210217235106p:plain

使用したいキーボードのキーマップJSONをドラッグします

f:id:Salicylic_acid3:20210218000342p:plain

※このキーマップの読み込みは毎回、ソフトの起動毎に読み込みをする必要があります。

Tips.VIAにマージされているが、RemapにマージされていないキーマップJSONの場所について

以下のURLにJSONファイルが格納されております。

github.com

この中から使用したいキーボードのJSONファイルをダウンロードします。

例えば「DZ60 RGB v2」はこちら、「DZ60 Rev3.0」はこちらです。

ちなみにRemapの運用ポリシーとして@yoichiroさんのブログではこう書かれています。

ただし、キーボード定義JSONファイルは、その作者が権利を持っているという前提に立ち、勝手にRemapに取り込むことはしていません。あくまで権利をお持ちの方々にRemapへキーボード定義JSONファイルを登録していただく、という方針です。

なので、良かれと思っても他の方が設計したキーボードを登録しようとしてはいけません。

キーボード選択画面にキーボードが表示されない場合

f:id:Salicylic_acid3:20210218000635p:plain

VIA用のファームウェアが書き込まれていない可能性があります。

VIA用のファームウェアをQMK Toolboxで書き込んでください。

salicylic-acid3.hatenablog.com

VIA用のファームウェアは通常のファームウェアと違い、専用に用意する必要があります。

VIA用のファームウェアはそれぞれの作者の指定する場所か、Remapのカタログ機能に登録があるので、それぞれ見つけて書き込んでください。

Remapのファームウェアの書き込み・ダウンロード機能については後述します。

Remapでできること

Remap(2022/04/06時点)で出来ることは以下の通りです。

  1. キー配列(英語配列/日本語配列等)を変更する
  2. レイアウトを変更する
  3. キーボードをテストする
  4. キーマップを変更する
  5. マクロを作成する
  6. 変更したキーマップを書き込む
  7. ライティングを変更する
  8. キーボードを切り替える
  9. チートシートを出力する
  10. キーマップをセーブ/ロード/シェアする
  11. キーボードカタログを見る
  12. ファームウェアを書き込む

f:id:Salicylic_acid3:20220406203709p:plain

Naked64SFv3です

キー配列を変更する

最初に自分が使うキー配列に変更しておきましょう。

キー配列が違うとシフトキーを押しながら数字キーを押した時に入力される記号が異なり、記号のキーコードも微妙に異なりますのでキー設定時に結構困ります。

キー配列は右上の「English(US)」と書かれているプルダウンメニューを選択します。

赤丸部のJapaneseを選択することで日本語配列表示に切り替わる
f:id:Salicylic_acid3:20210303020138p:plain
f:id:Salicylic_acid3:20210303020203p:plain
左が英語配列、右が日本語配列です。私は日本語配列で利用しているため、英語配列での表示はかなり違和感がありました。
f:id:Salicylic_acid3:20210303020327p:plain
f:id:Salicylic_acid3:20210303020349p:plain
下の「SYMBOL」タブの記号も変化します。読み替え表などを用いて読み替えたりしてたので、これは凄く嬉しい機能です。

日本語配列についての詳しい解説は以下を参照してください。

salicylic-acid3.hatenablog.com

レイアウトを変更する

次に自分が使うレイアウトに変更しておきましょう。

左側の歯車マークをクリックし、自分が使うレイアウトに変更します。

f:id:Salicylic_acid3:20220406204823p:plain

レイアウト変更はキーマップ右側のボタンから変更できます

f:id:Salicylic_acid3:20220406204936p:plain

好きなレイアウトを選択します

f:id:Salicylic_acid3:20220406205024p:plain

レイアウトが変わりました

キーボードをテストする

レイアウトが決定したらキーボードのテストです。

テキストエディタなどでテストをしても良いのですが、Remapのテストモードを使用すると確実かつ簡単です。

f:id:Salicylic_acid3:20220406221026p:plain

反応した部分が青くなります。

f:id:Salicylic_acid3:20220406221107p:plain

ロータリーエンコーダの回転を擬似的なキーとしている部分についてはテストができないので注意してください。

f:id:Salicylic_acid3:20220406221238p:plain

KeyFuda02Mediapadだと赤枠部分はテストできません

キーマップを変更する

アルファキー(文字キー)とモデファイアキー(シフトとかの修飾キー)を変更する

キーコードを変更するには2種類の方法があります。

  1. 変更したいキーを選んで変更する。
  2. 下のキーコードからドラッグして置換する。

そんなに難しくは無いのですが、順に説明します。

変更したいキーを選んで変更する

f:id:Salicylic_acid3:20210218002810p:plain

ポップアップの「KEY」タブでキーコードを変更できる

f:id:Salicylic_acid3:20210218003032p:plain

「Modifiers」の「Ctrl」にチェックを入れるとKeycodeと同時押しになる。この場合は「Ctrl+Z」となる

f:id:Salicylic_acid3:20210218003459p:plain

「HOLD/TAP」タブからは長押しと短押しの動作を記載できる。この場合は短く押すと「Space」、長く押すと「Layer(1)」に切り替わる。
変更したいキーコードをドラッグして変更する

f:id:Salicylic_acid3:20210218003803p:plain

下のキーコード部分から適用したい部分にドラッグする

Tips.レイヤーキーの種類について解説

レイヤーを変更するキーを設定します。

自作キーボードの醍醐味のひとつなので、是非試行錯誤してみてください。

f:id:Salicylic_acid3:20210218005427p:plain

レイヤーの移動方法はいくつかのパターンがあり、使用方法に応じて設定します。

レイヤーキー 説明
TO

対象のレイヤーに切り替わります。

次々にレイヤーを切り替えていくようなときに使用します。

例)

f:id:Salicylic_acid3:20220406211050p:plain

TG

対象のレイヤーにトグルで切り替わります。

TGキーで切り替えた先のレイヤーには同じTGキーを配置して押すことでと元のレイヤーに戻る。

例)

f:id:Salicylic_acid3:20220406211222p:plain

MO

押している間対象のレイヤーに移動し、離すと戻ります。

例)

f:id:Salicylic_acid3:20220406211233p:plain

TT

MOと同じように押している間対象のレイヤーに移動し、離すと戻ります。

5回連続で押すとTGキーと同じように対象のレイヤーに移動したままになります。

f:id:Salicylic_acid3:20220406211413p:plain

OSL

次のキーが入力されるまで指定したレイヤーに移動します。

キーがなにか押されると元のレイヤーに戻ります。

f:id:Salicylic_acid3:20220406211605p:plain

DF

対象のレイヤーの設定を現在のレイヤーに上書きします。

※USBの抜き差しで初期化されます

f:id:Salicylic_acid3:20220406212350p:plain

以上のレイヤーキーに加えて、キーをクリックしてのHOLD/TAPで長押し/単押しでレイヤーを切り替えるように設定することができます。

私の設定の煮詰め方ノウハウについてはこちらを参照してください。

レイヤー関連のキーを設定する

各レイヤーに共通するキーを全レイヤーで書くのは大変なので、他レイヤーに関連するキーを設定します。

SYMBOLの左上にある2キーが該当します。

空白のキーは押しても何の効果も無いキーです。そのレイヤーでは押さないor押すと誤爆する場合に使用します。

▽のキーはレイヤー番号の一つ数の小さいレイヤーのキーを踏襲するキーです。

f:id:Salicylic_acid3:20220406212546p:plain

特殊キーを追加する

記号単体や様々な効果を発揮するキーを設定します。

f:id:Salicylic_acid3:20220406212650p:plain

種類が多く普通は使わなさそうなキーが多いので、ここではよく使用するマウスキーを抜粋して紹介します。

キーコード 説明
Mouse↑↓←→ マウスカーソルを動かします。
Mouse Btn Btn1は左クリック、Btn2は右クリック、Btn3は中央クリック、後の2つはよくわからない。。
Mouse Wh↑↓←→ マウスホイールを動かします。
Mouse Acc0~2 マウスカーソルを加速します。

ちなみにマウス機能はVIA用のファームウェアを作る時に有効化しておかないと機能しません。

もしマウスカーソルが動かない場合はキーボード設計者に確認してください。

ライティングキーを入力する

キーボードのLEDライトを制御するキーを設定します。

国内の自作キーボードでよく採用されているRGB(フルカラー)バックライトは様々なパターンで発光させることができます。

f:id:Salicylic_acid3:20220406212810p:plain

キーコード 説明
RGB Toggle LEDのオンオフをします。
RGB Mode -+ RGBのアニメーションモードを切り替える。
Hue -+ LEDの色相を増減させます。
Sat -+ LEDの彩度を増減させます。
Bright -+ LEDの輝度を増減させます。
Effect Speed -+ LEDアニメーションのスピードを増減させます。
RGB Mode P~G LEDアニメーションモードを変更します。

BMP関連のキーを変更する

BMPを利用している場合もRemapでキーコードを変更できます。

BMP固有のキーコードはBMPタグにまとめられています。

f:id:Salicylic_acid3:20220406214049p:plain

BMPを使用している時のみ現れるBMPタグ

それぞれのキーコードの説明は以下の通りです。

キーコード 説明
BLE DIS Bluetooth接続を無効化する
BLE EN Bluetooth接続を有効化する
USB DIS USB接続を無効化する
USB EN USB接続を有効化する
SEL BLE USB接続を無効化し、Bluetooth接続を有効化する
SEL USB Bluetooth接続を無効化し、USB接続を有効化する
ADV IDX X番目に登録された機器と接続する
DEL IDX X番目に登録された機器との接続情報を削除する
DEL BNDS 全ての接続情報を削除する
ENT DFU ブートローダを開始する
ENT WEB Webコンフィギュレータを起動する
ENT SLP スリープモードに入る
BATT LV バッテリーの電圧を表示する(文字列が自動で入力されます)
SAVE EE

EEPROMに保存する

(LEDのレベルなどの情報が保存され、次にUSB接続されたときに自動でロードされる)

DEL EE EEPROMの情報を削除する(初期化する)
xEISU 英数を入力する
xKANA カナを入力する

マクロを作成する

マクロ機能という、あらかじめ登録しておいた動作を自動で行う機能を使用できます。

※パスワードを登録しておくのはセキュリティの脆弱性に繋がりますので非推奨です。

マクロの作成は「Functions」タブの最下部にあるMx(xは数字)の右下の鉛筆マークから行います。

f:id:Salicylic_acid3:20220406220219p:plain

通常のキーの設定方法と同じく、下のキーコードを画面上部にドラッグして設定していきます。

f:id:Salicylic_acid3:20220406220419p:plain

シフトキーを押しながら、などのモデファイアキーとの組み合わせは、モデファイアキーコードをドラッグした後、キーコード下部の「Hold」ボタンを押した後にキーコードを挿入します。

f:id:Salicylic_acid3:20220406220555p:plain

シフトキーを押しながら「1」、つまりこれで「!」となる

後は通常のキーと同じく、ドラッグしてキーコードをキーに適用してい来ます。

f:id:Salicylic_acid3:20220406220753p:plain

変更したキーマップを書き込む

VIAと違ってRemapは右上の「flash」ボタンを押さない限りは変更が反映されません。

f:id:Salicylic_acid3:20210218011222p:plain
f:id:Salicylic_acid3:20210218011402p:plain
右上の「flash」ボタンを押すとキーマップが書き込まれます。割と一瞬で書き換わります。

LEDライティングを変更する

右側のマークをクリックし、LEDの発光モードを変更します。

f:id:Salicylic_acid3:20220406212923p:plain

LED発光モードはキーマップと違い、この設定を変更したら即時反映されるので見た目にも面白いです。

f:id:Salicylic_acid3:20220406212955p:plain

キーボードを切り替える

対応キーボードを複数接続している場合、キーマップを変更するキーボードを切り替えることができます。

f:id:Salicylic_acid3:20210218011710p:plain

左上のキーボード名をクリックすると、キーマップを変更するキーボードを選択することができます。一度繋いだことがあればキーボード名が、なければ「+KEYBOARD」をクリックします。

チートシートを出力する

Remapはブラウザで動作するとはいえ、慣れるまでいつも傍らで開いて確認するというのも相当手間です。

そこでチートシートを出力して印刷しておくとひと目で確認できて便利です。

f:id:Salicylic_acid3:20210303020932p:plain

右上の「Get Ceat Seat(PDF)」をクリックするとPDFでダウンロードできる

画像

これ実は設計者が自分のキーボードのキーマップを公開するのに凄く便利だと思うんですよね。

キーマップをセーブ/ロード/シェアする

VIAではローカルにキーマップファイルJSONを保存していた形式でしたが、Remapはサーバ側にユーザ情報(GithubまたはGoogleアカウント)とセットで保存する形式となっています。

このセーブ/ロード機能はPC間で行えるため、他の端末ですぐに呼び出すことが可能です。

 使い方は簡単です。

画面右にある矢印のアイコンをクリックし、「SAVE CURRENT KEYMAP」をクリックし、Titleをつけて「SAVE」をクリックするだけです。

f:id:Salicylic_acid3:20220406221645p:plain
f:id:Salicylic_acid3:20220406221744p:plain

ロードする時は設定したTitleをクリックし、「Flash」ボタンを押すだけで反映されます。

f:id:Salicylic_acid3:20210325005901p:plain

作ったキーマップをシェアする場合はセーブするときに「Share this keymap for other users」にチェックを入れてSAVEを押すだけです。

どういうキーマップなのか分かりやすいように説明を入れておくとより親切です。

f:id:Salicylic_acid3:20220406221729p:plain

他の人がシェアをしたキーマップを適用する時は「SHARED」タブからキーマップを選択してロードできます。

f:id:Salicylic_acid3:20220406222025p:plain

まだ誰もシェアしていない状態(悲しい)

他の人にオススメしたい時は「MINE」タブのキーマップの右側のクリップマークをクリックするとシェア用の画面が生成されます。

f:id:Salicylic_acid3:20220406222140p:plain
f:id:Salicylic_acid3:20220406222236p:plain

URLを貼り付けたり、ツイートボタンからツイートしてシェアしましょう。

f:id:Salicylic_acid3:20220406222347p:plain
f:id:Salicylic_acid3:20220406222325p:plain

キーボードカタログを見る

私が作ったキーボードカタログではなく、Remap上に登録されているキーボードの一覧と説明を参照できるキーボードカタログ機能が追加されました。

RemapのTop画面から「KEYBOARD CATALOG」ボタンを押すとカタログ画面が表示されます。

f:id:Salicylic_acid3:20220406222728p:plain

いろいろな検索キーがあるので、是非色々眺めてみてください!

f:id:Salicylic_acid3:20220406222845p:plain

ファームウェアを書き込む

キーボードカタログ機能から各キーボードのページに移動し、「FIRMWARE」タブからファームウェアのダウンロードとマイコンへの書き込みができます。

FLASH」ボタンを押します。

f:id:Salicylic_acid3:20220406223143p:plain

ブートローダを選択し、「FLASH」を押します。

※ProMicroならCaterina、Elite-CやKeyMicroなどのProMicro互換マイコンならDFUを選択してください。

※※WindowsパソコンでDFUブートローダの書き込みを実施する場合、ドライバを変更する必要があります。
  どうしてもRemapでやりたいのでなければ、RemapからファームウェアのHEXファイルをダウンロードし、QMK Toolboxでの書き込みをオススメします。

f:id:Salicylic_acid3:20220406223843p:plain

小さい画面が出てきたらキーボードのリセットボタンを押し、USB機器が抜ける音ともう一度刺さる音がします。

そして画面上のCOMポート番号(下の図ではCOM17となっている部分)が変化したことを確認して「接続」ボタンを押します。

f:id:Salicylic_acid3:20220406223931p:plain

書き込みが自動で始まり、最後に「Writing the firmware finished successfully.」と表示されたら書き込み完了です。

f:id:Salicylic_acid3:20220406224132p:plain

Tips:基本知識とか、設定方法とか

レイヤーとは

レイヤーとは市販のコンパクトキーボードにあるファンクションキーに該当するもので、使用する状況に応じて複数設定する事ができます。

レイヤーの異動はキーマップ編集画面の左のLAYERから変更します。

f:id:Salicylic_acid3:20210218010611p:plain

f:id:Salicylic_acid3:20210218012124p:plain
f:id:Salicylic_acid3:20210218012204p:plain
このキーマップの例の場合、レイヤー0のMO(2)キーを押している間、レイヤー2のキーマップに移動します。この動作はHHKBを想像すると分かりやすいと思います。

ハードリセットについて

キーマップの書き換え時に不具合が発生して、最初の状態に戻したいときはハードリセット(EEPROMリセット)を試してみてください。

方法はキーボードの一番左上のキー(概ねエスケープキー)を押しながらUSBを接続すると初期状態に戻ります。

個人的経験に基づく設定の煮詰め方

以下の記事はQMK Configuratorの記事ですが、煮詰める手法については共通です。

salicylic-acid3.hatenablog.com

Remap用ファームウェア、キーマップJSONの作成方法について

VIA用の記事ではありますが、以下の記事を参考にしてください。

使うファームウェア、キーマップJSONは同一です。

salicylic-acid3.hatenablog.com

RemapにキーマップJSONの登録する方法について

f:id:Salicylic_acid3:20220406224506p:plain

「REGISTER/MANAGE KEYBOARDS」をクリック

f:id:Salicylic_acid3:20210218103354p:plain

登録したキーボードがズラッと出る。右上の「+KEYBOARD」をクリック

f:id:Salicylic_acid3:20210218103509p:plain

登録したいキーボードのJSONをドラッグor選択します

f:id:Salicylic_acid3:20210218104042p:plain

「Product Name」にQMKファームウェアで定義している「PRODUCT」と同じ名前を記入します

フォームの指示に従って残りの項目を入力します。 

キーマップJSONとキーボード開発のエビデンス(他の人が勝手にキーボードを登録しないようにする証拠)に問題がなければレビューの後に承認されます。

カタログ/ファームウェアの登録について

Remapのカタログ機能とファームウェア書き込み機能はどちらも非常に便利なので、Remapに登録したら同時にやっておくと良いと思います。

登録が完了したキーボードの「DETAILS」を押します。

f:id:Salicylic_acid3:20220406224827p:plain

「CATALOG」タブをクリックし、写真のアップロードや説明を追加します。

f:id:Salicylic_acid3:20220406224925p:plain

FIRMWARE」タブをクリックし、HEXファイルをドラッグした上で名前、説明、ソースコードのURLなどを入力し、「Flash Firmware Support」をYesを選択した上で「UPLOAD」ボタンを押します。

f:id:Salicylic_acid3:20220406225115p:plain

Remapの最新のQMKへの対応状況

本記事更新時点(2023/2/16)ではRemapは最新のQMKのバージョンである19には追従していません。

よって、最新の環境でファームウェアを作成するとRemapでは対応できないということになります。

もしRemapを使用していて、レイヤーキーなどを設定しても他のキーとして認識してしまう場合、このバージョン違いによる影響の可能性があります。

その場合は、VIAを使用してみてください。

salicylic-acid3.hatenablog.com

www.eisbahn.jp

Remapに貢献する

ユーザからのフィードバックは非常にありがたいとのことなので、不具合報告や機能要望についてGitHub IssuesまたはRemapのDiscodeサーバへ寄せるとより良いものにできると思います。

github.com

discord.gg

おわりに

Remapについて出来る限り詳しく解説してみましたが、いかがでしたでしょうか。

本記事の記載内容に対して変更や更新要望等あれば遠慮なく私のDiscordまでどうぞ。

salicylic-acid3.hatenablog.com

Remap自体の不具合報告は上記のRemapのDiscodeサーバ等へお願いします。

本記事はNaked64SF v3で書きました。