Anki Timed Beep

カード表示中に、指定した時間間隔でサウンドを鳴らすAnkiアドオンです。集中力の維持や学習時間の管理に役立ちます。

主に詰めチャレという将棋クエストの中の一つのゲームの、復習に使うことを想定して作成されました。

1 機能
2 インストール方法
3 設定方法
4 画面表示

機能

カード表示後、指定したタイミングでサウンドを再生
GUI設定画面でタイミングやサウンドファイルを自由に変更可能
config.json による設定のカスタマイズ
テストやデバッグ用のログ出力機能

インストール方法

①Ankiの「ツール」→「アドオン」から、「新たにアドオンを取得」

②「コード」に「1468930784」を入力、OKを押したあと、Ankiを再起動

設定方法

Ankiの「ツール」→「Timed Beep 設定」からGUIで編集可能
または config.json を直接編集してもOK

ファイル構成は、

timed_beep/
├── __init__.py
├── playsound.py
├── config.json
├── manifest.json
├── README.md
├── LICENSE
├── beep10.wav
├── beep5.wav
├── buzzer.wav

のようにしてください。

アドオンのパスは、

C:\Users\あなたの名前\AppData\Roaming\Anki2\addons21\timed_beep

Ankiを起動したとき、anki-timed-beepというアドオンが表示されていれば認識されています。

アドオンを選択して設定ボタンから、音ファイルの名前や鳴らすタイミング

（デフォルトでは残り１０秒、残り５秒、残り０秒）

をカスタマイズすることができます。

ここでカスタマイズするより、音声ファイルを差し替えた方が楽かもしれません。

画面表示

このアドオンを導入することにより、音は鳴るようになると思いますが、画面表示は

テンプレートを使います。

問題画面で、問題下に残り秒数を表示したい方は、次の作業を実施してください。

以下のテンプレートを、

この画面上でEボタンを押し、編集モードに入ります。

上の画面で「カード」ボタンを押します。

この図の「表面のテンプレート」に、以下のコードを貼り付けます。

<style>
body {
    margin: 0;
    padding: 0;
}
#wrapper {
    transform: scale(0.91);
    transform-origin: top center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
#question {
    max-width: 800px;
    margin: 20px auto;
}
#timer {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}
</style>

<div id="wrapper">
    <div id="question">
        {{問題}}
    </div>

    <div id="timer">
        残り時間: <span id="time">30</span> 秒
    </div>
</div>

<script>
(function() {
    const timerElement = document.getElementById("time");
    if (!timerElement) return;

    const duration = 30;
    let startTime = Date.now();

    function updateTimer() {
        const elapsed = Math.floor((Date.now() - startTime) / 1000);
        const timeLeft = Math.max(0, duration - elapsed);
        timerElement.textContent = timeLeft;
    }

    setInterval(updateTimer, 250);
})();
</script>

これで、問題画面の下部に、残り時間がはっきりと記述されるようになります。

尚、この画面表示に関しては、デッキごとに設定する必要があります。

縮尺率は上から７行目あたりの

transform: scale(0.91);

です。自分の場合は、そのままだとスクロールしないと残り時間が見えなかったので、91%に縮小しました。

バグや質問、要望等ありましたら、この記事にコメントください。

よろしくお願いいたします。