1.配列の設計【手配線で自作キーボードを作る講座】

この記事は、【手配線で自作キーボードを作る講座】の第1回目です。 そのほかの記事はこちら↓

okayu-moka.hatenablog.com

配列を設計する

自作キーボードを作ろう！　となったら、最初にキー配列を決めるのが良いでしょう。 配列によって、キーの数、モデリングの難しさ、ProMicroの個数などが決まってきます。

自作キーボードの配列は作る人によって様々です。 ただ、ある程度パターンがありますので、いくつか設計のためのパターンを紹介していきます。

設計作業自体は、3DCADやイラストソフトが使えるなら、それらで簡単な図を描いておくのが良いと思います。なければ紙と鉛筆でも十分です。 最終的には3DCADでモデルを作りながら試行錯誤するので、なんとなくのイメージを描いておくだけで大丈夫です。

分割型か、一体型か

自作キーボードには左右分割キーボードが多い印象があります。 実際一度左右分割キーボードになれると、使用時の姿勢が非常に楽で、通常のキーボードが窮屈に感じます。一度は体験してみることをお勧めします。 分割キーボードにする場合、それぞれのキーボードを接続するためのケーブル（一般的には3.5mmのオーディオケーブル）が必要になります。また、ProMicroも分割台数分必要になります。

もちろん、通常のキーボードと同じように、すべてのキーが1つの筐体に搭載されている自作キーボードも作ることができます。 そのような一体型のキーボードの場合、オーディオケーブルは必要ありませんが、筐体のサイズが大きくなるため、家庭用の3Dプリンターでは印刷が難しい場合があります。3Dプリントサービスに発注する場合でも、規定のサイズ内に収まっているか確認しておいたほうが良いでしょう。 ProMicroは基本的には1台でOKですが、キー数が81を超える場合はProMicroを2台使うか、IOエキスパンダーなどが必要になります。

使えます！
ProMicroは最大18のデジタルピンが使えるので！

— ゆかり (@eucalyn_) 2018年7月30日

• 分割型
  • メリット
    • 自然な姿勢で使用できる（肩こり対策になる）
    • 1つの筐体のサイズが小さいので、家庭用3Dプリンターでも十分プリントできる
  • デメリット
    • 接続用のケーブルと、接続用の端子が必要
    • ProMicroが複数個必要
• 一体型
  • メリット
    • 分割型より作成が簡単
    • ケーブル等が不要
    • ProMicroが1台で済む（81キーまでは。それを超える場合は2台必要）
  • デメリット
    • サイズが大きいと家庭用3Dプリンターではプリントできない
      • モデリング段階で2つに分割しておき、後から接着するなどの方法はある

Ortholinear Layout（格子配列、直交配列）か、Staggered Layoutか、それ以外か

キー配列は大まかに分類して以下の3つに分けられます。

Ortholinear Layout

格子配列、直交配列と呼ばれるものです。 その名の通り、キーがすべて碁盤のようにきれいに並んでいるものです。

参考：Ortholinear - Self-Made Keyboards in Japan

キーボードがコンパクトになるというメリットがあります。 また、単純に格子に並べるだけなので、モデルの作成なども簡単です。

Staggered Layout

通常のキーボードのように、キーが少しズレているようなレイアウトです。 また、横ではなく縦方向にズレているようなものもあります。

参考：staggered layout - Self-Made Keyboards in Japan

横方向にズレているレイアウトは一般的なキーボードと同じような使用感にできるため、乗り換えが容易です。 また、自作キーボードの特殊な配列に慣れてしまって通常のキーボードが使えない、という事態も避けられます。（とはいっても慣れると割と両方使えるようになります。）

縦方向にズレている配列は、人間の手の形あわせた自然なズレになり、キーが押しやすくなるという狙いがあります。

それ以外

上記2パターンに該当しないようなものとして、立体的な配列や、Ortholinear と Staggered を組み合わせたものなどがあります。 結局は「自分が押しやすいと思う配列」を実現するため、あまり枠に囚われず自由に配置していいと思います。

平面の配列か、立体の配列か

一般的なキーボードは、平面にずらっとキーが並んでいます。 自作キーボードでは、平面に並べるという制約はありませんので、手の形に合わせた立体的な配列を採用しているものもあります。

平面的なキー配列にする場合、アクリル板などを用いて作成することができます。もちろん3Dプリンターを用いて作成することもできます。

立体的な配列にする場合、3Dプリンターのメリットを最大限に生かすことができます。 しかし立体的に配置する場合、キーピッチ（キーとキーの距離）の計算が難しかったり、 あまりに複雑な形状は家庭用3Dプリンターでは印刷が難しいなどの問題もあります。 （3Dプリントサービスでプリントする場合は、複雑な形状でも問題ないです。）

キーの割り当て

キーの位置だけではなく「どのキーにどの文字を割り当てるか」もある程度考えておくとよいでしょう。 使いながら変更していく部分ですが、不要だと思うキーは最初から無くしてしまうという手もあります。

一般的なCtrlの位置にキーがない配列や、CapsLockの位置がCtrlになっている配列が多いようです。

今回作成する自作キーボードの配列

今回作成する自作キーボードは以下のような配列にします。 （要はErgo42のクローンです）

• 左右分割型
• 平面の格子配列
• 縦4列、横7列

とりあえず平面に3DCADで配置してみました。これを草案として進めていきます。

次の記事：

okayu-moka.hatenablog.com

手配線で自作キーボードを作る講座

実際に自作キーボードを作成しながら、作り方を解説していく講座です。 自作キーボード初心者でも完成させられるよう、なるべく詳しく解説していきます。

この講座について

この講座は以下のような前提で進めていきます。

• 基本的には自分が学んだことをダラダラと書いたものです。
• 自前の3Dプリンター、もしくは3Dプリントサービスを利用して、自作キーボードを作成します。
• 販売されているキットを組み立てるのではなく、オリジナルの配列（または既存の配列のクローン）で作ります。
• PCB基板は作らず、電線を直接はんだ付けして、手配線（空中配線）します。
• マイコンは Pro Micro を使います。ファームウェアには QMK Firmware を使います。
• 3Dモデリングには Fusion360 を使います。
• キーキャップは購入します。（3Dプリンターで作ることもできるけど、今回はスルー）
• 読者のスキル的には、テキストエディタやCUIをある程度使用でき、問題が起きても自力で調べて解決できる程度の技術レベルを想定しています。
  • テキストエディタ、Git、MSYS2などのソフトウェアは使える前提です。
  • PC初心者や、テキストエディタって何？　というレベルの方には、厳しいと思います。

注意事項

• この講座を読んだからといって、すべての人が自作キーボードを作れるようになるわけではありません。
• 必要な道具・部品の購入ではネットショップを利用していますが、その際のトラブル等の責任は負いかねますのでご注意ください。
• アプリケーションのインストール手順、CUIの操作についてなど、自作キーボード自体にあまり関係のないところは省略しています。手順が分からなければ都度調べて対応してください。
• この講座で作るキーボードは LEDをつけません（光りません）。 これは単に、私が自作キーボードを作る理由が 「最も自分が使いやすいキーボードを追求するため」 だからです。光っても光らなくても、使い勝手には影響ないので……

なぜ手配線？

私がPCB基盤を作ったことがないからです。

というのは半分冗談で、実際のところは、基盤がなくても作れるからです。 なくてもいいのに、わざわざ作らなくてもいいじゃん？　というのが本音です。 世に色々と出回っている、アクリル版とLEDを使ったピカピカ光るキーボードにするなら必要ですが、3Dプリンターで作る場合、基盤が見えるような筐体デザインにはならないと思いますので、手配線で十分だと思います。

Gitリポジトリ

この講座のサンプルとして作成する3Dモデル、ファームウェアなどはすべて以下のリポジトリで公開しています。

github.com

また、完成後の状態はこんな感じです。

講座一覧

okayu-moka.hatenablog.com okayu-moka.hatenablog.com okayu-moka.hatenablog.com okayu-moka.hatenablog.com okayu-moka.hatenablog.com okayu-moka.hatenablog.com okayu-moka.hatenablog.com okayu-moka.hatenablog.com okayu-moka.hatenablog.com okayu-moka.hatenablog.com

大きなカーペットをノコギリでカットして可燃ごみで捨てる！

最近模様替えをしまして、部屋のカーペットも新しいものに変えました。 前に使っていたカーペットを捨てたいんですが、カーペットって粗大ゴミなんですね。 申請して引き取りに来てもらうのが面倒だったので、ノコギリで小さく切って可燃ゴミとして捨てることにしました。

※可燃ゴミとして捨てちゃダメとかそういう地区もあるのかもしれない。やるときは自己責任で

先に結論

思ったよりしんどい……普通に粗大ゴミで捨てたほうが楽かもしれない。 家の中にずっと置いておくのも邪魔なのでそういう時には切っちゃえばいいと思う。

買ったノコギリ

角利 粗大ごみ解体用 折込鋸 210mm

特別切れ味が悪いとかはないと思う。たぶん。

今回のターゲット

4年間お世話になりました。 5等分する想定で、あらかじめガムテープで固定しておきました。

切っていく！

やったるでー

まずは一本目。想像していたよりも切りにくい。カーペットの糸がなかなか断ち切れず、ノコギリの刃に絡みついたりしてどんどん重くなる。

断面はこんな感じ。無理やり引きちぎった感ある。

なんとか5等分しました。30分くらいかかったかな？ あとは可燃ゴミ用のゴミ袋にいれてポイ(ﾟДﾟ)ﾉ⌒*

そこそこ面倒だったし、室内でやるのも難しいので万人には勧められないけど、ベランダとか庭とかある方はやってみてもいいかもね！

グラフィックボード GeForce RTX 2070 を買ったのでRX480と比較

Oculus Rift Sを買ってVRを楽しんでいたけども、 RADEON RX480だと微妙にカクついたり画質が荒かったりしたので、グラボ買いました。

買ったのは ASUS の ROG-STRIX-RTX2070-O8G-GAMING です。

ASUS NVIDIA GeForce RTX 2070搭載 トリプルファンモデル 8GB ROG-STRIX-RTX2070-O8G-GAMING

実はあんまりグラボにお金かけたことなくて、3連ファンのモデルなんて初めて買いました。 箱の時点で「でかいなー」と思ってましたが、開封したら思った以上にでかくてびっくりしました。

外観。でかい。

中にはグラフィックボード本体、マニュアル、ドライバ、ケーブルをまとめるやつ、3ピン×2を8ピンに変換するコネクタが入ってました。

裏面はこんな感じ。今のケースだと見えないけど。

補助電源は6ピン＋8ピンが必要。

現行で使っていた SAPPHIRE の RADEON RX480 と比較するとこんな感じ。でかい。

取り付けるとこんな感じ。Gamingなんで光ります。

せっかくなのでFFXVのベンチを回してみました。

	RTX2070	RX480
FHD 高品質	8966 快適	4007 普通
4K 標準品質	4744 やや快適	2141 重い

RTX2070だと4Kでもなんとか遊べそうですね。

これだけの性能があればVRでも困らないハズ！

3Dプリンターで Oculus Rift S のケーブルを天井から吊るしてみた

2019/5/21 に発売された Oculus Rift S を買いました。 初めてのVR機器でしたが、主にBeatSaberが面白すぎて超ハマってます。

ところで、Oculus Rift S とおなじタイミングで Oculus Rift Quest という機種も発売されました。 Quest のウリはなんといっても PC不要＆ケーブルフリーという点で、安くVR入門するならベストの選択じゃないかなーと思います。 まぁ自分はPCゲームのModとか楽しみたかったので Rift S にしたんですが……

で、Rift S で遊んでいると、やっぱりケーブルが邪魔なわけです。 調べるとみんな天井からケーブルを吊るすようにして解決しているっぽいので、自分も頑張ってみました。

ただ我が家は賃貸かつ、屋根裏が見えている物件なので、ちょっと工夫が必要そうです。 久々に3Dプリンターに活躍してもらうことにしました。

買ったもの

100均でリールホルダーを買ってきました。 天井から吊るした状態でも立ったり座ったりできるように、こういう伸縮する部品が必要ですね。 2個買ったけど1個しか使いませんでした。

3Dプリンターでいろいろ作る

まずは天井の梁に引っ掛けるためのフックを作ります。

こんな感じに作って、適当に接着剤でくっつけて梁に引っ掛けます。

割と行けそう。

ここにさらにリールを引っ掛けるためのリングを作って、吊るしました。

遊び終わったらフックから外しておけばそこまで邪魔にならない。

吊るしてみて

• Good
  • ケーブルを踏まない安心感
  • 動いてもある程度伸縮してくれる
  • やっぱり3Dプリンター便利だな！
• Bad
  • 手作り感満載で若干ダサい
  • 遊ぶ前の準備（フックに引っ掛けなおしたり）の手間が増えた＝遊ぶための心理的なハードルが上がった

BeatSaberはそこまで動き回らないですが、FPSみたいなゲームをやるならやっぱり吊るしたほうがいいんじゃないかなーと思います。

PixiJSで日本語フォントが見切れる問題の対応

PixiJSのバージョンは4.8.4です。 指定のフォントで描画したいだけなのにすごく困った。

最初に結論

PIXI.TextMetrics.BASELINE_SYMBOLに適当な全角文字を追加してやればOK。

PIXI.TextMetrics.BASELINE_SYMBOL += "あ｜";

詳細

以下は Mplus 1m regularで描画したとき。

const width = 500;
const height = 200; 
const renderer = PIXI.autoDetectRenderer(width, height, {
  backgroundColor: 0x000000
});
document.querySelector("body").appendChild(renderer.view);
var container = new PIXI.Container();

var textStyle = new PIXI.TextStyle({
    fontFamily: ["M+ 1m"],
    fontSize: 24, 
    fontWeight: "normal",
    fill: 0xffffff,
});
var sprite = new PIXI.Text("Hogeあいうえお", textStyle);
sprite.anchor.set(0.5);
sprite.x = width / 2;
sprite.y = height / 2;

container.addChild(sprite);
renderer.render(container);

ただPIXI.Textを生成して描画しているだけですが、見切れます。

調べてみると、このあたりの話をしているissueがありました。

https://github.com/pixijs/pixi.js/issues/4228

どうもPIXI.TextMetrics.measureFontの中でフォントのサイズを測ってるみたいですが、ここで使ってるサンプルの文字よりも大きい文字があると、見切れちゃうみたいですね。

以下、pixi.jsから抜粋。

TextMetrics.measureFont = function measureFont(font) {
    ...
    var metricsString = TextMetrics.METRICS_STRING + TextMetrics.BASELINE_SYMBOL;
    var width = Math.ceil(context.measureText(metricsString).width);
    var baseline = Math.ceil(context.measureText(TextMetrics.BASELINE_SYMBOL).width);
    ...
    context.fillText(metricsString, 0, baseline);
    ...
}

ということで、PIXI.TextMetrics.BASELINE_SYMBOL に適当な文字列を追加してやればいい。 とりあえず "あ｜" とか追加しておけば大丈夫じゃないでしょうか。

Vim上でDeniteでagでQuickfixぽくgrepしたい

とても頭の悪そうなタイトルですが、やりたいことは書いてあるとおりです。

※注意：Vimと書いてますが基本NeoVimでしか確認してないです。

参考にした記事

ほぼ書いてあるまんまです。

qiita.com

vimgrep hoge **/*.* | cw のときみたいに、Quickfixっぽい感じで表示したり、 grepにマッチした箇所を順番に巡ったりしたい。

agにする

grep じゃなくて ag を使うように設定します。ag 使ったこと無いけど……

call denite#custom#var('file_rec', 'command', ['ag', '--follow', '--nocolor', '--nogroup', '-g', ''])
call denite#custom#var('grep', 'command', ['ag'])
call denite#custom#var('grep', 'recursive_opts', [])
call denite#custom#var('grep', 'pattern_opt', [])
call denite#custom#var('grep', 'default_opts', ['--follow', '--no-group', '--no-color'])

:Denite grep と :Denite -resume のショートカットを作る

• :Denite grep -buffer-name=hoge：grep結果のバッファに名前をつける
• :Denite -resume -buffer-name=hoge：対応する名前のバッファを開き直す
• :Denite -resume -buffer-name=hoge -select=+1 -immediately：次のマッチ位置へジャンプ
• :Denite -resume -buffer-name=hoge -select=-1 -immediately：前のマッチ位置へジャンプ

ということで、これらを簡単に呼び出せるようにしておけば良いみたいです。

参考記事では <C-u>g などに割り当てていますが、個人的にはコマンドを作る方が好きです。

" grepする
command! Dgrep execute(":Denite grep -buffer-name=grep-buffer-denite")
" Denite grep結果を再表示する
command! Dresume execute(":Denite -resume -buffer-name=grep-buffer-denite")
" resumeしたgrep結果の次の行の結果へ飛ぶ
command! Dnext execute(":Denite -resume -buffer-name=grep-buffer-denite -select=+1 -immediately")
" resumeしたgrep結果の前の行の結果へ飛ぶ
command! Dprev execute(":Denite -resume -buffer-name=grep-buffer-denite -select=-1 -immediately")

• :Dgrep：grepする
• :Dresume：grep結果を再度開く
• :Dnext：次のgrep結果
• :Dprev：前のgrep結果