IT用語タイピングゲームを作った話：Supabase・GitHub Actions・Web Audio APIを使った個人開発

作ったもの

HACKER TYPER: OMEGA - IT用語に特化した無料タイピングゲームです。

ハッカーがコードを打ち込む雰囲気のUIで、マルウェア・DDoS攻撃・アジャイル開発・ゼロトラストセキュリティなど105問以上のIT用語をタイピング練習できます。オンラインランキング機能もあります。

「タイピング練習しながらIT用語も覚えられたら一石二鳥では」という発想で作りました。

技術構成

フレームワークは使わずVanilla JS + HTMLで作っています。バックエンドはSupabaseのみ。

フロント: HTML / CSS / JavaScript（フレームワークなし）
DB/API: Supabase（オンラインランキング）
ホスト: Netlify（GitHub連携・自動デプロイ）
CI/CD: GitHub Actions（Supabase keep-alive）
音声: Web Audio API（外部ファイルなし）

工夫した点
ローマ字変換エンジン

日本語タイピングゲームの核心部分です。「しすてむ」をs-i-s-u-t-e-m-uに分解してキー入力と照合します。

特に「ん」の処理が複雑で、次の文字によってn1回かnn2回かが変わります。

javascript
// 次が母音・y・nの場合はnn必須
if (['a','i','u','e','o','n','y'].includes(nextChar)) {
    allowSingleN = false;
}

「っ」は次の子音を重ねることで入力（って → tte）。複数のローマ字表記（si/shiなど）も両方受け付けます。

コンボ連動の演出
コンボが増えるとゲーム全体が変化するようにしました。

マトリックス: 色が緑→シアン→橙→赤に変化、残像の密度も上がる
パネル枠: コンボ数に応じて色が変わる
タイピング音: Web Audio APIでピッチが上昇、50コンボ以上で波形がsquare→sineに

javascript
// コンボでピッチが変わる打鍵音
const base = combo >= 50  ? 1400
           : combo >= 25  ? 1100
           : combo >= 10  ? 950
           : 800;
osc.type = combo >= 50 ? 'sine' : 'square';

Web Audio APIは外部ファイル不要でブラウザだけで音が出せるので、ホスティングコストがかからず便利です。

Supabase無料プランの停止対策

Supabaseの無料プランはアクティビティがないと1週間でDBが停止します。

GitHub Actionsのcronで毎日自動的にSupabaseにアクセスして停止を防いでいます。

yaml
on:
  schedule:
    - cron: '0 0 * * *'

jobs:
  ping:
    runs-on: ubuntu-latest
    steps:
      - name: Ping Supabase
        run: |
          curl -s "https://your-project.supabase.co/rest/v1/rankings?limit=1" \
            -H "apikey: YOUR_KEY"

無料で完結する構成なのでコストゼロで運用できています。

問題データの自動生成

手書きでひらがなを入力していると105問でタイポが怖い。Kuroshiroで自動変換しました。

javascript
const k = await kuroshiro.convert(text, { to: 'hiragana', mode: 'normal' });
// カタカナをひらがなに変換
const cleaned = kata2hira(k).replace(/[^\u3041-\u3096ー]/g, '');

変換後に全問チェックスクリプトを走らせて品質担保しています。

詰まったポイント

Supabaseの204問題: POSTが成功しているのにエラーが出る。Supabaseは成功時に204 No Contentを返すのでres.json()が失敗していた。res.text()でボディの有無を確認してからパースするように修正。

Netlifyの自動デプロイが動かない: プライベートリポジトリの場合、Netlify無料プランはコントリビューター1人制限がある。リポジトリをPublicにして解決。

おわりに

フレームワークなしでも工夫次第でリッチなゲームが作れました。コード生成するにあたりclaudeを使用しています。　Supabase + GitHub Actionsの組み合わせは無料でオンライン機能を実現する上で強力です。

ぜひ遊んでみてください。OMEGAレベルは普通に難しいです。