せんとーのブログ

競技プログラミングが好きです

分割キーボードを格安でテンティングする話 [Corne V4 Cherry]

つい最近、念願の自作キーボードデビューを果たし、Corne V4 Cherryを購入しました!!

Corne V4を選んだ理由は、とにかく始める難易度の低さ。 自作キーボードとしては珍しく、

  • はんだ付けが要らない
  • ケースが本体に付属
  • 本体の値段が安い

などなど始めやすい理由はいろいろ、、、
大学生の私には追加料金がかからないのはこれ以上ないメリットです。

そこで本題に入ります。

テンティングにはお金がかかる

です。
いや、そもそも自作キーボードってそういうものなんですけどね。

既存のテンティング方法で多いものは以下の2つでしょうか。 (実際に私は試してないので、詳細は参考記事を見るか、自分で調べてください)

カメラ用三脚

自作キーボードにマグネットシートを張り付け、磁力でカメラ用の三脚を取り付けるのが主流な様子。

  • メリット
    • 角度を細かく調整することができる
    • ガタつきなく、安定したテンティング
  • デメリット
    • かかる費用が高い
    • マグネットシートを張り付けるパターンが多いため、テンティング無との切り替えが難しい

参考 www.nogawanogawa.work

viblog.jp

スマホスタンド

スマホスタンドに直接キーボードを置く方法。

  • メリット
    • 費用が安い(最安なら100均でもいける?)
    • 取り外しが容易
  • デメリット
    • 角度調整が難しそう?(低角度のテンティングが難しい)
    • 滑る(いいスタンド買えば解決しそう)

参考 note.com

求めているものは?

自分の満たしたい最低条件がこちら。

  • 安い(失敗しても買い替えが負担にならないレベル)
  • 低角度のテンティングが可能
  • 持ち運びが楽
  • 取り外しが簡単

キー数の少ないキーボードを使う人であれば、1度慣れてしまうと普通のキーボードが使いにくく感じてしまうため、持ち運んで使用したい人も多い印象です。
外で使う時のためにも、テンティング無しの使い方も視野に入れたいところ、、、 となると、キーボードに直接貼り付けるタイプは避けたい。

PCスタンドボールを使ったテンティング

PC放熱スタンドボール!!!

item.rakuten.co.jp

これです!!私が欲しかったのは!!!
2個セットで100円。2組買っても200円。
私はセリアで手に入れました。(ダイソーでも見かけたことがあります)

実際にテンティングに使ってみるとこんな感じ。

実際にテンティングしたCorne V4の画像
テンティングしたCorne V4

...見た目はまあ、微妙?
うまく設置すればガタつきは全くなく、使ってみた感じもすごく良い。角度も完璧。

ただし設置位置がうまく合わなければガタついて安定しないので、キーボードの位置をずらしたりするのは少し手間かも。

とはいえ一度設置すれば滑らないし、持ち運びも楽なので大満足です。

お金のない学生さんにはもってこいなのではないでしょうか!?!?

追記:2週間ほど使ってみての感想

PC放熱スタンドボール、角度的にはベストマッチなのですが、使い続けていると滑ります、、、

左手側で左下のキーを押した時に「ガタッ」ってなったり、強めに押すとボールの位置がずれちゃったりが気になり始めてくるので、対策をしなければお役御免になりそうです。

とはいえ安いので良いのですが。

C0de ハッカソン with Pixiv 参加記(せんとー視点)

名古屋工業大学のプログラミング団体C0de内で行われた、Pixiv協賛部内ハッカソンの参加記。 「身体でプログラミング」開発チームのせんとーです。この記事はせんとー視点ですので、 もしかしたら間違っている内容とかもあるかもしれません。

チーム

簡単なチーム紹介です。

  • mzn:つよつよな先輩。今回の開発のチームリーダー。Brainf*ckのインタプリタなどの処理系を主に担当していただきました。 「身体でプログラミング」自体この方のアイデアです。
  • きーご:つよつよな先輩②。UIを担当していただきました。 React関連の処理は全てこの方が書いているはずです。
  • せんとー:私です。主に姿勢検出・判定の処理を担当しました。

参加前

前提として、ハッカソン参加前の私の知識レベルはこんなもんです。

git

  • チーム開発の経験はほぼ無し
  • pushやcommitをかろうじて触ったことがある
  • コミットメッセージの書き方に30分悩む

JavaScript (Typescript)

  • 入門記事を一周くらい読んだことがある
  • 開発経験無し
  • なんすか?DOMって

一方でチームメンバーの先輩二人は開発経験豊富なので、 足を引っ張らないよう最初は必死で勉強してました。 ハッカソンに参加した理由もチーム開発の経験を積みたいからなので、 先輩に囲まれて開発できるのは楽しかったです。 結局足は引っ張ったけど。 その分いっぱい学ばせてもらいました。

アプリの概要

「身体でプログラミング」という方針のもと、 WebアプリPhysi-Codeを作成しました。 基本的な仕様としては

  • カメラからユーザの姿勢を読み取る
  • 姿勢に対応する文字を画面に出力
  • 出力された文字列をBrainf*ckのソースコードとして実行

といった感じです。

入力画面

上に示したのが実際の文字入力画面です。 カメラ画面は9個に分割されており、各エリアに手や足を入れることで反応します。 特定の姿勢を取ることで、画面右に文字が出力され、プログラミングをすることが出来ます。

例えば'+'を出力したければ、足を開いて左下、右下のエリアに入れた状態で、画面右側に向かって正拳突きをすることで出力できます。 簡単ですね。

各文字と姿勢の対応表

使用技術

簡単に使用技術をまとめておきます。

  • Typescript
  • Next.js
  • React
  • tensorflow.js

React関連の 姿勢検知にはtensorflow.jsを使用しました。 tensorflow.jsはGoogleが提供しているオープンソース機械学習ライブラリです。

初動

ここから実際のアプリ開発の流れを追って書いていきます。

ハッカソン開始当初、決まっていた内容としては 「姿勢検知を使って身体でプログラミングをする」、 「特定の姿勢をbrainf*ckとかにマッピングすればいいんじゃない?」 くらいだったと思います。

文字入力の方法も最初は考え方が違って、「ジャンプ」や「スクワット」などの 動作を文字入力のトリガーとする予定でしたが、これは流石に難易度が高いという理由から 現在の"判定エリア"を使う入力方式を使うことが決まりました。

この辺から私も「あれ、もしかしてこのアプリ、めっちゃ面白いんじゃね・・・?」 と気付き始めます。そもそもエンジニアなんて机の前から動かない人に、 カメラの前で運動させる発想が面白いんですよね。本当にmzn先輩の アイデアは凄いです。別に媚売ってるわけじゃないですよ。

中盤

開発中盤の流れです。とは言っても私は 他の人がこの時何をしていたか殆ど知らないので、 基本的に自分のことだけ書こうと思います。 (多分mznさんはbrainf*ckの処理系、きーごさんはUI作成に取り掛かってた。)

私はとりあえずtensorflow.jsを触ってみることから始めました。 tensorflow.jsを使えば、カメラの映像を関数にぶち込むだけで姿勢検知をしてくれます。 私はこの時点でかなり感動してました。こんな便利なOSSが無料で使えるとは・・・。

tensorflow.jsを試してみるせんとー

そして判定エリアを作るところまで、割と早い段階で進められたと思います。 この時点ではまだ姿勢の判定は出来ず、あくまでエリア内に身体が入っているかを検知する機能の実装です。 姿勢検知の結果は、身体の各部位を座標で取得する事ができるので、ここまではめちゃめちゃ簡単でした。

判定エリアができた

勘の良い読者は既にお気付きかもしれませんが、上の写真の私が着てるのはパジャマです。

終盤

以降私は姿勢判定・文字入力の機能の作成をしました。 シンプルにJSの勉強が苦しかった。非同期処理のこととか、Promiseのこととか。 今までC++Javaのようなオブジェクト指向プログラミングを主に進めていた私にとっては、 JSは思ったとおりに書くことが出来ず悩んだことが多かったです。 とはいえ年始は暇だったので、姿勢判定の機能は割と早く完成した気がします。

最終発表直前は、主にきーご先輩が死にかけていました。私が書いた判定機能や、mzn先輩が書いた 処理系のReactへの統合もおそらく全てきーごさんがやってくれているはずです。 ほとんど寝てないそうでとても心配でした。 一方私は起きていても手伝えることがあんまりなかったので、 最終日は結構ぐっすり寝ました。ごめんなさい。

結果

結果として、我々「身体でプログラミング」班はなんと最優秀賞を受賞することができました。 決め手となったのは"アイデア"と”発表"だったと思います。

イデアを出したのはmznさんで、めちゃくちゃ面白い発表をしてくれたのはきーごさんなので、 私は見事に勝ち馬に乗ることが出来ました。やったね。

完走した感想

今回のハッカソンは先輩からすごい色々学ばせてもらいました。 gitやGitHubの使い方は特に、知っている人に聞かないと 自分では学ばないような機能が多いので、めちゃくちゃ勉強になりました。

その他だと、開発の流れがスムーズなので少し感動しました。 最初の会議でもmzn先輩が企画書をしっかりまとめてくれていて話し合いが無駄なく進みました。 チームリーダーってこーゆー能力が求められるんですね。

ほとんど知識がない状態からでも、それなりに開発に貢献する事ができて楽しかったです。 またこういう機会があればいいな。 ありがとうございました。