はのちゃ爆発

はのちゃが技術ネタとか日常のこととかを書いてます。

オシャカワJK御用達キーボード Blockey のつくりかた

この記事は Blockey で書かれていません。

もくじ

これなに

先日(もう1ヶ月以上前ですが)開催された Maker Faire Tokyo 2018 にて、「ゆかり屋」さんから発表、頒布されたキーボード "Blockey" 。 ファッションキーボードというキャッチコピーの通り、キーボードとしての機能をちゃんと持ちながらそのコンパクトで愛らしく、またフルカラーLED搭載でキラキラ光る見た目はまさにオシャカワJK御用達のファッションアイテム。

と言われているとかいないとか。オシャカワJKはともかく非常に可愛らしい一品です。

booth.pm

しかし、その可愛らしい見た目とは裏腹に、組み立て難易度は自作キーボードキット界の中でも抜きん出ており、

  • 表面実装ダイオードをそれなりの数実装しなければならない
  • リセットスイッチも表面実装
  • 所狭しと並べられたタクトスイッチ
  • 一部のタクトスイッチの脚は基板とほぼツライチにすることを要求される
  • ちょっとでも手を抜くと一瞬でスイッチがガタガタになるシビアさ

などなど。気軽に手を出すと心が折れそうな気がする、そんなファッションキーボードです。

とはいえ、スイッチの脚の処理さえなんとかなってしまえば後はそんなに辛くないとも思われます。

公式ビルドログっぽいものが今のところない…?気がするので、今更感は有りますが簡単なビルドログを記しておきます。 ごめんなさいありました。でも書きます。

eucalyn.hatenadiary.jp

つくりかた

組み立てに必要なものは このへん とかを参考にしてください。 今回はそこまで温度にシビアなパーツはないので、温度調整半田ごては必須ではないですが、それでも FX600 はオススメです。

キットの全容はこんな感じです。

f:id:hano_tea:20180916220032j:plain
Blockey キットの中身。これはキーキャップなしです。

何はともあれ基板を取り出します。下の画像で見える面が裏面、ダイオードを付けたり、スイッチの脚などをはんだ付けする面になります。

f:id:hano_tea:20180916220256j:plain
基板裏面。

ダイオードの取り付け

表面実装ダイオードの取り付けは怖くないよ!以下の拙著や同僚氏の記事がわかりやすいので参考にどうぞ! (同僚氏の記事のほうがイラスト付きでわかりやすいです。)

critical-alert.hatenablog.com

hanocha.hateblo.jp

先程の写真で写っていた、@eucalyn_ の ID が入っている面にダイオードを実装していきます。 「コ」の字型の枠で囲まれ、また Dn のような番号が振られている部分がダイオードの実装位置です。

ダイオードには向きがありますが、線の描いてある側(カソード)が、「コ」の時の線閉じている方になるように実装していきます。 一部「コ」の字が見えない部分がありますが、裏面のダイオードの向きは全て同じなので、「コ」の字が見えているところに合わせて実装します。

また、 D48 の右横にある、隙間が大きめのランドは ダイオード用のランドではない ので気をつけてください。近くに SW63 とあるように、リセット用スイッチの取り付け位置になります。

f:id:hano_tea:20180916220644j:plain
裏面にダイオードを付け終わった基板。

裏が終わったら、表面にも10個ほどダイオードを実装する箇所があるので取り付けていきます。

表面ですが、 D59、7個縦にダイオードが並ぶところの真ん中は

取り付ける向きが逆

なので注意してください。それ以外は特に気をつけるところはありませんが、3つ横向き?に並んでいるところはややランドが狭く実装難度が高めなので慎重に。

ちなみにダイオードは多めに入っているので余ります。実装忘れにはくれぐれもご注意を。

ピンヘッダの実装

次に Pro micro 取付用のピンヘッダをはんだ付けしていきます。 裏面に黒い樹脂部分が来るように実装します。

取り付けの際、表面側の脚は全て「可能な限り飛び出ないように」切り落とします。可能なら基板からほぼ出っ張らないように。

f:id:hano_tea:20180916223201j:plain
脚を全然フラットに切れていない例

私は切れるニッパーを持っておらず、全然フラットにできませんでしたが、みなさんは極力平らにするようにしてください。 ここでフラットにするのをサボると、最終的にスイッチがガタガタになってしまい悲しいことになります。

リセット用表面実装タクトスイッチの実装

もう一つの表面実装部品、タクトスイッチの実装です。

f:id:hano_tea:20180916223535j:plain
取り付けられたタクトスイッチの図

やり方はダイオードの取り付けと同じなので割愛します。

スイッチの取り付け

いよいよキースイッチ用タクトスイッチの取り付けです。自分好みの配置でひたすらスイッチをはめ込んでいきます。

f:id:hano_tea:20180916224114j:plain
スイッチをはめ込んだ図(はんだ付け前)

f:id:hano_tea:20180916224128j:plain
スイッチをはめ込んだ図(裏、はんだ付け前)

一点注意するところとして、裏面、黒い帯が通っている Pro micro 取り付け位置になる部分は脚を切り落とす必要があります。 先程のツライチほど頑張る必要はありませんが、 Pro micro と干渉しない程度の高さに切り落としましょう。

f:id:hano_tea:20180916224712j:plain
この帯の部分は脚を頑張って切り取ります。

スイッチをはめたら、ひたすらはんだ付けをしていきます。スイッチが傾いた状態ではんだ付けしてしまわないように気をつけましょう。 後から傾いていることに気付いてもリカバリーはかなり難しいです(出来なくはないですが…)。

私は後から傾きに気付いてひどい目にあいました

Pro micro の取り付け

ここまでくれば完成は目前です。

Pro micro を裏面に、micro USB 端子を Blockey と Pro micro の基板で挟むような向きで実装します。 なんとなくわかるかと思いますが、 USB 端子が基板の切り欠きの方に来るようにします。

f:id:hano_tea:20180916225107j:plain
Pro micro の取り付け(はんだ付け前)

Pro micro をはんだ付けした後の脚も可能な限り切って短くしておきましょう。ケースと干渉してちゃんと閉まらない原因になります。

LEDの取り付け

はんだ付け最後の作業、LEDの取り付けです。地味に取り付けにくいパーツかもしれない。

LED に描いてある → の向きに電流を流すイメージ。なので → の流れの先頭にある3つの端子にはんだ付けします。 LED 側に予備ハンダしておくとはんだ付けが楽になるはず。

f:id:hano_tea:20180916232047j:plain
LEDの取り付け方。写真撮るの忘れて雑なのになって申し訳…

Blockey 基板と LED の対応は以下の通り。この組み合わせの通り適当な導線を繋いではんだ付けすれば OK です。 (基板側 - LED 側 の順で表記。 LED 側は写真の通り、上が 5V, 下が GND になる向きで表記しています)

  • LED (上) - DI
  • VCC (中央) - 5V
  • GND (下) - GND

ケースの組み立て

最後にケース用のアクリルと基板をボールチェーンに通しながら組み立てます。

ケースと基板の順番がうまく表現しにくいのですが、以下のような感じになるはず…? アクリルの色によって違うかもしれない。私のはマットクリアの例です。

  • 透明アクリル (厚み: 薄)
  • 透明アクリル (厚み: 厚)、 Pro micro 用間隙なし
  • Blockey 基板
  • 透明アクリル (厚み: 厚)、 Pro micro 用間隙あり
  • 半透明アクリル

あとはこの5枚を貫くようにしてネジ止めして完成!

QMK firmware の書き込み

ファームウェアの書き込みは他の自作キーボードと同じ方法で可能なので省略します。以下のレツプリ製作記事中にある QMK の項を参考にしてください。

hanocha.hateblo.jp

コマンドは make blockey:default:avrdude とかでいけるはず。多分。

完成!

これであなたもオシャカワJK!バッグにつけて色んな所に連れて行こう!

f:id:hano_tea:20180916233740j:plain

Ubuntu 18.04 LTS 上で rbenv を使って Ruby 2.3.6 を入れようとすると libssl-dev 周りでコケる

という現象が発生したので、その原因と解決策のメモ。 調べた感じ同じ現象でハマっている人はまだ居なさそうだった。

続きを読む

はのフロントエンド入門 #4 JS基礎 & ES6 編

久々の投稿です。フロントエンド入門その4、JS基礎とES6の話です。 React の話をするつもりでしたが、そもそもその前に JS そのものの話をしていなかったのでざっくりまとめます。

ES6のまとめ記事は色々あるので今更まとめ直すのもアレかと思いつつ、自分用の学習メモとして。

続きを読む

昨今のWebフロントエンドはきっとそんなに怖くない

というポエムです。

はのフロントエンド入門、次あたりから React とかに踏み込まないといけないっぽいのですが、 そこそこ気合い入れないと書ける気がしなかったのでちょっとポエミーなネタでお茶を濁します。

フロントエンドは怖いのか

かくいう私もフロントエンド怖かった一人です。弊社のフロントエンド勢がガチすぎて余計怖かったというのはある気がしますが…

そんな私も、今や(一応)弊社フロントエンドエンジニアの一員として日々JSと格闘する日々を送っています。半年でもそれなりに書けるようになった…はず。

で本題の「フロントエンドは怖いのか」なんですが、ここに来て、自分が何をどうやってフロントエンドエンジニアになったかを振り返ってみると、少なくとも

「フロントエンド始める前に思っていたほど怖いものではなかった」

と思います。

「怖い」とは

ていうかそもそも「フロントエンド怖い」って言った時の「怖い」って一体なんなんでしょう?

私が感じていた怖さは以下のようなものだった気がします。

  • 自分が知っている Web フロントエンド技術とモダンな Web フロントエンド技術が全く違うものに感じられて怖い
  • Node.js?サーバサイド?あれ、フロントエンドじゃないの?なにそれ怖い
  • React/Redux 使えないと人権なさそうで怖い
  • React ちょっと見てみたけど JSX が 気持ち悪い 怖い
  • Redux に至っては何してるのか全然理解できないし怖い
  • Webpack の設定とかよく分からない、 Babel?トランスパイル??
  • SPA ってよく出てくるけど結局上に出てきたようなものを使ってどうしろと?
  • React の公式チュートリアル
  • でもとりあえず jQuery はオワコンなんですよね?
  • CSS つらい、こわい。
  • フロントエンドってそもそもどこまでやるの、デザインセンスないから無理では?

などなど。なんかもっと色々あった気もする。

ざっくりまとめてしまうと「未知の世界すぎて怖い」というのが割としっくりくる気がします。

未知の世界、というだけであれば他の言語、フレームワークなども同じではあるのですが…

たとえばバックエンドの例として Ruby, Rails を考えてみると、 Rails は比較的やれること、やるべきことが分かりやすく、未知の世界なんだけど進むべき道は割とはっきり見える、という感じでしょうか。

他の言語も根幹はあんまり変わらない気がします。進むべき道がそれなりに見通しやすい、という意味で。(例外はあるかもしれませんが)

それに対してフロントエンドの場合、未知の世界であることは同じなのですが、見えている道が既にめちゃくちゃ分岐していて、どこからどう進めば良いのかが全然分からないから怖い、という感じ…だと私は思っています。

フロントエンドを始めたい、なんか React/Redux が流行りっぽい、Webpack はとりあえず使うよね、 ES6 で書かなきゃね、 TS もあるよ、 flow で型入れる? CSS Modules もないとね、 etcetc...

フロントエンドという言葉の指す範囲が広すぎるというのもありそうですが、最初に見える技術スタックの数が多すぎて進めなくなるのが恐怖感の根幹なような気がします。

怖そうで怖くない、ちょっとだけ怖いフロントエンド

という訳で、始める前は上記のような理由でめっちゃ怖かったフロントエンドですが、実際のところそこまで怯える必要はなかった、というのは記事の頭の方で言ったとおりです。

上述の通り、「道が見えないから怖い」のであって、ある程度道が見えさえすればあとはやるだけ。他の言語とあまり変わらず出来ます。

個人的には、

  • JavaScript 基礎をある程度ざっくりやる(EShoge とかは一旦おいといて)
  • その後 React or Vue, etc... 好きなフレームワークを使ってみる
  • 上記のライブラリを利用していくとそのうち Webpack とかが欲しくなってくる

という感じに、まずは基礎をある程度ちゃんとやるのが大切だと思っています。

自分の場合、 ES6 がどーの、クラスがどーのなどと言った雑な知識で JS の基礎を蔑ろにしていたため、なかなか体系立った学習が出来ていなかった時期がありました。

以下のような書籍で基礎的なところをざっと学んで、知っていることも多かったですが、読んだ後は今までピンとこなかったフレームワークの話などがすっと入ってくるようになりました。やっぱり基礎は重要。

React ときたら Redux に手を出したくなりますし、セットでよく出てくるものではあるのですが、個人的には Redux はすぐに手を出すものではないような気がしています。

生JS -> jQuery などの流れでもそうなのですが、必要最低限のものを一回試してみてからでないと、ライブラリの便利さ、必要性はなかなか理解できません。

結局のところ、「そのライブラリをいつどこで使いたいのか」がピンとこないと、なんかよく分からないものを触っている、という状態から抜け出しにくくなると思っています。

昨今のフロントエンドは変化が激しいです。よく使われる、流行りのライブラリも一瞬で変化していきます。が、その根底にあるのは基本的に HTML/CSS/JS です。

それらの基礎を固めた上で少しづつ React などのモダンなフロントエンド技術を少しづつ取り入れていくようにするのがいいんだろうな、と思います。


というまとまりのないポエム。

いつかもうちょっとちゃんと「自分がどうやってフロントエンドを学んだのか」を書きたい気持ち。

流行りの分割キーボード Helix を作った

Helix はいいぞ。

最近自作キーボードという文化が急激に世間に広まってきているようで、いろいろなところでキーボードを自作した人、キーボード自作本を購入する人を見かけるようになりました。

そんな今熱い自作キーボード界でも特にアツいのが "Helix" です。

今日はそんな Helix をGB(Group Buy, 共同購入)し、実際に組み立ててみました。

Helix の公式ウェブページ(?)はこちら。

yushakobo.jp

続きを読む

FFTC#2開催レポ その7 合宿中にやったことまとめ

たぶんFFTCまとめ最後の記事です。開発合宿でやったこと、成果のまとめ。

これまでに書いた記事はこちら。

FFTC#2開催レポ その1 宿編 - はのちゃ爆発

FFTC#2開催レポ その2 食事編 - はのちゃ爆発

FFTC#2開催レポ その3 食事編 ふつかめ - はのちゃ爆発

FFTC#2開催レポ その4 食事編 みっかめ - はのちゃ爆発

FFTC#2開催レポ その5 お金編 - はのちゃ爆発

FFTC#2開催レポ その6 お金編パート2 - はのちゃ爆発

続きを読む