Netflix専用キーボード (su120)

プロジェクトの背景

Fusion 360を学習しながらYouTubeやNetflixを見る時、音量調節や早送り/巻き戻し、ページめくりを手元で簡単に操作したい。

そんなニーズから生まれたNetflix専用キーボードです。su120プラットフォームをベースに、段階的に機能を追加してきました。

Netflix専用キーボード完成品

特徴

ロータリーエンコーダー × 2個: 音量調節、ページめくり
スライドスイッチ: エンコーダー出力を左右/上下カーソルで切り替え
OLED搭載: レイヤー状態をビットマップ表示
VIAL対応: ブラウザGUIでキーマップ変更
QMKファームウェア: 高度なカスタマイズ可能
総コスト約¥3,500

使い方

PCにUSBで接続すると、キーボードとして認識されます。

基本操作

ロータリーエンコーダー1: ページめくり（上下カーソル）
ロータリーエンコーダー2: 音量調節
スライドスイッチ: エンコーダー1を左右カーソル ⇔ 上下カーソル切り替え
OLEDディスプレイ: レイヤー状態を視覚的に表示

VIAL設定

ブラウザでvial.rocksにアクセスすれば、ファームウェア書き換えなしでキーマップをGUI編集できます。

遊び方

Netflix/YouTube視聴時の快適操作
電子書籍のページめくり専用コントローラー
動画編集ソフトのシャトルコントローラー
プレゼン資料のページ送り
音楽再生の音量調節専用デバイス
好きなショートカットに設定してマクロパッド化

VIALのGUIで即座にキーマップ変更できるので、用途に応じて使い分けられます。

材料の調達

マイコン

Pro Micro（¥800-1,200）

ATmega32u4搭載のマイコンボード。QMK/VIAL対応。

購入先:

秋月電子通商 - 互換品あり
スイッチサイエンス - 各種Pro Micro
Amazon - 中華互換品が安価
AliExpress - 大量購入で格安

PCB基板

su120基板（¥1,000-1,500）

遊舎工房などで販売されている、分割型のユニバーサルキーボード基板です。

購入先:

遊舎工房 - su120/su210各種
BOOTH - 自作キーボード関連

キースイッチ

メカニカルスイッチ × 4個（¥30-100/個）

Cherry MX互換のメカニカルスイッチ。お好みの打鍵感のものを選びましょう。

購入先:

遊舎工房
TALP KEYBOARD
Amazon - Gateron、Kailh各種

ロータリーエンコーダー

EC12互換ロータリーエンコーダー × 2個（¥100-300/個）

ロータリーエンコーダー

音量調節やページめくりに使う回転式のエンコーダー。大きめのキャップを付けると操作しやすくなります。

購入先:

秋月電子通商 - EC12E互換品
Amazon - ノブ付きセット
AliExpress - 大容量キャップ付き

注意点: 大きなキャップを使う場合は、周辺のキースイッチと干渉しないよう配置に工夫が必要です。

スライドスイッチ

大型スライドスイッチ（¥100-300）

スライドスイッチ

キーキャップサイズの大型スライドスイッチ。エンコーダー出力を切り替えます。

購入先:

AliExpress - 大型トグルスイッチ
Amazon - 小型スライドスイッチ
秋月電子通商 - 各種トグルスイッチ

OLEDディスプレイ

SSD1306 OLED（128x32）（¥300-600）

I2C接続の小型OLEDディスプレイ。レイヤー状態を視覚的に表示します。

購入先:

秋月電子通商 - I2C OLED各種
Amazon - 格安品多数
AliExpress - 大量購入で激安

スペック:

解像度: 128x32ピクセル
インターフェース: I2C
電圧: 3.3V～5V

ダイオード

1N4148 × 4個（¥5-10/個）

キーマトリクス用のダイオード。必要な個数分用意します。

電子ワイヤ

AWG22～26程度の電子ワイヤ。OLED接続用に4本（VCC、GND、SDA、SCL）、スイッチ配線用に2本必要です。

購入先:

秋月電子通商 - ジュンフロンワイヤ各色
千石電商 - 切り売り対応
Amazon - 各色セット販売

ハンダ

鉛入りまたは鉛フリーハンダ。直径0.6mm～1.0mm程度が使いやすいです。

3Dプリントパーツ

OLED用の開口部を持つケースをThingiverseで公開しています。

必要な工具:

はんだごて（温度調節機能付きがおすすめ）
ニッパー
ワイヤーストリッパー
ピンセット
テスター（動作確認用）

組み立て方

1. ダイオードのはんだ付け

su120基板の各キースイッチ位置にダイオードをはんだ付けします。

手順:

ダイオードの向きを確認（カソード側にマーク）
基板の穴に差し込む
裏面ではんだ付け
余分なリード線をカット

2. Pro Microのはんだ付け

基板にPro Microをはんだ付けします。コンスルー（スプリングピンヘッダ）を使うと着脱可能になります。

手順:

コンスルーまたはピンヘッダを基板に差し込む
Pro Microを載せる
Pro Micro側をはんだ付け

3. ロータリーエンコーダー × 2個のはんだ付け

ロータリーエンコーダー配置

2個のロータリーエンコーダーを基板にはんだ付けします。

重要なポイント:

最外列Dのキーは配置しない: 大きなエンコーダーキャップとの干渉を避けるため
背の高いエンコーダーを使う: 周辺部品との物理的な衝突を防ぐ

4. スライドスイッチの配線

スイッチ配置

ロータリーエンコーダーとの干渉で、通常のキースイッチが配置できない最右列にスライドスイッチを配置します。

配線方法:

スイッチの端子にワイヤをはんだ付け
基板のキーマトリクスの対応する位置（行1、列D）に接続
スイッチを右にスライドすると回路が閉じる（キー押下として認識）

5. OLED用配線

配線図

接続:

VCC: Pro MicroのVCC → OLEDのVCC
GND: Pro MicroのGND → OLEDのGND
SDA: Pin 2（D1） → OLEDのSDA
SCL: Pin 3（D0） → OLEDのSCL

手順:

基板の表側から4ピンコネクタを通してVCC/GNDを接続
SDA/SCLワイヤは裏側に回してはんだ付け
OLEDモジュールにワイヤを直付け
テスターで導通確認

6. キースイッチの取り付け

メカニカルスイッチを基板に取り付けます。

7. ケースへの組み込み

3DプリントしたケースにOLED用の開口部があることを確認してから組み込みます。

VIALファームウェアのセットアップ

1. VIAL環境の構築

QMK環境を構築後、VIALリポジトリをクローンします。

git clone https://github.com/vial-kb/vial-qmk.git
cd vial-qmk
make git-submodule
qmk setup

2. 必要なファイルの作成

keyboard.json:

ハードウェア仕様を定義します（USB VID/PID、マトリクスピン、レイアウトなど）。

{
    "keyboard_name": "su120_netflix",
    "manufacturer": "e3w2q",
    "maintainer": "kurosuke",
    "processor": "atmega32u4",
    "bootloader": "caterina",
    "usb": {
        "vid": "0x1209",
        "pid": "0x4649",
        "device_version": "0.0.1"
    },
    "matrix_pins": {
        "rows": ["F6"],
        "cols": ["D1", "D0", "D4", "C6"]
    },
    "diode_direction": "COL2ROW"
}

vial.json:

VIAL GUI用の設定ファイル。

{
    "lighting": "none",
    "matrix": {"rows": 1, "cols": 4},
    "layouts": {
        "keymap": [
            ["0,0", "0,1", "0,2", "0,3"]
        ]
    }
}

UID生成:

python3 util/vial_generate_keyboard_uid.py

生成されたUIDをvial.jsonに追加します。

3. rules.mkの設定

VIAL_ENABLE = yes
OLED_ENABLE = yes
OLED_DRIVER = SSD1306
ENCODER_ENABLE = yes
MOUSEKEY_ENABLE = yes

# メモリ削減
CONSOLE_ENABLE = no
COMMAND_ENABLE = no
SPACE_CADET_ENABLE = no
MAGIC_ENABLE = no
KEY_OVERRIDE_ENABLE = no
TAP_DANCE_ENABLE = no
COMBO_ENABLE = no
LTO_ENABLE = yes

4. keymap.cの実装

#include QMK_KEYBOARD_H

const uint16_t PROGMEM keymaps[][MATRIX_ROWS][MATRIX_COLS] = {
    [0] = LAYOUT(
        KC_A,   KC_B,   KC_C,   MO(1)   // 最右列がスライドスイッチ
    ),
    [1] = LAYOUT(
        KC_X,   KC_Y,   KC_Z,   _______
    ),
};

#ifdef ENCODER_ENABLE
bool encoder_update_user(uint8_t index, bool clockwise) {
    if (index == 0) {
        // エンコーダー1: レイヤーで出力を切り替え
        if (layer_state == 0) {
            tap_code(clockwise ? KC_LEFT : KC_RIGHT);
        } else {
            tap_code(clockwise ? KC_UP : KC_DOWN);
        }
    } else if (index == 1) {
        // エンコーダー2: 音量調節
        tap_code(clockwise ? KC_VOLU : KC_VOLD);
    }
    return false;
}
#endif

#ifdef OLED_ENABLE
oled_rotation_t oled_init_user(oled_rotation_t rotation) {
    return OLED_ROTATION_180;
}

bool oled_task_user(void) {
    if (layer_state == 0) {
        oled_write_raw_P(bitmap_layer0, sizeof(bitmap_layer0));
    } else {
        oled_write_raw_P(bitmap_layer1, sizeof(bitmap_layer1));
    }
    return false;
}

// ビットマップデータ（image2cppで生成）
static const char PROGMEM bitmap_layer0[] = {
    0x00, 0x00, 0x00, 0x00, // ...
};

static const char PROGMEM bitmap_layer1[] = {
    0x00, 0x00, 0x00, 0x00, // ...
};
#endif

ビットマップ画像の作成

1. 画像の準備

128x32ピクセルの白黒画像を用意します。

macOSの場合:

convert -size 128x32 xc:white basic1.jpg

macOSプレビューアプリで画像を開き、鉛筆ツールでドット絵を描きます。

2. image2cppで変換

image2cppにアクセスし、画像をアップロードします。

設定:

Canvas size: 128x32
Background color: Black
Draw mode: Horizontal
Output: Arduino code array

3. keymap.cに埋め込み

生成されたHEXデータをコピーして、keymap.cに貼り付けます。

プログラムのinstall

1. ファームウェアのビルド

qmk compile -kb su120 -km vial

メモリ不足エラーが出る場合は、rules.mkでさらに機能を削減します。

2. Pro Microへの書き込み

qmk flash -kb su120 -km vial

プロンプトが表示されたら、Pro MicroのリセットボタンをGNDとRSTをショートさせて押します。

3. VIAL Web UIでの設定

VIAL Web UI

ブラウザでvial.rocksを開く（Chrome推奨）
デバイスが自動認識される
GUIでキーマップを編集
変更は即座に反映（ファームウェア書き換え不要）

4. 動作確認

ロータリーエンコーダー1: スライドスイッチOFF時に左右カーソル、ON時に上下カーソル
ロータリーエンコーダー2: 音量調節
OLED: レイヤー切り替えで表示が変わることを確認
キースイッチ: 割り当てた機能の確認

カスタマイズのヒント

エンコーダー出力のカスタマイズ

keymap.cを編集することで、エンコーダーの機能を自由に変更できます。

レイヤー0の例:

ページスクロール（KC_PGUP / KC_PGDN）
動画シーク（KC_LEFT / KC_RIGHT）

レイヤー1の例:

ズーム操作（Ctrl+Plus / Ctrl+Minus）
ブラウザタブ切り替え（Ctrl+Tab / Ctrl+Shift+Tab）

OLED表示のカスタマイズ

アニメーション: タイマーを使って複数のフレームを順次表示
ステータス表示: CapsLock、NumLockの状態表示
テキスト表示: oled_write_P()で文字列表示
スクロール: oled_scroll_left()などでスクロール効果

VIAL GUIでの設定

ファームウェアを書き換えずに、ブラウザから以下を設定できます:

キーマップの変更
マウスキー設定
レイヤー切り替え
タップ/ホールド動作

QMK / VIA / VIAL の比較

機能	QMK	VIA	VIAL
GUIでキーマップ変更	✗	○	○
カスタムキーコード	○	✗	○（SAFE_RANGE）
OLED対応	○	○（固定表示）	○（柔軟）
ロータリーエンコーダー	○	○（QMK制御）	○
Web UI	✗	usevia.app	vial.rocks
レイヤー数制限	無制限	最大4層	無制限
セキュリティロック	✗	✗	○

VIALは、VIAの利便性とQMKの柔軟性を両立したファームウェアです。

Netflix専用キーボード (su120)

プロジェクトの背景

特徴

使い方

基本操作

VIAL設定

遊び方

材料の調達

マイコン

Pro Micro（¥800-1,200）

PCB基板

su120基板（¥1,000-1,500）

キースイッチ

メカニカルスイッチ × 4個（¥30-100/個）

ロータリーエンコーダー

EC12互換ロータリーエンコーダー × 2個（¥100-300/個）

スライドスイッチ

大型スライドスイッチ（¥100-300）

OLEDディスプレイ

SSD1306 OLED（128x32）（¥300-600）

ダイオード

1N4148 × 4個（¥5-10/個）

電子ワイヤ

ハンダ

3Dプリントパーツ

組み立て方

1. ダイオードのはんだ付け

2. Pro Microのはんだ付け

3. ロータリーエンコーダー × 2個のはんだ付け

4. スライドスイッチの配線

5. OLED用配線

6. キースイッチの取り付け

7. ケースへの組み込み

VIALファームウェアのセットアップ

1. VIAL環境の構築

2. 必要なファイルの作成

3. rules.mkの設定

4. keymap.cの実装

ビットマップ画像の作成

1. 画像の準備

2. image2cppで変換

3. keymap.cに埋め込み

プログラムのinstall

1. ファームウェアのビルド

2. Pro Microへの書き込み

3. VIAL Web UIでの設定

4. 動作確認

カスタマイズのヒント

エンコーダー出力のカスタマイズ

OLED表示のカスタマイズ

VIAL GUIでの設定

QMK / VIA / VIAL の比較

参考リンク