emiel（エミエル）は超汎用日本語タイピングゲーム用ライブラリです。
タイピングゲームを作る際に必要となる、以下の機能を提供します。
- ローマ字入力
- Google 日本語入力(Mozc) と同等のローマ字入力ルールを完全サポート
- 「しゃ：sha, sya」といった入力の自動判別
- 「っっか：kkka」と打鍵可能
- MS-IME 等他の日本語入力システムに合わせたローマ字入力ルールも作成可能
- かな入力
- いずれの入力方法にしても使い方は同じなので切り替えが簡単
- キーボードレイアウトの切り替え機能
- QWERTY, Dvorak, Colemak といった英字入力のキーボードレイアウトの切り替え
- OS のキーボードレイアウトを自動認識 (Chrome, Edge のみ)
また、以下のような多様な日本語入力方法をサポートしており、React や Vue 等の特定の UI ライブラリ・フレームワークに依存せずにタイピングゲームを簡単に作成することができます。
- ローマ字拡張系：AZIK、ACT 等
- ローマ字無拡張系：Dvorak、Colemak、大西配列、Tomisuke 配列等
- 中指シフト系：月配列等
- 同時打鍵系：新下駄配列、薙刀式等
- 親指シフト系：NICOLA、飛鳥カナ配列等
npm install emielimport {
build,
activate,
detectKeyboardLayout,
loadPresetRuleRoman,
} from "emiel";
// キーボードレイアウトを自動検出
const layout = await detectKeyboardLayout(window);
// ローマ字入力ルールとオートマトンを作成
const rule = loadPresetRuleRoman(layout);
const automaton = build(rule, "かった");
// キーボードイベントを購読
activate(window, (event) => {
const result = automaton.input(event);
console.log(automaton.getFinishedRoman(), automaton.getPendingRoman());
if (result.isFinished) {
console.log("入力完了!");
}
});- react-simple - 単語を次々と入力するシンプルなタイピング練習
- react-backspace - バックスペースの3つの実装パターン比較（全クリア/カウント/入力戻し）
- react-roman-or-kana - ローマ字入力とJISかな入力の両対応デュアル入力モード
- react-mixed-guide - 漢字かな混じりテキストのローマ字入力
- react-multi-word - 複数単語を同時表示するマルチターゲットタイピング
- react-result-record - タイピング成績（タイム・入力数）の記録・表示
- react-keyboardguide - 物理キーボード配列・入力ガイドのビジュアライザー
- react-stroke-graph - キー入力の状態遷移をグラフで可視化
- cli - Node.js 環境でのオートマトン直接操作
入力配列によらず最小限の概念を把握するだけで簡単にタイピングゲームを作成することができます。
KeyboardLayout- キーボードレイアウトを表すクラス（Qwerty JIS, US, Dvorak 等）
- 基本的には
emiel.keyboard.detect()で自動認識するだけでよい - プリセットで用意されているレイアウト以外でも JSON 形式で自由にレイアウトすることができる
Rule- 入力配列を表すクラス（ローマ字入力やかな入力等）
- 基本的には
emiel.rule.get(...)で名前を指定して取得する - プリセットで用意されている配列以外でも JSON 形式、Mozc 形式で自由に作成することができる
Automaton- ワードのキーボード入力を受け付けるクラス。タイピングゲームの中心的な概念。入力が成功したか、どこまで入力したか、残りの文字はなにかといった情報を持つ
以下のような多様なワード形式・表示方式をサポートしています。
- ワード形式
- 「WeatherTyping」「e-typing」のようにワード数の決まった単語・文章を入力していくタイプ
- 「寿司打」のようにワード数の決まっていない単語・文章を入力していくタイプ
- 「タイプウェル」のように単語の連続を入力していくタイプ
- 「タイピングオブザデッド」のように複数のワードを同時に表示して、任意のワードを選択して打つことができるタイプ
- 「TypeRacer」のように誤ったキー入力を Backspace キーで消さなければいけないタイプ
- 表示形式
- 「WeatherTyping」「e-typing」「寿司打」のようにローマ字のみを状態遷移しながら表示するタイプ
- 「タイプウェル」のようにローマ字とかな文字、漢字かな混じり文字を状態遷移しながら表示するタイプ
ローマ字入力やかな入力以外の入力方式（薙刀式、新下駄配列など）では、入力効率を高めるために backspace キーをホームポジションに近い打ちやすい位置に配置することがあります。たとえば薙刀式(v15)では U キー単独を backspace として使用します。
既存の多くのタイピングゲームでは backspace が考慮されておらず、こうした配列の入力効率を正しく測定できません。emiel では、入力ルール定義の中で任意のキーやキーの組み合わせを backspace として指定できます。
{
"backspaces": [{ "keys": ["U"] }],
"entries": [...]
}backspace が発動すると InputResult.BACK が返されるため、アプリケーション側でミス入力の取り消しや成功ストロークの巻き戻しなど、ゲームルールに合わせた復旧ロジックを自由に実装できます。backspace を含むすべての入力イベントは inputHistory に時系列で記録されるため、backspace の使用頻度も含めた正確な入力統計を取得できます。
Mozc(GoogleIME)のローマ字設定ファイルの仕様をベースにすることで、シンプルで柔軟性の高い設定ファイルを実現しています。一般的な実装ではローマ字入力における「っ」や「ん」に関する入力ルールを、大量に記述するか、あるいはハードコードする必要がありますが、emiel では Mozc 同様にこれらの入力ルールを極めてシンプルに記述することができます。
TypeScript で実装されており、React や Vue 等の特定の UI ライブラリ・フレームワークに依存せずにタイピングゲームを作成することができます。
| Chrome | Edge | Firefox | Safari | |
|---|---|---|---|---|
| Windows 11 | o | o | o | - |
| Mac Ventura | o | o | △(eisu,kana) | △(eisu,kana) |
| Linux | not yet | not yet | not yet | not yet |
- Windows の Safari はサポート終了
- Mac の Firefox, Safari では本体 JIS キーボードの「英数」と「かな」のキー押下で KeyboardEvent が発火しない
- Linux は未確認