やりたいこと

自作した電子書籍（EPUB形式の電子書籍を一からゴリゴリ作成する方法）で，読書回数など簡単に記録できたら便利だなと思いました．

例えば，課題のついた書籍であれば，問題を解いた回数や間違った回数を記録したりなどの使い道が考えられそうです．

今回，JavaScriptで電子書籍リーダのローカルストレージ部分を活用することで実現しました．

前提

ちゃんと動作してくれるかは仕様次第
そもそもローカルストレージを利用できるかどうかは電子書籍リーダ自体やその環境に依存します．やってみてもうまく動作しない場合があり得ます．
複数の環境や電子書籍リーダを用意して試してみるのが良さそうです．
筆者はMacBookやiPadの「ブック」アプリやKotobee Readerなどで動作を検証していました．
容量の問題
データ容量を考慮せずにローカル領域に保存していくと，知らぬ間にデータ容量を逼迫する恐れがあります．小さめのデータを自己責任で使いましょう．

コード

ボタンの押下に応じて読書回数を加算するプログラムです．
色々と改善の余地のあるコードと思います...

countButton.js

document.addEventListener('DOMContentLoaded', function () {
    // LocalStorageから読書回数を取得してボタン横に表示
    const buttonNum = 2; // ボタンの個数
    for (let i = 1; i <= buttonNum; i++) {
        const buttonId = `button${i}`;
        const countDisplayId = `countDisplay${i}`;
        const countDisplay = document.getElementById(countDisplayId);

        // LocalStorageから読書回数を取得
        let count = localStorage.getItem(buttonId);
        if (count === null) {
            count = 0;
        }

        countDisplay.textContent = `${count}`;

        // ボタンクリック時の処理
        const button = document.getElementById(buttonId);
        button.addEventListener('click', function () {
            // 読書回数を更新して表示
            count++;
            countDisplay.textContent = `${count}`;
            // LocalStorageに読書回数を保存
            localStorage.setItem(buttonId, count);
        });
    }
});

countButton.css


.counterWrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* ボタンを右寄せにする */
}

.counterButton1 {
    cursor: pointer;

    font-size: 1.5em;
    margin: 10px;
    width: 30px;
    /* ボタンの横幅を指定 */
    height: 30px;
    /* ボタンの高さを指定 */
    background-color: transparent;
    /* 背景色を透明にする */
    color: #C0C0C0;
    /* 文字色を指定 */
    border: 1px solid #C0C0C0;
    /* 外枠線を追加 */
    border-radius: 6px;
    /* 角丸にする */
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


.countDisplay {
    margin-left: 10px;
    font-weight: bold;
}

XHTMLでの呼び出し部分です．

chapter-02.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">

<head>
  <meta charset="UTF-8" />
  <title>タイトル</title>

  <link rel="stylesheet" type="text/css" href="../style/countButton.css" />
  <script type="text/javascript" src="../js/countButton.js"></script>

</head>

<body>
  回数をカウントします．

  <h5>カウント1つ目</h5>
  <div class="counterWrapper">
    <span id="countDisplay1" class="countDisplay"></span>
    <button id="button1" class="counterButton1">＋</button>
  </div>
  
  <h5>カウント2つ目</h5>
  <div class="counterWrapper">
    <span id="countDisplay2" class="countDisplay"></span>
    <button id="button2" class="counterButton1">＋</button>
  </div>
</body>
</html>

standard.opfの<manifest>抜粋部分です．

standard.opf

    <manifest>
        <!-- style -->
        <item media-type="text/css" id="voc-style" href="style/countButton.css" />

        <!-- xhtml -->
        <item media-type="application/xhtml+xml" id="chapter-02" href="xhtml/chapter-02.xhtml" />

        <!-- javascript -->
        <item id="js2" href="js/countButton.js" media-type="text/javascript" />

    </manifest>

完成

初期状態

＋ボタン押下して加算した状態

iPadのブックの場合，アプリの再起動や本体の再起動後も記録した回数データが残っていることを確認しています．

EPUB形式の電子書籍内のJavaScriptでローカルストレージにアクセスして情報を記録

やりたいこと

前提

コード

完成