ひらがなボードの開発記録（シンプルなWeb音声アプリ）

1. はじめに

子供向けの学習ツールとして「ひらがなボード」を開発しました。

このアプリは、画面上のひらがなボタンをタップすると音声が再生され、入力した文字列を連続して読み上げる機能を持っています。

ひらがなボード（https://app.chiilabo.jp/hiragana-keyboard/）

この記事では、HTMLファイル一つで動作するシンプルなWebアプリの開発過程を紹介します。プログラミング初心者でも理解できる内容になっていますが、Web Audio APIなどの専門的な技術も解説しているので、中級者以上の方にも参考になるでしょう。

2. 開発の目的と要件

2.1. アプリの目的

先日、うちの子ども（4歳）にYouTubeで「ひらがな五十音のうた（MEWch）」を見せて以降、最近は「ひらがな」ブーム。何度も「また見たい」とせがんで来ます。

そこで、ひらがなの形と音の対応を楽しく学べるWebアプリを作りました。

歌に出てきた言葉を順番に作っては、鳴らしていました。文字はやっぱり組み合わせて言葉を作る道具。簡単に使えるよう、シンプルで直感的なインターフェースを目指しました。

2.2. 主な要件

ひらがなボタンをタップすると対応する音声を再生する
入力したテキストを表示・編集できる
濁点・半濁点・小文字変換機能がある
入力した文章を連続して読み上げる機能がある
スマートフォンに最適化された縦画面レイアウト
シンプルで分かりやすいデザイン

2.3. 開発環境

単一のHTMLファイル（HTML/CSS/JavaScript）
外部ライブラリなし
音声ファイル：各ひらがなのMP3ファイル

3. 基本設計：シンプルさを追求する

最初に考えたのは「どれだけシンプルに作れるか」という点です。通常、WebアプリはHTML、CSS、JavaScriptなど複数のファイルに分けて開発しますが、今回は配布やホスティングの手間を省くため、すべてのコードを1つのHTMLファイルにまとめました。

冷蔵庫に例えると、普通は冷凍室、野菜室、ドリンクホルダーなど機能ごとに分かれていますが、今回は1つの大きな箱に全部入れるようなイメージです。見た目はシンプルでも、中身はきちんと整理されています。

4. レイアウト設計：使いやすさを重視

4.1. 画面構成

画面は大きく3つの部分に分かれています。

テキスト表示エリア：入力した文字を表示する部分
キーボード：五十音のひらがなボタンを配置
機能ボタン：濁点・半濁点・小文字変換・再生・削除などの特殊ボタン

キーボードのレイアウトは通常、「あいうえお、かきくけこ」のように横方向に並びますが、「なたさかあ、にちしきい」のように配置することで、縦書き配列にしました。

スマートフォンを横向きに変えるのが好きではないので、縦画面に合わせて 2段に分けました。

4.2. CSSの工夫

見た目の調整には「CSS」という技術を使いました。ボタンの色分けは、あ行は赤、か行は青など、ひらがなのグループごとに異なる色を割り当て、視覚的に区別しやすくしています。

.kana-btn[data-kana="あ"], .kana-btn[data-kana="い"] /* 以下省略 */ {
    color: #e74c3c; /* 赤色系 */
}
Code language: CSS (css)

ボタンを押したときのエフェクトも、わずかに沈み込むような動きを追加し、タップした感覚がわかりやすいよう工夫しています。

.kana-btn:active, .function-btn:active {
    background-color: var(--button-active);
    transform: translateY(1px);
}
Code language: CSS (css)

5. 音声機能の実装：Web Audio APIの活用

5.1. 音声再生の仕組み

Webブラウザで音声を再生するには、いくつかの方法があります。最も簡単なのは<audio>タグを使う方法ですが、今回はより低遅延で柔軟な制御ができる「Web Audio API」を採用しました。

Web Audio APIは、音楽スタジオの機材のようなイメージです。音源、エフェクト、ミキサーなどの機能をプログラムで自由に組み合わせることができます。

5.2. 音声ファイルの命名規則

音声ファイルには2つの命名方法を検討しました。

ひらがなをそのまま使う方式：「あ.mp3」「か.mp3」
ローマ字を使う方式：「a.mp3」「ka.mp3」

最終的には、ファイル名に日本語を使うとサーバー環境によって問題が生じる可能性があるため、ローマ字方式を採用しました。そのために、ひらがなとローマ字の変換テーブルを用意しています。

const HIRAGANA_TO_ROMAJI = {
    "あ": "a", "い": "i", "う": "u", /* 以下省略 */
};
Code language: JavaScript (javascript)

5.3. 音声ファイルの生成

音声ファイルは、Pythonスクリプトを使って自動生成しました。Google Text-to-Speech (gTTS) APIを利用して、各ひらがなの音声をMP3形式で作成しています。

from gtts import gTTS

# ひらがなの音声を生成
tts = gTTS(text="あ", lang='ja')
tts.save("audio/a.mp3")
Code language: PHP (php)

生成した音声は長さを調整するために、pydubというライブラリとFFmpegというツールを使って編集しています。これは、料理のレシピを作るときに、材料を正確に計量するようなものです。

6. プログラムロジックの実装：対話型機能

6.1. 基本的な入力処理

ひらがなボタンがタップされたとき、以下の処理を行っています。

タップされたひらがなを取得
入力テキストに追加
画面表示を更新
対応する音声を再生

function addKana(kana) {
    // テキストに追加
    currentText += kana;
    
    // テキスト表示を更新
    updateText();
    
    // 音声再生
    playSound(kana);
}
Code language: JavaScript (javascript)

6.2. 特殊機能の実装

濁点、半濁点、小文字化などの特殊機能は、最後に入力した文字を変換する形で実装しました。例えば「か」と入力した後に濁点ボタンを押すと「が」に変わります。

function applyToLastChar(mode) {
    // テキストが空の場合は何もしない
    if (!currentText) return;
    
    // 最後の文字を取得
    let lastChar = currentText[currentText.length - 1];
    let newChar;
    
    // モードに応じて変換
    if (mode === 'dakuten') {
        newChar = applyDakuten(lastChar);
    } /* 以下省略 */
}
Code language: JavaScript (javascript)

また、無効な組み合わせ（例：「あ」に濁点）のときはボタンをグレー表示にして、使えないことを視覚的に示しています。これは信号機の赤信号が「止まれ」を意味するように、直感的に理解できる仕組みです。

6.3. 連続再生機能

再生ボタンを押すと、入力されたテキスト全体を順番に読み上げます。このとき、「きゃ」「しゅ」などの拗音や「ー」（長音）の処理に工夫が必要でした。

async function playSequence(kanaArray) {
    // 拗音や長音の処理
    let i = 0;
    while (i < kanaArray.length && isPlaying) {
        let kana = kanaArray[i];
        
        // 小文字（ゃ、ゅ、ょなど）の処理
        if (i > 0 && isSmallChar(kana)) {
            // 拗音として処理
        }
        // 長音（ー）の処理
        else if (kana === 'ー' && i > 0) {
            // 前の文字の母音を延ばす
        }
        // 通常の文字
        else {
            await playSound(kana);
        }
        
        i++;
    }
}
Code language: JavaScript (javascript)

連続再生が終わったら、テキストを自動的にクリアする機能も追加しました。これにより、次の文を入力しやすくなっています。

7. 実装の改良：ユーザー体験の向上

7.1. ローマ字ファイル名対応

最初の実装ではひらがなそのままのファイル名（「あ.mp3」）を想定していましたが、後にローマ字ファイル名（「a.mp3」）に対応するよう改良しました。

async function loadSound(kana) {
    // ひらがなをローマ字に変換
    const romaji = HIRAGANA_TO_ROMAJI[kana] || kana;
    
    // 音声ファイルのパスを構築
    const filename = `audio/${romaji}.mp3`;
    
    // 以下、ファイル読み込み処理
}
Code language: JavaScript (javascript)

7.2. フォールバック機能

音声ファイルがない場合や読み込みに失敗した場合のために、Web Audio APIで簡易的な音声を生成する機能も追加しました。これは、料理の材料が足りないときに代替品で代用するようなものです。

async function createDummySound(kana) {
    // 簡易的な音声を生成
    const sampleRate = audioContext.sampleRate;
    const buffer = audioContext.createBuffer(1, sampleRate * 0.3, sampleRate);
    const data = buffer.getChannelData(0);
    
    // 母音ごとに周波数を変更して異なる音に
    // 以下、音声生成の処理
}
Code language: JavaScript (javascript)

8. 完成したアプリの特徴と使い方

8.1. アプリの特徴

単一HTMLファイルで動作するシンプルな構成
スマートフォン向けの最適化されたレイアウト
ひらがなの形と音を同時に学べる設計
濁点・半濁点・小文字・拗音にも対応
文章の連続読み上げ機能

8.2. 使い方

ひらがなボタンをタップすると、対応する音声が再生されテキストに追加される
濁点・半濁点・小文字ボタンは、最後に入力した文字を変換する
長音（ー）ボタンは、前の文字の母音を延ばす
空白ボタンで単語間のスペースを入れられる
再生ボタンを押すと、入力したテキストを連続して読み上げる
削除ボタンで一文字ずつ消すことができる

9. まとめ

シンプルなWebアプリ「ひらがなボード」の開発過程を紹介しました。HTML、CSS、JavaScriptを組み合わせることで、外部ライブラリに頼らずとも実用的なアプリケーションを作ることができます。Web Audio APIを活用した音声機能や、ユーザー体験を向上させるためのUI/UXの工夫など、Webアプリ開発の基本的な要素を含んでいます。

子ども向け足し算練習PWAを開発した（たしざんフレンズ） – Chiilabo Note