きっかけ

自作キーボードの存在を『ららぽん』さんの動画で知って以来、いつかは作ってみたいなと思っていました。ただ知った当時は中学生で、自作キーボードも今ほど流行っていなかったため、個人輸入が必須などハードルが高く諦めていました。

その後も、BSMのDiscordやRebuildなどで自作キーボードの話を見ては、この沼は危険だなと近寄らないようにしていました。

のだけど、最近『うしゃすらいむ』さんという方の動画を見始めて、この方が『Corne Cherry V3』という分割キーボードを使われていて、何かが自分の中で燃えはじめたので、手元のパートだけで作れるものを作ってみました。

作り方

必要なもの

雑なプロトタイプとしてブレッドボード上に作ったので、間違ってるところとかあるかも？難しいことは一切してないから大丈夫だと思うけど、必要なものはこんな感じ。

今回はINPUTPULLを使用したので、抵抗は必要ないです。

回路

ブレッドボード上に配線していきます。

とは言っても、今回は内臓のプルアップ抵抗を利用するし、マトリックスを組むわけでもないので、タクトスイッチの両端にGNDと任意のポートに接続すればOK。

こんな感じで配線してください。ブレッドボードに余裕がないから変なつなぎ方してるけど、下手なことしない方がいいと思います。

プログラム

Seeeduino XIAOを使うため、Arduino IDEを公式サイト通りにセットアップしてあることを前提として話を進めます。

今回は標準のKeyboard.hではなく、サードパーティのHID-Projectを利用するためライブラリをインストールします。サードバーからLibrary Managerを開き、検索バーに『HID-Project』と入力。すると、NicoHoodが提供するものが表示されるので、Installを押してInstalledになればインストール完了です。

#define HID_CUSTOM_LAYOUT
#define LAYOUT_US_ENGLISH

#include <HID-Project.h>
#include <HID-Settings.h>

void setup() {
  pinMode(4, INPUT_PULLUP);
  pinMode(5, INPUT_PULLUP);
  pinMode(6, INPUT_PULLUP);
  Keyboard.begin();
}

void loop() {
  if (digitalRead(4) == LOW) {
    Consumer.write(MEDIA_PLAY_PAUSE);
    delay(100);
  }
  if (digitalRead(5) == LOW) {
    Consumer.write(MEDIA_VOL_DOWN);
    delay(100);
  }
  if (digitalRead(6) == LOW) {
    Consumer.write(MEDIA_VOL_UP);
    delay(100);
  }
  delay(100);
}

ポート番号は適宜読み替えてくださいね。

Using custom layout for keyboard modules ってエラーが出るのですが、動くので無視しちゃいました。解決策知ってる方いたら教えてほしいです。

結び

『Seeeduino XIAO (SAMD21)』でキーボードっぽいものを作ってみました。

次は、2x2でマトリックスを組んでみたいです。LEDのマトリックスは以前作ったことがあるので、ロジックは理解しています。2乗マトリックスとかはさっぱりですが…。

ちなみに、今回使用したSeeeduino XIAOは前に竹林人間さんとエンカした時に買ったものなのですが、現在の価格を見たら倍の1200円してビックリ。ピンの付属も無くなったので、より割高な感じがします。

なお、このボードに使われる『SAMD21』は自作キーボードでよく使われる『QMK Firmware』に対応していません。これも『Pro Micro』か『Raspberry Pi Pico』を買って試してみたいです。

おまけ

自作キーボード関連のパーツは高すぎる！(米倉涼子風に)

どの沼も同じですが、パーツ高すぎません？やっぱりAliexpressとか使ったほうがいいのかな。海外系の通販には、SHEINとかTEMUはもちろんAliexpressとかも怖くて手が出せてないです。

それから、Cherry MX互換のスイッチってユニバーサル基板には刺さらないんですね。となると基板設計が必須で、これもまた手が出せない。

じゃあ、キットを買おうと思って勇者工房を覗くと、また高い。同人ハードも多く、どうしても値が張るのはわかるから難しいところですね。

(スイッチをバラ売り16個にすれば)5000円以内でテンキー作れるかも？

追加した機能

Markdown形式をサポート

独自の形式のみを対応していましたが、Markdown形式でもコピーできるようにしました。

独自の形式のみだと、他の拡張機能との併用を余儀なくされてしまうので、機能を追加しました。Markdown形式以外にも必要なものがあったら追加しようかな。

機能追加自体は、すでにある部分を変更すればよいだけなので簡単に行えました。問題はその切り替えをどう行うかです。

オプションページの追加

先述のMarkdown形式をサポートするにあたって、どこかしらで切り替えられる必要性が出てきたので作成しました。

これでも一つ問題があって、オプションページって結構深いところにあって、めったに見るものじゃないですよね。私自身も普段使わないため、Pocketとかのは今回初めて気が付きました。

本来はアイコンをクリックしたときに選択肢を出すべきだとは思いますが、そこにコピーだけを割り当てているので諦めました。多分やりようはあるのですが、複雑になってしまうし、これでよかったのだと思います。そもそも両方使いたいなら2つ拡張機能を利用すればいいわけです（あれ、追加した意味…？）。

キーボードショートカットを追加

さらにQuickにするために、キーボードショートカットを追加しました。

仮で、Alt + Shift + C に割り当てたので、そのショートカットを押すとコピーされます。今後、他のキーボードショートカットと衝突していることが確認されれば、変更したいとは思っていますが今のところはこれで。

結び

完全に自己満足ですが一通り機能を実装しきったので、次はストアに出したいですね。

Chrome Web Storeは5 USD払わなきゃいけないみたいなので、Edgeの方に出そうと思ったんだけど、途中で止まってます。名前や住所、電話番号を入れるところがあるのですが、これは公開されるのかな？入力する必要性がわからなくて少し躊躇しています。

おまけ

今になって、code 要素のスタイルを書いてないことに気が付きました。明日はSakiのアップデートしなきゃですね。ただ、かなり絡まったスパゲッティになっているので、自分でも読めるか怪しくて時間かかりそうです。

タイトルとURLをクリップボードにコピーする、よくある拡張機能を作ってみました。初めてChromeの拡張機能を作成しましたが、アイディア次第ではもっと便利なものが作れそうです。

きっかけ

レポートを書く際に、指定されたフォーマットで参考にしたサイトのタイトル、URL、閲覧日を張る必要があるのですが、これが意外と面倒。今まではCopy as MarkdownでタイトルとURLをコピーしたあと、手動で直していました。

Copy as Markdownは今開いているタブのみならず、ウィンドウ内のすべてのタブのタイトルとURLをクリップボードにコピーできる優秀な拡張機能ではありますが、今回の用途では毎回フォーマットを直すのが面倒でした。そこで、いっそのこと自分用に拡張機能を作ってしまおうと思って作成しました。

機能

この項目を作ろうか迷ったぐらいとってもシンプル。

拡張機能のボタン(?)を押したら、「タイトル，URL，日付」の形式でクリップボードにコピーするだけです。

設定や選択肢もなく、とってもシンプルです。キーボードショートカットぐらいは作っても良かったかもしれません（やり方わからないけど）。

実装

GitHubにソースコードをアップしてあるので見てもらえればと思います。

流れとしては、クリックされたら、現在開いているタブのタイトルとURLを取得した後、今日の日付を取得し、それらをまとめてクリップボードに格納するといった感じです。

グローバル変数を普通に使っていたりとあまり良いコードではないのかなと思います。最低限、機能ごとに関数を分けるぐらいはしていますがそれだけで、見づらいところもあると思うので他の方のコードを参考にした方が良いかもしれません。

苦労したところ

右も左もわからなかったのでいろいろ苦労はありましたが、中でもクリップボードにコピーするところが一番時間かかりました。

検索すると一番上にnavigator.clipboard.writeText が出てくるのですが、Background Page（このときはManifest v2を使ってた）では利用できないとのこと。よく考えてみれば当然な気もしますが、これがわかるまでブラウザのセキュリティとか色々いじっていました。

Chrome拡張でbackgroundからコピーをする方法とChrome拡張のセキュリティについて #Chrome拡張 - Qiita

そこで、この記事を見つけて利用させてもらいました。というか、結果的にこのコードがほとんどの割合を占めています。非常にありがたい。

結び

拡張機能、便利ですね。ほとんどのことをブラウザでやっているわけで、そこで利用できる拡張機能が便利じゃないはずがないですもんね。

今後は、練習がてらオプションページを追加して、もう少しカスタマイズ性に優れたツールにできたらいいなと思っています。夏休みに入れば時間はあるし、たぶん一日あれば完成できるはずです。

てか、まだ期末試験終わってないのに何をやっているんだろう…。

おまけ

いつの間にか、Notionに目次機能が付いていました。これまでも文章に埋め込むブロックとしてありましたが、今回のは右端に表示されているもの。これなら、文章を邪魔しないし、常にアクセスできるので便利です。

もう少し使いこなせると良いんだろうなと思いつつ、ただのMarkdownエディタとしてしか使えていないNotion。データーベースが良く絶賛されていますが、Google SpreadsheetsのほうがGASも使えて便利とか思ってしまって、あまり使う機会もありません。

とはいえ、他のアプリを探すほどの理由もないためしばらくは使い続けそうです。

セットアップ

開封したら、裏面の電池蓋を開けて、絶縁シートを取り出します。ここに気づかなくて？？ってなってた。

セットアップはiPhoneの『探す』アプリから行うことができます。別のアプリを入れる必要がないのはありがたいですね。

アプリを起動してガイドにしたがうだけです。簡単なお仕事。

でも、もう1点だけ注意点を挙げるとすればボタンが押せてるかわかりずらいです。耳を近くに持っていくと少し音が聞こえるから、それで判断するしかないかも。

レビュー

問題なく使えるなという印象です。

落としてないから、落とした時の動作はわかりませんが、音もちゃんとなるし試した限りでは一通りの動作をきちんと行えました。

ただ、UWBには対応していないので、そこだけ注意が必要。AirTagを持ってないからなんとも言えないけど、レビュー動画を見るとあまり使える感じではなかったので気にしないことにしました。

そもそも家の中でなくすのを防ぐよりも、忘れたり落としたりしてないことを確認したかったので、私の用途では不要でした。付いてて困るものでもないので、金額を気にしないならAirTagを買ってみてもいいかも。

結び

もっと早く買えば良かったなと思う製品でした。でも、思ったよりも大きいのでつける場所は選ぶなという印象です。

ロジテックやその他メーカーが出しているカード型のも気になります。あの薄さで、充電可能なのはすごいです。すぐ壊れるとのレビューもあったので、もう少しこなれてきたら購入してみようと思います。

1ヶ月ぶりに更新。暇な授業中に寝るよりはマシと思って書いた記事なので、内容や文章が雑なのは目を瞑ってください()

Notion、意外とモバイルでも文章書けますね。特に、iPhoneならフォントもデフォルトのヒラギノでそれもいいです。

文章を書くのはいいのですが、画像が面倒かも。ワークフローを改善したいです。

iPhoneだと『他のカレンダー』が表示されない

iPhoneのカレンダーアプリでGoogle Calendarを閲覧するだけなら簡単。設定 > カレンダー > アカウントと進んで、GoogleアカウントにSign inすれば閲覧と編集が行えるようになります。

でも、そのままだと予定と誕生日、祝日の3つしか表示されないのです。

そこでサイト側で同期設定を変更します。Google Calendarの設定画面では出てこないので以下のリンクを開きます。

サイトを開いたら『共有カレンダー』にチェックマークをつけたら完了です。あとは各クライアントで読み込みなおしたら反映されてるはずです。

今週は青ブタ展に行ったりと、割とアクティブだった気がします。青ブタ展のレポートは頑張って明日出します。

それはそうと、コメント機能を付けました。

Cloudflare FunctionsとD1, HonoでAPIを実装し、フロントはNext.jsでCSRしています。これが最適な構成なのかはわかりませんが、動いているので良しとしましょう（ホンマか？）。

難しいものは、難しい

Hono.jsを利用するなど、楽をできるところは楽をしているのですが、それでも難しいものは難しい。Next.jsとHono.jsとCloudflare Functionsという組み合わせはあまり見かけなくて、検索ワードを変えてみたりGeminiに聞いてみたりしました。私のパフォーマンスと経験が小さいのが問題だと思いますけど、小さなことで1日悩むこともあって大変でした。

フロントは機能半分

現状送信してもフォームがクリアされなかったり、連打されるとその分送信されたり、Validationを一切かけていなかったりとだいぶひどい仕様になっているので改善しなきゃですね。

結局React Hookを勉強できておらず、素のJavaScriptでごり押してるのでそこもどうにかしなきゃと思うところ。地道に勉強して、改良していきます。

今後実装したいこと

上記の機能不足を補うのはもちろん、返信できるようにしたり、これを改良して問い合わせフォームを作ったりしたいです。

時間のある春休みのうちに作りたいけど、どうだろう？あと2週間あればいけるように気がする…というか、できなきゃ今後開発できないですよね。頑張ります。

結び

コメント機能、ぜひ使ってみてください！

Google Analyticsみたいなアクセス解析ツールを入れておらず、読んでくれてる人がいるのかすらわからないので本当にお願いします。飛んで喜びます。

Notionに備忘録を残してあるので気になるなら見てみてください。大したことは書いてないですが、私が詰まったところと参考にしたサイトを書いてあります。気づいたことがあれば逐一変更を加えます。

おまけ

今回は（も？）一発書きで検証も何もしてないので、誤字･脱字等あったらTwitterとかでこっそり教えてください。

明日出すと思うけど、青ブタ展は最高だったのでぜひ。2回行こうとは思いませんでしたが、青ブタ好きなら1回は行った方がいいです。今なら溝口ケージ先生もサイン書かれてるので、ちょっとうらやましいです。

サイン見るだけなら冬コミで書いていただいたので、別にいいのですが、違うじゃん？その場で見たいですね。

だれか誘っていただけたら行くので一緒に行きましょう。

クーポン適用で約50000円で購入することができました。Type-Cケーブルで充電と映像出力ができ、sRGB 100%以上の4Kディスプレイとしては割と手ごろな価格じゃないでしょうか？keepaを見ると正月のセールで49800円だったので底値ではありませんが納得の価格です。

接続はThunderbolt 1本

Thunderbolt一本で簡単に接続し、PCからの映像入力と最大90Wの給電を行うことができました。さらにDock的な機能としてUSB Type-Aが5つ、Type-Cが2つ、Ethernetポートが1つ利用することができます。

ただし、USB Type-Aの1つとType-Cの1つを除いてかなり奥まったところにあるため頻繁に抜き差しするのは難しいです。

私は以前いただいたMicrosoft Surface Thunderbolt 4 Dockを利用するので、あまり使うことはないかなと思います。ただ、私の使用するポート数なら十分賄えるのでDockとか持っていないなら、かなり良いと思います。

スピーカーはついてない

表題の通り、スピーカーはついていません。

最も多くのPCモニターに内蔵されるスピーカーは高音質とは言えないため不要という人も多くいると思います。個人的にはあまり音質を気にしないのでつけてくれると嬉しかったかなという印象ですが、Google HomeにBluetoothで飛ばすなど解決策はいくらでもあるので、困るというほどではないです。

色は良さそう

ここに関しては計測したわけじゃないので、あくまで私の感覚であることに注意してください。

RGBをそれぞれ表示したところ、少なくともThinkPad E14 gen4よりちゃんと出ている印象でした。赤や青はThinkPadの内臓ディスプレイだと浅い印象を受けましたが、このディスプレイはちゃんと出ています。また、緑は内臓ディスプレイだとYellowが入ってるように見えるのが綺麗に表示されました。

Display P3を謳うiPhone 13と比較すると遜色ない色が出ているように感じます。iPhoneに安いフィルムをつけていることで、若干濁っているのを考慮すればですが。

一方でIPS Blackを採用し黒を売りにしているわけですが、あまり違いはわかりませんでした。OLEDのiPhone 13と比べるとやはり液晶だなという印象です。

クラムシェルだと電源ボタン押せなくない？

いまとても困っているのですが、電源ボタン押せなくないですか？

よくMacBookをスタンドで立てている人がいるのでそんな感じで運用しようかと思っていたのですが、Windowsは勝手にシャットダウン（サスペンド?）しちゃうのでスリープ運用ができないんですよね。おそらく設定で変更できると思いますが、外出時とかにサスペンドしてくれないとバッテリー持ちが悪いのでそれはそれで困るのです。

いいソリューションがあったら教えてほしいです。

結び

4Kモニター快適すぎる。今までラップトップの内臓ディスプレイしか使ったことなかったので、画面が広いだけですごい快適です。

YouTubeで仮想デスクトップ（MacでいうMission Control）を使えば外部モニターなんていらないと言ってる人の動画を見ましたが、やはり大画面は正義でした。

KVM機能やRJ45ポート、入力にUSB Type-C, HDMI, Display Portがそろっているなど機能としても申し分なく良いです。耐久性はわかりませんが、3年保証がついていることを考えると安心かなと思います。

ディスプレイ選びで悩んでいる方はぜひ検討してみてください！

おまけ

仮セットアップした状態でMisskeyに投稿したら、マウスパッドがGatewayって気づいてくれた人がいてびっくり！少ししか映ってないのによくわかるよね。特徴的な牛柄ではあるけど、今は息をしてないブランドだから知ってる人がいることに驚きと喜びを隠せませんでした。

[:kanegamoeruotoda: (@kurizuru) | BackspaceKey](https://misskey.backspace.fm/notes/9qi7gjk45a)

それにしてもMisskeyも埋め込みを実装してほしいな。

まず、おまえがブログカード機能作れって？気が向いたら作ります。

今回はmixne史上最大のアップデートということで、ドメインからCMSまで、管理人以外の全てが変更されていると言っても過言ではないでしょう。

それでも以前と変わらず、ゆったりとPCやガジェットを中心に気になったことをお伝えしていくブログを続けていきます。RSSを購読して更新をお待ちいただければと思います（RSSとか いつの時代？）。

わたしについて

初めての方は、はじめまして。管理人のしおんです。

PCとアニメが好きな、どこにでもいる底辺大学生です。数学も物理も得意じゃないのにコンピューターが好きというだけでコンピューターサイエンスを学んでいます。

動画全盛のこの時代にテキストを書くとか、少しひねくれた性格の持ち主です。

このブログでは私の好きなことをとことんお伝えできればいいなと思います。

Sakiについて

このブログのソースコードは『Saki』としてGitHub上においてあります。

現状、とりあえず動くという状況なので今後もアップデートを行っていきます。

このサイト自体は別のRepoから生成していますが、ベースはSakiでForkという形です。気になった点などあればガンガン言ってください。誠心誠意受け止めさせていただきます(笑)

GitHub - shioncha/saki

むすび

ここまで読んでくださりありがとうございました！

まだまだ機能不足の『mixne.net』ですが、日々アップデートしていくのでそこも含めて楽しんでいただけたらと思います。これからも当ブログをお願いします。

おまけ

3年前から構想していたmixne.netへの移行がついに完了しました！

もともとはWordPressのテーマを作ろうと思っていたのが、いつしかNext.jsで作ろうということになり、楽しかったですが苦労も多かったです。別で記事にするつもりですが、バックエンドはmicroCMSを利用してフロントエンドのみを作ったのですが、わからないことも多く難しかったです。