もなかるた(かるた読み上げアプリ) | サンプルアプリ一覧

アシアル情報教育研究所所長の岡本雄樹です。

年明けに『かるた読み上げアプリ』を作ってサンプルとして公開しようと考えていたのですが、気がついたら3月になっておりました。

どちらにせよ、カルタが注目される時期は1月なので、サンプルアプリを提供するなら1月より前に出す必要がありました。今出せば、2021年末に使えると思うので、『カルタ読み上げアプリ』を紹介します。

サンプルアプリプロジェクト

もなかるた(かるたアプリLv1)

アプリのイメージ

動作の解説

スタートボタンを押すと、自動的にカルタを読み上げます。一度読んだ札は、カルタが終了するまで、読み上げられることはありません。

リセットボタンを押すと、読み上げを強制終了します。今まで読み上げた札もリセットされます。

カルタの音声は「mp3ファイル」としてアプリに内蔵されたものを読み上げています。そのため、オリジナルのカルタをつくるためには、音声ファイルは自分で用意する必要があります。

サンプル音声の解説

このサンプルアプリでは「開始」と「終了」と「リセット」の3つの音声と、5つの「コンピューター用語」の音声が登録されています。

あ：IoT: あいおーてぃーで、ものが、いんたーねっとにつながる
い：インタプリタ型言語: インタプリタがた言語のプログラムは逐次翻訳して実行されます
う：ウイルス: ウイルス対策の基本はオーエスのアップデート。
え：SDカード: えすでぃーかーどは、二次記憶装置のいっしゅ。取り外しが容易なリムーバブルメディアであり、カメラやスマホにも使えます。
お：オーディオインタフェース: オーディオインタフェースは、音をマイクやミキサーなどからコンピューターに取り込むための装置で、ユーエスビーなどで接続します。

HTML側(index.html)


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <script src="js/config.js" defer></script>
    <script src="js/main.js" defer></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>もなかるた</h1>
    <button onclick="start()" id="start">スタート</button>
    <button onclick="reset()" id="reset">リセット</button>
</body>
</html>

設定(js/config.js)


const sounds = [
    'a.mp3',
    'i.mp3',
    'u.mp3',
    'e.mp3',
    'o.mp3',
];
const drawTime  = 10000;

メインの処理(js/main.js)


// グローバル変数の定義
let cards;
let timeoutID;

// 初期化の実行
init();

// 以下、関数群
function init(){
    cards = Array.from(sounds); // 音声の設定を配列にコピー 
}
function reset() {
    playAudio("audio/reset.mp3"); 
    clearTimeout(timeoutID)
    init();
}
function start(){
    playAudio("audio/start.mp3"); 
    timeoutID = setTimeout(playGame, drawTime);
}
function end() {
    playAudio("audio/end.mp3");
}
// カルタの読み札をランダムに引いて読み上げる
function draw(){
    const key = Math.floor(Math.random() * cards.length);
    const audio = new Audio("audio/" + cards[key]);
    audio.play();
    cards.splice(key, 1);
}
// 設定された時間の感覚でカルタを引き続ける
function playGame(){
    draw();
    if (cards.length >= 1) {
        timeoutID = setTimeout(playGame, drawTime);
    } else {
        timeoutID = setTimeout(end, drawTime);
    }
}
function playAudio(path){
    const audio = new Audio(path);
    audio.play();
}

要素技術の活用ポイント

サンプルアプリで利用されている要素技術と活用ポイントを解説します。

配列のコピー

このカルタアプリでは、カルタの内容を「js/config.js」ファイル内に定数「sounds」配列形式でハードコードしています。

カルタとして読み上げる際には、この配列をコピーし、要素を一つずつ減らしていく必要があります。配列をコピーするための命令として

Array.from()

命令を使用します。

実は普通に「=」で代入するとコピーにはならないため、コピー用の命令を使用します。

cards = Array.from(sounds); // 音声の設定を配列にコピー

なお、JavaScriptでは以下のような記述でも同じ事が実現できますが、言語固有の記法なので不採用としました。

cards = […sounds];

札がある限りカルタを読み続ける（という再帰処理を記述する）

このカルタアプリでは、カルタの読み札を、札が無くなるまで読み続ける必要があります。また、カルタを読み終わる前に次の札を読み出すとカルタが成立しないため、ウェイトの処理も必要となります。

setTimeout()命令を使うことで、指定した秒数後に指定した関数を処理させることができます。つまり、10秒後にカルタの読み札を読む、といった処理を記述できます。

カルタの読み札を一枚選んで（削除して）、選んだ札を読み上げるような関数を作成した上で、setTimeout()命令で再帰処理を記述すれば、札がある限りカルタを読み続ける処理を記述できます。

音声を鳴らす

HTML5では「new Audio()」で音声ファイルを音声オブジェクトにすれば、play()命令で音声として鳴らすことができます。

このカルタアプリでは、上記の命令を元にユーザー定義関数としてplayAudio()関数を独自に定義しています。playAudio()関数に音声ファイルのパスを渡したタイミングで、即時、音声を鳴らすようにしています。

カルタの読み札をランダムに1枚引いて配列から取り除く

このカルタアプリでは、毎回ランダムに読み札から札を1枚引く必要があります。乱数処理用の関数であるMath.random()を応用して、配列から取得するべき値のキーを決定しています。

key = Math.floor(Math.random() * cards.length);

また、配列からキーの要素を取り除く命令としてslice()命令を使用しています。

cards.splice(key, 1);

補足事項

読み札を読む時間は「js/config.js」にて、10秒(10000ミリセカンド)で固定にしています。10秒以上掛かる音声が入っていると、上手く読み上げられません。必要に応じて秒数を調整してください。

類似のアプリ

タイマーや音声を使っているサンプルアプリとして「ソーメンタイマー」が類似のアプリになります。また、音声を使っているサンプルアプリととして「タイピングアプリ」が類似のアプリになります。

カスタマイズの方向性

読み札をオリジナルでつくるのがお勧めです。1人で読み札を沢山つくるのは大変なので、グループやクラスなどで分担して作成することをお勧めします。岡本は5つで力尽きました。

また、ご当地でカルタがある場合には、それを読み上げるアプリを作のが良いかもしれません。