AZIK用タイピング練習サイトTQPUの紹介

はじめに

こんにちは、機械学習エンジニアの ishi2ki です。みなさん、AZIKという日本語タイピング方式をご存知でしょうか?ローマ字入力を拡張した方式で、簡単に打鍵数を少なくできる方式です。しかし、通常のタイピング練習サイトではAZIKは対応していません。業務などで使いながら覚えることもしやすいAZIKですが、やはり練習の場は欲しいです。

そこで今回は、AZIKなどのオリジナルのローマ字テーブルを使っている人向けに開発した「TQPU」を紹介したいと思います!

AZIKについて

TQPUの紹介に移る前に、AZIKについて簡単に紹介しようと思います。既にご存知の方は読み飛ばしていただいて構いません。

AZIKとは

日本語の入力方式としてメジャーなのは、次の2つだと思います。

  • ローマ字入力
  • かな入力

ローマ字入力は学習コストが低いですが、かな入力と比べてキーストロークが多くなってしまいます。しかし、かな入力はローマ字入力とは全く異なった打ち方をする必要があり、学習コストが高いです。

AZIKは、これら2つの中間となるような入力方式です。ローマ字入力をベースに拡張した方式であり、学習コストを抑えつつキーストロークを減らすことができます。

例えば、入場券 (にゅうじょうけん) を入力する場合、ローマ字入力とAZIKで次のような違いがあります。

  • ローマ字入力:NYUUJOUKEN(N) → 11 (10) ストローク
  • AZIK:NYHJPKD → 7ストローク

この2つの差分を見ると、UUがHに、OUがPに、EN(N)がDになっています。このようにAZIKでは、二重母音などのよく連続するアルファベットを他の文字で置き換えてストローク数を減らしています。また、HはUの左下、PはOの左、DはEの右下の配置であり、指で覚えやすい置き換えルールになっています。置き換えルールの詳細などは、AZIK解説ページをご覧ください。

導入方法

以下はMacの場合ですが、Windowsも同様の流れで導入できると思います。

  1. Google日本語入力をダウンロードする
  2. ローマ字変換テーブルを用意する
  3. Google日本語入力の、Config Dialog → 一般 → ローマ字テーブル → 編集 → インポート で2のローマ字テーブルをインポートする。
  4. Macのシステム → キーボード → 入力ソースから、Google日本語入力を追加する。

2のローマ字変換テーブルですが、最初から作ろうとするとかなり大変です。そこで、最初は公開されているローマ字テーブルを使うことを推奨します。公開されているテーブルの例としていくつかリンクを載せます。

まずはこれらのテーブルを使い、AZIKに慣れてきたらオリジナルの変換ルールを追加していきましょう!

タイピング練習サイト TQPU

AZIKについて知っていただいたところで、TQPUの紹介に移ります。

機能紹介

まずはこちらからサイトにアクセスしてください。AZIK使っている人は、ぜひそのまま使ってみてください!
https://kuroneko2828.github.io/tqpu/

通常のタイピング練習サイトとは異なり、開始前にローマ字テーブルのアップロードを行います。これによって、ユーザーは、自分のローマ字テーブルに合わせて単語を打つことが可能となります。

なお、表示されている打ち方は、ユーザーのローマ字テーブルの組み合わせの中で最も短くなる打ち方です。
効率の良いタイピング方法に矯正させるため、表示されている打ち方以外は受け付けないようにしています。例えば、将来をSYOURAIと打っても受け付けません。
(※最短の打ち方が複数ある場合、そのうち1つしか受け付けません。今後修正する予定です🙏)

開発小話

TQPUですが、実は社内のLT大会でのネタとして作ったものです。せっかくなら経験の少ないフロント技術を使って何か作ろうと思って作成したものですが、開発に取り掛かったのが発表の5日前…。全然時間がない。フロントほぼ触ったことない。でもちゃんと形にしたい…!

そこで生成AIに頼ってみました。

僕:「Claudeくん、タイピングサイト作ろうと思っているんだけど、何で作ったらいいかな?」
Claude:「モダンな技術なら Next.js とかどうでしょう。プロジェクトの作成方法と雛形作ってみました」
僕:「ありがとう!ローマ字テーブルを読み込むようにしたいな。それ使って、平仮名をローマ字に変換するコードも書いて!」
Claude:「わかりました。これでどうでしょう」
僕:「Copilotくん!この辺バグってる、直して! Perplexityくん!Claudeくんが給料要求してきた、代わりに手伝って!」
Copilot&Perplexity:「承知しました」
僕:「Adobeくん、サイトのロゴ作って! Claudeくん、何度もごめん!MarpでLTのスライド作って!」
Adobe&Claude:「承知しました…」

僕がやったのは、AIたちのマネジメントと、タイピングの問題をスクレイピングで集めたことくらいです。すごく助かりました。僕一人じゃ絶対に間に合わなかったです。

実装詳細

AIにほぼ任せていたとはいえ、技術ブログなので簡単に実装部分も紹介したいと思います。開発言語は Next.js (サイト作成) とPython (タイピング問題のスクレイピング) です。

ローマ字テーブルの保存

TQPUでは、一度ローマ字テーブルをアップロードすると、次回以降アップロードせずにそのテーブルを使って練習することができるようになっています。これを実現するために、当初 Cookie を使おうと思っていました。
しかし、Cookie 1つの保存上限は4096バイトまで、合計20個まで保存可能という制限があり、使うことができませんでした。

そこで、5MBまで保存可能なlocalStorageを使うことにしました。使用方法もとても簡単です。

最小打鍵の探索

最小打鍵の探索は以下のように行っています。

  1. ローマ字テーブル (kanaRomanMaps) を打鍵効率の高い順 (“仮名の長さ” / “ローマ字の長さ” が大きい順) にソートする
  2. タイピング問題の仮名と前方一致するマッピングを探す (ソートされているので最初に見つかったものが、最も打鍵効率が高いものになります)。
  3. 残りの全ての仮名に対して、順に2を行う

コードは以下の通りです。

ただし、この方法は完全な最小打鍵が得られるわけではありません。
例えば、”てすと” と打ちたいとします。また、ローマ字テーブルは次のものを使うとします。

仮名 打鍵 打鍵効率
てす [ 2 / 1
てすと ts 3 / 2
to 1 / 2

上記のアルゴリズムで得られるのは、”[to” で打鍵効率は 3 / 3 です。それに対して最小打鍵は、”ts” で 3 / 2 です。しかし実際にこのようなこと状況になるのは稀です。正確に最小打鍵を求めようとすると計算量が膨れ上がってしまうので、上記のアルゴリズムを採用しました。

タイピング問題の収集

タイピング問題には、Wiktionary:日本語の基本語彙1000から、以下の品詞を使わせてもらいました。

  • 名詞
  • 形容詞
  • 形容動詞
  • 動詞
  • 副詞

まとめ

AZIKなど、オリジナルのローマ字テーブルを使っている人向けのタイピングサイト「TQPU」を紹介しました。AZIKユーザーは是非お試しください!AZIKを使っていない人は、AZIKの導入から始めてみましょう。タイピングが楽しくなります!

TQPUは開発したばかりで使いづらい点など多くあると思います。感想や要望など、本記事のコメントやXのDMでお待ちしています!

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

上部へスクロール