Helix 自作キーボードを作ってみた (注意点・詳しい実装など)

もう百番煎じくらいでしょうが、自作キーボードの名機Helix を作ってみたので記録します。

キーボードの自作は初めてなので、色々と調べながらの制作となりました。

ミスった箇所などを知見として残すので、これから始めてみたい方は参考にしてみてください。

yushakobo.jp

今回は、アクリル5行版キット(バックライト)を選択しました。

成果物

f:id:teriyaki398:20190902231032j:plain:w350

ビギナー向けのお話

Helix の製作にははんだ付けが必須となります。 敷居が高く感じるかもしれませんが、はんだ付けは意外と簡単なのでこれを機にチャレンジしてみてください。

その際に大切なことをまとめておきます。

必要な道具を揃える

電子工作自体が初めての場合は色々と準備が必要です。こちらのブログに良くまとまっています。自作キーボードのみであれば電子部品(コンデンサとか)は必要ないでしょう。

https://techlife.cookpad.com/entry/2015/10/28/080000

はんだごては調温機能のついた物を選んでください(温度に敏感なパーツがあるため)
他の方もおすすめしていますが、私はこちらを使って制作しました。

白光 ダイヤル式温度制御はんだこて FX600

それ以外に必要なものは以下の通りです。

キースイッチ

キーボードの押し心地を左右する部品です。今回はGateron 茶軸 5pin を選びました。実装後に変更できないと思ってください。

キーキャップ

キーの見栄えを左右する部品です。簡単に交換できるので直感で選びましょう。

左がスイッチ、右がキャップです。

f:id:teriyaki398:20190902231938j:plain:w350

TRRSケーブル

左右のキーボードを接続するためのオーディオケーブルのことです。4極であることに注意してください。4極とは、金属部分が4つのエリアに分かれてるやつのことです(黒い線は3本)

f:id:teriyaki398:20190902232356j:plain:w350

(秋葉原で480円だった)

動画を見て予習する

言葉で色々と説明されるよりも動画の方が絶対に分かりやすいです。

YouTube などで検索すると沢山見つかります、5分我慢して予習するだけではんだの成功率が圧倒的に上がるので、絶対に見てください

www.youtube.com

また、Helix では表面実装 と呼ばれる方法のはんだ付けが必要になります。そちらも確認しておきましょう。

フラックスを活用する

フラックスとははんだ促進剤のことで、はんだ付けしたい場所にこれを塗布しておくことで、はんだが勝手にうまく付着してくれます

初心者のうちは持っておけば安心でしょう。

ホーザン(HOZAN) フラックス 鉛フリーハンダ対応 便利なハケ付きキャップ付 容量30mL H-722

はんだ吸取器 or 吸取線を用意する

これらは覆水を盆に返す道具たちです。間違ってしまったはんだを取り除くことができます。

私ははんだ吸取器を使っていますが、吸取線の方が安全らしいのでそちらを使えば良いと思います。

いざ制作

他の方も言っていることですが、まずは公式のビルドガイドを見ましょう。しっかり読めば大体のことは解決します。

その上で、ここは注意した方が良いなと思った点などをまとめました。

ダイオードの実装

ダイオードはPCB(基盤)の裏から実装します。Helix のPCB には裏表がないので、左手用であれば以下の模様が描いてある面から実装することになります。

f:id:teriyaki398:20190902184646j:plain:w350

ダイオードには向きがあるので注意してください。||| の模様がある方がカソード(出口側)となります。シルク(基盤に各所に書かれてる白いやつ)に従って実装しましょう。

公式にも記載されている通り、各面で全てのダイオードは同じ向きになるので、シルクが見えない場所も他のダイオードの向きに従って実装することになります。

以下のように、||| マークが右側に来るようにダイオードをはんだ付けします。

f:id:teriyaki398:20190902203911p:plain:w350

バックライトLED の実装

Helix 制作の上で難しいとされているバックライトLED の実装ですが、コツさえつかめば大丈夫です。 こちらも裏面(ダイオードを実装した面と同じ面)に実装します。

まずはLEDの正しい向きを覚えます。LEDの裏面に銀色の部分が4つありますが、それぞれで形と大きさが違うのが分かるでしょうか。その中で一番面積の大きそうなやつを覚えてください。

それをPCB上の丸いシルクの位置に合わせます。するとちょうど画像のようになるはずです。

f:id:teriyaki398:20190902204218p:plain:w350

これはあまり書かれていないことなのですが、下段のLEDから実装するのが良いと思います。 というのも、だんだんコツを掴んで実装が上手になっていくのですが、最初に上段から実装してしまうと一番下手なLEDが上段に付けられます。Helix のLED は上から順に電流が流れていくので、もし上段でLEDが壊れているとLEDが1つも点灯しないという自体が起こり得ます。このような場合、LEDのせいなのか、ProMicro のせいなのかの問題の切り分けが面倒なのです。

準備ができたらはんだ付けします。公式でも注意されていることですが、推奨温度は220度です。高すぎる温度ではんだ付けするとLEDが壊れてしまうので注意しましょう。

f:id:teriyaki398:20190902224734j:plain:w350

左側のようにピッタリとはんだを流しましょう。右側左下のように金色の部分が見えていると不安です。

一段ごとにLEDの向きが変わるので注意

Pro Micro の実装

ProMicro と呼ばれるパーツにピンヘッダをくっつけるのですが、ProMicro と同じ袋には二種類のピンヘッダが入っています。

このとき、こちらのように足が三角に開いているピンヘッダ(スプリングピンヘッダ)を使用してください。

f:id:teriyaki398:20190902205855j:plain:w300

↓もう一方のピンヘッダ(足が開いていないし明らかにサイズ感が違う)

f:id:teriyaki398:20190902210103j:plain:w300

なぜ同梱されているのかは不明ですが、スプリングピンヘッダであれば基盤に押し付けられる形で接触するので、はめ込むだけで動作するはずです。

私は間違えて別のピンヘッダをはめてしまい、正しく動作せずしばらく悩みました。

(明らかに足の長い Pro Micro)

f:id:teriyaki398:20190902224932j:plain:w350

以下の方法でリカバリできました。

  • 足の長い部分を全てニッパで切断
  • PCB に裏面からもはんだ付け <- 大事

LED の動作確認

TRRSジャックとリセットスイッチを実装したら、一度LEDの動作確認をしましょう。

USBケーブルでPC に接続し、以下のリンクの「とりあえず動作を確認したい」の手順に従って動かしてみます。

github.com

このように全てのLED が点灯すればオッケーです(写真を撮り忘れたので画像は右手用です)

もし途中からLEDが点かない場合は高温によりLEDが焼けてしまったか、単にはんだ付を忘れている可能性があります。もう一度確認してみましょう。少しですが予備のLEDもあるはずです。

f:id:teriyaki398:20190902225359j:plain:w350

私の場合は運よく一度で全てのLEDが点灯しました。ここまできたらあとは難しいことはないでしょう。

キースイッチ実装とキーキャップの装着

詳しい説明は省きます。

今回、キースイッチには価格がお手頃で押し心地もいいGateron の茶軸(5-pin)を、 キーキャップにはタイプライター風キャップのe元素メカニカル式キーボード用キーキャップセットを選びました。

キーキャップは後からいくらでも変えられますが、スイッチの交換は非常に面倒なのでじっくり選びましょう。

yushakobo.jp

キースイッチとPCBの間にプレートを挟み忘れないようにしましょう

スイッチを差し込んだら裏面からはんだ付けします。

これで完成です!

f:id:teriyaki398:20190902231032j:plain:w350

【なるべく楽して】ゲームを製作・公開するまでの知見【Unity】

2018の大晦日unityroom にて3D脱出ゲーム「Pictures」を公開しました。

3D脱出ゲーム「Pictures」/ unityroom

簡単なプログラムなら組めるけど、グラフィック関係の知識は皆無。

そんな私が3Dの脱出ゲームをなるべく苦労せずに公開するまでの知見をまとめました。

  • ゲーム製作に興味がある。
  • プログラミングに興味がある。
  • Unityに興味がある。
  • でも苦労はしたくない。

そんな人が読んでみれば良いと思います。

1から100まで全部解説はできないので、足りない部分は調べながら補ってください。

制作に思い至るまで

私のプログラミングスキルは謙遜なしに普通です。

基礎的なところは分かるけど、複雑なアルゴリズムなどは扱えない。 AtCoder で言うと、C問題がちょうどいい難易度といった感じです。

この程度でも、ゲーム製作中にプログラミングで困ることはそれほど無いです。問題はグラフィックです。

過去数十年に渡るゲームの歴史で最も進化した部分はどこでしょうか?

おそらく答えはグラフィックです。

今やリリースされるゲームのほとんどが美麗なグラフィックでぬるぬる動作します。

ゲーム製作をしたい人にとってここが難関では無いでしょうか?

少なくとも私一人では、世の中で遊ばれているゲームほど綺麗なグラのゲームは作れません。 そもそも何がどうなってあんなにリアルになっているのか理解すらしていません。

それでも良いのです。今回はUnityというゲームエンジンを採用しましたが、 Unity は個人製作に非常に易しく、誰でも綺麗なグラのゲームが作れます。

Unity ってなに?

Unity とは無料で使えるゲームエンジンです。 そして、ゲームエンジンとはゲームを作るためのソフトです。そんな理解で良いと思います。

下の動画を見ると雰囲気が掴めるでしょう。

www.youtube.com

サンプルで動いているゲームはとても綺麗ですね。

すみません。さっきは綺麗なグラのゲームが簡単に作れるみたいに言いましたが、 上の動画ほど綺麗なグラフィックのゲームを作るのは簡単ではありません。

公式が公開しているようなゲームはプロがそれなりの人手と金と時間をかけて作っているので、クオリティが高いのは当然なのです。

大変なのは今回の主義に反します。我々はそこそこを目指しましょう。そこそこなら大丈夫です。

Unity でプログラミング

Unity でゲームを作るにはプログラミングが必要です。

ただ、よほどプログラミングに苦手意識がある人以外は大丈夫です。

普通のゲームならそこまで複雑なプログラムは必要ないからです。 実際、今回私が製作したゲームでも基礎的なところしか使いませんでした。

変数リストを理解していれば問題ないですし、構文もif文for文switch文 程度しか使ってないです。

クラス継承やコンストラクタなども使いましたが、調べれば山のように使い方が出てきます。

ここが大事な部分です。あなたが実装したい機能は既に誰かが作っています。 そして、そのやり方は解説されていると思って間違い無いでしょう。

それをパクれば良いのです。パクってるうちに自分でも書けるようになるのです。

最初からスマートにコーディングする必要は無いです。

冗長でも場当たり的でも動けば良い!動くのが大切です。 動かないのはゴミです。 スキルは長い時間をかけて、徐々に洗練していけば良いでしょう。

参考にするほどクオリティは高く無いですが、今回のゲームで作った機能などは当ブログの記事として残してあるので覗いてみてください。

teriyaki398.hatenablog.com

Unity でグラフィック

Unityアセットストアを活用する

Unity に触れたことがある人は知っていると思いますが、Unity にはアセットストアと呼ばれる素材の販売サイトがあります。

サイトに行けば分かりますが、ゲームに有用な素材などが大量に販売されています。
無料で使える素材も多いです。

ここから良い3Dモデルを探しましょう。これが一番早くて楽でクオリティも高いです。

例えばこれを見てください。

www.youtube.com

これは ArchVizPRO Interior Vol.6 という部屋と家具が内包された3Dモデルですが、今回のゲームではこれを使いました。

(通常価格50ドルとありますが、セールで半額になっていました。それでもまあまあ高いですが、 確実にそれ以上の価値があります。アフィリエイトでは無いのでリンクは貼りません。)

サイトで購入するとあなたのUnity で使えるようになります。

f:id:teriyaki398:20190101122025p:plain:w450

さらに、これらの3Dモデルは自由に使うことができます。 これらを好きに配置することで、自分なりの家が作れそうですね。

f:id:teriyaki398:20190101122631p:plain:w450

また、モデル以外にもマテリアル(テクスチャみたいな感じ)も自由に活用できます。

例えばUnity で下のような地面を作ったとします。無機質で真っ白な地面です。 (ゲームの種類によってはこれで良いかもしれませんが)

f:id:teriyaki398:20190101123220p:plain:w450

これに木目のマテリアルをつけると...

f:id:teriyaki398:20190101123349p:plain:w450

簡単にフローリングみたいな地面が作れます。また、石畳のマテリアルをつけると...

f:id:teriyaki398:20190101123500p:plain:w450

それっぽい地面ができました。

このようにUnity アセットストアで買ったものを活用することで、何一つ努力することなく、自分好みのゲームが製作できそうです。

巨人の肩に立つとはこのことです。

家具以外にも様々な種類のアセットがあるので、ぜひ一度アセットストアを見てみましょう。

全てを自分で1から作るのは大変です。カレーをスパイスの調合から作るようなものです。 市販のカレールーを買った方が簡単ですし、大抵の場合はそちらの方が美味しくできます。

Post Processing Stack を使う

Post Processing Stack とはその名前の通りポストプロセッシングを行うためのアセットです。 そしてポストプロセッシングとは、画面の見栄えを後から変える処理のことです。

Twitter やLINE で写真を送るときに後からエフェクトをかけて盛ったりしますよね? あれと全く同じことです。

現状Unity でポストプロセッシングを行うには、Post Processing Stack と呼ばれるアセットを用いるのが定番です。

assetstore.unity.com

これを活用することでグッと見栄えを良くすることができます。

Post Processing Stack には V1 とV2 がありますが、好きな方を使えば良いと思います。 良い感じにエフェクトをかけて見栄えを良くしましょう。

f:id:teriyaki398:20190102165357p:plain:w450
Post Processing Stack なし

f:id:teriyaki398:20190102165413p:plain:w450
Post Processing Stack あり

Post Processing Stack v1 を使おうとすると、MinAttributeがどうとかいうエラーが出ます(ver. 2018.3.0f2)

PostProcessing/Editor/PropertyDrawers/MinDrawer.cs 内のMinAttribute と書いてある箇所を全て UnityEngine.PostProcessing.MinAttribute に変更すると動作するようになります

これだけで、自分で全て製作するよりはずっと見栄えの良いゲームができると思います。

Unity で作ったゲームを公開する

作ったゲームを誰かに遊んでいただけるというのはとても嬉しいことです。

コミュニティの活性化にも繋がるので、クオリティの高い低いに関わらずぜひ公開しましょう

その公開の場としてunityroomがあります。 非常に簡単に投稿できる上に、安定してユーザーが集まっています。

フリーゲーム投稿サイト unityroom

ただし、私が今回投稿したゲームはあまりにも美麗なモデルを使いすぎてめちゃめちゃロードが長くなってしましました。 反省点ですね。

他にはAndroidiOS アプリとして、Playストアなどに公開することもできます。

unityroom よりは若干敷居が高いので、初めての人はunityroom が良いと思います。

(随時更新予定)

3D脱出ゲーム「Pictures」の攻略手順

unityroom で公開中の脱出ゲーム「Pictures」の攻略手順を残しておきます。

https://unityroom.com/games/escaping-game-pictures

詰まった時のための参考にしましょう。

具体的な内容は反転。

  • 白いロッカー(左下)の開け方

f:id:teriyaki398:20181230235304p:plain:w300

まずは写真のオブジェをクッションの下から拾う。

次に、机の上の写真を見ると、ロッカー風のボックスの台座に乗せられている写真が飾られているので、 同じように台座に乗せる。これでロッカーが開くようになる。

  • 白いロッカー(右上)の開け方

f:id:teriyaki398:20181230235513p:plain:w300

各スイッチをボックスに入っているカゴの位置に対応するように合わせる。

  • 大きい黄色いロッカーの開け方

f:id:teriyaki398:20181231000114p:plain:w300

部屋の中に各アイコンが描かれた絵があるので、それを探す。

絵の中に描かれている数が答えの数字に対応する。

ただし、ちょうちょのアイコンは斜めになっているので、同じ角度のちょうちょを数える必要がある。

  • 青いロッカーの開け方

f:id:teriyaki398:20181231000454p:plain:w300

上の画像の左に描かれている記号を用いる。

三角形、四角形、丸に数字を当てはめ、計算した結果が答えの数字になっている。 三角の数字は9 だが、最後の三角は反対向きになっているので、9 -> 6 に読み替える。

93 x 196 = 18228

三角の数字 : ソファーの左側 四角の数字 : 上の画像の右の絵をドライバーで外した壁 丸の数字 : 白いロッカーを開けた中のコイン

  • 黄色いロッカー(小さい方)の開け方

青いロッカーから手に入った謎の数独みたいな盤と、

カゴなどが入っているロッカーの裏側に落ちている盤を棒を使って取り出す。

これらの盤は組み合わせると数字の描かれた迷路になる。

迷路のスタートからゴールまで辿った数字が答えの数字に対応している。

  • 部屋からの脱出

青いロッカーから手に入れた鍵を使うと、部屋の扉が開けられる。

中にはパラグライダーの装備一式があり、手に入れられる。

これを用いて窓から脱出できる。

今回の製作にあたり知見などをまとめたので、こちらも参照していただければ幸いです。

teriyaki398.hatenablog.com