ユビバト

なぜ作ったか

フリック入力に慣れたスマホの利用者なら誰でも、インストールせずにブラウザだけで、入力の速さを競えるゲームを目指しました。小中学生を含む一般の人が、友達と手軽に対戦できることを大事にしています。

遊ぶだけなら登録は要りません。ランキングに参加するときだけ、IDとパスワードで登録します。メールアドレスなどの個人情報は集めません。

主な機能

• タイムアタック：60秒で、単語または文章のお題の読みをどれだけ打てるかを競います。スコアは「正しく打てた文字数 × 正確率」です。
• 対戦：同じお題を同じ順番で打ち、正しく打った文字数に応じて相手のHPを削ります。URLを送って友達と遊ぶURL対戦、全国の待機中のプレイヤーと組むランダムマッチ、相手が見つからないときのCPU対戦があります。CPUの強さはプレイヤーの実力に合わせます。
• ランキング：単語・文章のタイムアタックと、ランダムマッチの勝利数について、歴代・月間・デイリーのランキングがあります。
• 練習とチュートリアル：時間制限のないフリー練習と、濁点・小文字・記号の打ち方を実際に打って覚えるチュートリアルがあります。
• お題：単語約3,000件、文章約1,000件です。AIで下書きを作り、別のAIで既存作品の引用や実在の名前、不適切な内容、読みの正しさを確かめてから公開しています。
• 管理画面：お題の追加・編集・公開、お問い合わせや通報の確認、ユーザーの非表示やログイン停止ができます。

設計の判断

1. 01キーボードを自作する

   課題

   スマホ標準のキーボードを使うと、予測変換で入力を補えてしまい、速さを公平に比べられない。iPhone と Android でも挙動が違う。

   選んだ方法と理由

   一般的な日本語のフリック配置に合わせたキーボードを画面上に自作し、タッチ操作でだけ入力できるようにした。濁点・小文字は「基本の文字 → 切替キー」で打ち、基本の文字が正しければ途中の状態として扱ってミスにしない。

   結果

   実機で試すと、端の列の外向きのフリックが画面の縁に当たって打ちにくかった。キーボードの左右に余白をとり、高さも画面の45%から35%まで下げた。さらに設定で高さ・幅・吹き出しの出し方を変えられるようにし、「iPhone の標準くらい」「Android の標準くらい」のかんたん設定を用意した。

2. 02記録はサーバーで計算し直す

   課題

   ランキングがあるため、端末から送られたスコアをそのまま信じると、簡単なお題だけを選んだり、スコアを書き換えたりできてしまう。

   選んだ方法と理由

   出題順はサーバーが署名した乱数の種から決め、端末とサーバーで同じ並びを再現する。端末は1文字ごとの時刻を記録して送り、サーバーが確定した文字の並び・入力の間隔・1秒あたりの文字数を確かめてから、スコアを計算し直す。ランキングに登録するまでデータベースには書かない。

   結果

   ミスは入力を進めないため記録から外しても照合が通り、ミス数だけは端末の申告を信じるしかないと分かった。守りは最小限という方針に沿い、既知の制限として受け入れた。

3. 03パスワードの処理を無料プランの CPU 時間に収める

   課題

   パスワードは PBKDF2 でハッシュ化するが、無料プランの CPU 時間の目安は1リクエスト10ミリ秒で、本番の Workers は反復10万回を超えると例外になる。手元では再現しないため、本番で測るしかない。

   検討した選択肢

   • 反復 10,000 回
   • 反復 25,000 回
   • 反復 50,000 回

   選んだ方法と理由

   本番で計測し、PBKDF2 自体が4〜6ミリ秒で済む 25,000 回にした。反復回数はハッシュと一緒に保存するので、後から増やせる。

   結果

   ログイン全体では11〜20ミリ秒と目安を超えたが、残りはログインのほかの処理と起動の準備によるもので、10,000 回に下げても約3ミリ秒しか減らない。Cloudflare は処理を打ち切らずに成功させているため 25,000 回のままにし、CPU 超過のエラーが出ないかを観察している。

4. 04無料枠の半分で動かす

   課題

   運営費は Cloudflare の無料枠だけで賄う。無料枠はアカウント全体でほかのサービスと共有しているため、このゲームだけで使い切るわけにはいかない。

   選んだ方法と理由

   各無料枠の半分以内を自分の上限にした。お題は公開時に KV へまとめて書き、端末にも保存して毎回読まないようにする。ランキングは Cache API と Worker のメモリに置き、対戦の状態は変わったときだけ保存する。無料枠の上限を超えたことを検知したら、ランキングや対戦などのオンライン機能だけを止める。

   結果

   枠を使い切った日でも、タイムアタック・練習・CPU 対戦は端末の中だけで遊べる。止まったオンライン機能は、無料枠がリセットされたあとに自動で再開する。

技術構成

品質と運用

• テスト：入力の判定（濁点・小文字・ミス・途中の状態）、スコア、記録の検証、乱数の再現性、IDとパスワードの規則を単体テストで確かめています。API と対戦（開始・判定・切断の猶予・再接続）は Workers の環境でテストしています。
• スマホの画面：Playwright で iPhone と Pixel の画面とタッチ操作を再現し、キーボードの操作、タイムアタック、対戦（2台）、ランダムマッチ、ランキングなどを確かめています。
• CI：GitHub Actions で lint・型チェック・テストを行います。時間のかかる E2E は手元だけで実行し、Actions の無料枠を節約しています。
• 見やすさ：ライトとダークの全画面を撮影して確かめ、文字とボタンのコントラストを基準以上に直しました。正誤や残り時間は、色だけでなく下線や太字、表示でも伝えます。
• 止まっても遊べる：通信できないときや停止中は、共通の案内を出し、電波が戻ったら自動でつなぎ直します。タイムアタックの記録は送り直せます。

振り返りとこれから

キーボードの大きさは、机の上で考えた値と実機で打ったときの感覚が大きく違いました。実機で何度も確かめて調整し、最後は利用者が自分で調整できるようにしました。

今後は、無料枠の消費を観察しながら、iPhone・Android・iPad の実機での確認を進めます。結果のSNSへのシェア、効果音、実力の近い人同士のマッチングなどを検討しています。