JavaScriptプログラム

Web Storage とJSON の試作プログラム

管理者

Web Storage と JSONを用いた、Webアプリの試作プログラムを作りました。

「学習システム」を念頭に置いた試作プログラム（プロトタイプ）です。

 

本記事は、記事「Web Storage の試作プログラム」の続き記事になります。

 

今回の試作プログラムは前回と比べて、データ構造が複雑になっています。

そのため、「学習システム」としてできること（機能）が増えました。

  • 今回の試作プログラム：　データ構造が複雑、　機能が多い
  • 前回の試作プログラム：　データ構造が簡単、　機能が少ない

 

 

試作プログラムの仕様

仕様
  • 学習画面が「初級」と「中級」の2画面ある。
  • 「初級」修了者のみ「中級」に進める。
  • 学習記録が残る。
  • 学習記録は消去できる。

 

動きの確認

 

 

  1.  [Lesson Start]ボタンをクリック
    レッスンA ページに移動
  2. [Lesson A!]ボタンをクリック
    レッスンA の得点表示
    60点以上だと、[Next Lesson]ボタンが表示
  3.  [Next Lesson]ボタンをクリック
    レッスンB ページに移動
  4.  [Lesson B!]ボタンをクリック
    レッスンB の得点表示
  5.  ブラウザを閉じる
    試作プログラムの終了
  6.  [Lesson Start]ボタンをクリック
    試作プログラムの再起動
    Lesson A の得点が残っていることを確認
  7.  [Next Lesson]ボタンをクリック
    Lesson B の得点が残っていることを確認
  8.  [Remove Lesson Data]ボタンをクリック
    Lesson の得点が残っていないことを確認

 

 

 

試作プログラムを作るため、Web Storage とJSON を利用しています。

Web Storage に関しては、記事「Web Storage の試作プログラム」に詳細を記述しました。

Web Storage の詳細は記事「Web Storage の試作プログラム」をご参照ください。

 

 

データ構造

 

JSONを用いて、以下のデータ構造としました。

{ "lessonData456" : [
    { "lessonNo":0, "workable":true , "score":0 },
    { "lessonNo":1, "workable":false, "score":0 }
]}

 

 

Web Storageへの保存

上記データ構造は、以下の形をしています。

{ key : value }

 

key とvalue は、それぞれ以下となります。

key = "lessonData456"

value = [
  { "lessonNo":0, "workable":true , "score":0 },
  { "lessonNo":1, "workable":false, "score":0 }
]

（注）上記value は、配列（Array）です

 

Web Storage はデータを、key とvalueのペアとして保存します。

今回は、上式で与えられるkey とvalue をペアとして、Web Storageに保存しました。

 

 

各レッスンのデータ構造

 

[
  { "lessonNo":0, "workable":true , "score":0 },
  { "lessonNo":1, "workable":false, "score":0 }
]

 

  • lessonNo： 0 が初級、1 が中級
  • workable： true が学習可能、false が学習不可能
  • score： 得点

 

試作プログラム

 

 

 

 

ユーティリティ

Web Storage のアクセス、JSON関連のプログラムです。

  • プログラム名： utilWS.js

 

utilWS.js

const KEY = "lessonData456";                           // Web Storage Key
var lessonArray;                                       // 

function createWebStorageData() {     // 
	var initialLessonArray = [
		{"lessonNo":0, "workable":true  , "score":0},
		{"lessonNo":1, "workable":false , "score":0}
	];
	var webStorageData = JSON.stringify(initialLessonArray);   //(stringify)
	localStorage.setItem(KEY, webStorageData);                 // setItem
	lessonArray = initialLessonArray;                          //(object copy)
}

function readWebStorageData() {        // lessonArray <- Web Storage
	var webStorageData = localStorage.getItem(KEY);        // getItem
	if (!webStorageData) {
		createWebStorageData();
	} else {
		lessonArray = JSON.parse(webStorageData);      //(parse)
	}
}
	
function writeWebStorageData() {        // lessonArray -> Web Storage
	var webStorageData = JSON.stringify(lessonArray);      //(stringify)
	localStorage.setItem(KEY, webStorageData);             // setItem
}
				
function removeWebStorageData() {       // 
	localStorage.removeItem(KEY);                          // removeItem
}

 

utilWS.js の説明

utilWS.js は、記事「Web Storage の試作プログラム」でのプログラム（Web Storage を操作する各種関数）とほぼ同じです。

説明の詳細は、記事「Web Storage の試作プログラム」をご参照ください。

 

以下、utilWS.js で新たに加わった部分を説明します。

  • 5行目から8行目： initialLessonArray
    LessonArray の初期値です
  • 9行目、24行目： JSON.stringify()
    JavaScriptオブジェクトを、JSON形式に変換するメソッドです
  • 19行目： JSON.parse()
    JSON形式のデータを、JavaScriptオブジェクトに変換するメソッドです

 

 

初級ページ

2頁ある学習ページの初級ページです。

  • プログラム名： A.html

 

A.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8">
        <title>Webstorage based Learning System</title>
        <script type="text/javascript" src="utilWS.js"></script>
        <script>
            const BORDERLINE = 60;                                 // pass: {score >= 60}		
            const LESSON_NO = 0;                                   // Lesson A
            var output_element;                                    // <output>
            var input_element;                                     // <input>

            function pseudoLesson() {
                var score = Math.floor(Math.random()*101);
                output_element.innerHTML = "Local Storage: use now"+"<br>"+score;
                readWebStorageData();                              // Array <- Web Storage
                lessonArray[LESSON_NO].score = score;              //
                judgeVisibility();                                 //
                writeWebStorageData();                             // Array -> Web Storage
            }
			
            function judgeVisibility() {
                if (lessonArray[LESSON_NO].score >= BORDERLINE) {
                    input_element.style.visibility = "visible";
                    lessonArray[LESSON_NO+1].workable = true;
                } else {
                    input_element.style.visibility = "hidden";
                    lessonArray[LESSON_NO+1].workable = false;
                }
            }

            function removeLessonData() {
                removeWebStorageData();
                output_element.innerHTML = "Local Storage: not use";
                input_element.style.visibility = "hidden";
            }

            window.onload = function() {
                output_element = document.getElementsByTagName("output")[0];
                input_element = document.getElementsByTagName("input" )[1];   // button:[Next Lesson]
                if (!localStorage) {
                    output_element.innerHTML = "Local Storage can't use."
                    return;
                }
                readWebStorageData();                               // Array <- Web Storage
                output_element.innerHTML = "Local Storage: use now"+"<br>"+
                                            lessonArray[LESSON_NO].score;
                judgeVisibility();
            }
        </script>
    </head>
    <body>
        <input type="button" value="Lesson A!" onclick="pseudoLesson()">
        <input type="button" value="Next Lesson" onclick="location.href='B.html'"><br>
        <input type="button" value="Remove Lesson Data" onclick="removeLessonData()"><br>		
        <output></output>
    </body>
</html>

 

 

A.html の説明

<body>要素

入力要素（<input>）が3個、出力要素（<output>）が1個です。

  • input0： 「Lesson A!」ボタン
    • クリックすると、pseudoLesson() が動く
  • input1： 「Next Lesson」ボタン
    • クリックすると、B.html に遷移する
  • input2： 「Remove Lesson Data」ボタン
    • クリックすると、removeLessonData() が動く
  • output0： 表示領域
    • エラーメッセージと得点を表示する

 

グローバル変数

  • BORDERLINE： 合格点、定数60点
  • LESSON_NO： 定数0 、レッスンA、初級

 

pseudoLesson() 関数

この関数で、レッスンを「疑似的に学習」しています。

以下の順に処理します。

  1. 得点（score）は、0点から100点までの値を乱数計算
  2. output要素に、score を表示
  3. Web StorageからlessonArrayにデータ読込
  4. lessonArray に score を保存
  5. judgeVisibiliry() 関数を動作
  6. lessonArray をWeb Storage に保存

 

judgeVisibility() 関数

この関数は、[Next Lesson]ボタンの表示/非表示を判断します。

score の値により、処理が分岐します。

  • もし、score がBORDERLINE 以上ならば、
    • [Next Lesson]ボタンを表示
    • 中級ページのworkableを、true に設定
  • score がBORDERLINE より下ならば、
    • [Next Lesson]ボタンを非表示
    • 中級ページのworkableを、false に設定

 

オンロード

オンロード後、まず、Web Storage が使用可能かどうかを調べます。

その後、以下の処理を順次、実行します。

  1. Web Storage から、lessonArray を読出し
  2. output要素に、score を表示
  3. judgeVisibiliry() 関数を動作

 

 

中級ページ

2頁ある学習ページの中級ページです。

  • プログラム名： B.html

 

B.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8">
        <title>Webstorage based Learning System</title>
        <script type="text/javascript" src="utilWS.js"></script>
        <script>
            const BORDERLINE = 60;                                 // pass: {score >= 60}		
            const LESSON_NO = 1;                                   // Lesson B
            var output_element;                                    // <output>
            var input_element;                                     // <input>

            function pseudoLesson() {
                var score = Math.floor(Math.random()*101);
                output_element.innerHTML = "Local Storage: use now"+"<br>"+score;
                readWebStorageData();                              // Array <- Web Storage
                lessonArray[LESSON_NO].score = score;              //
                writeWebStorageData();                             // Array -> Web Storage
            }
			
            function judgeVisibility() {
                if (lessonArray[LESSON_NO].workable == true) {
                    input_element.style.visibility = "visible";
                } else {
                    input_element.style.visibility = "hidden";
                }
            }

            window.onload = function() {
                output_element = document.getElementsByTagName("output")[0];
                input_element = document.getElementsByTagName("input" )[0];   // button:[Lesson B!]
                if (!localStorage) {
                    output_element.innerHTML = "Local Storage can't use."
                    return;
                }
                readWebStorageData();                               // Array <- Web Storage
                output_element.innerHTML = "Local Storage: use now"+"<br>"+
                                            lessonArray[LESSON_NO].score;
                judgeVisibility();
            }
        </script>
    </head>
    <body>
        <input type="button" value="Lesson B!" onclick="pseudoLesson()">
        <input type="button" value="Before Lesson" onclick="location.href='A.html'"><br>
        <output></output>
    </body>
</html>

 

 

B.html の説明

<body>要素

入力要素（<input>）が2個、出力要素（<output>）が1個です。

  • input0： 「Lesson B!」ボタン
    • クリックすると、pseudoLesson() が動く
  • input1： 「Before Lesson」ボタン
    • クリックすると、A.html に遷移する
  • output0： 表示領域
    • エラーメッセージと得点を表示する

 

グローバル変数

  • BORDERLINE： 合格点、定数60点
  • LESSON_NO： 定数1 、レッスンB、中級

 

 

pseudoLesson() 関数

この関数で、レッスンを「疑似的に学習」しています。

以下の順に処理します。

  1. 得点（score）は、0点から100点までの値を乱数計算
  2. output要素に、score を表示
  3. Web StorageからlessonArrayにデータ読込
  4. lessonArray に score を保存
  5. lessonArray をWeb Storage に保存

 

 

judgeVisibility() 関数

この関数は、[Lesson B!]ボタンの表示/非表示を判断します。

Lesson B の workable の値により、処理が分岐します。

  • もし、workable が true ならば、
    • [Lesson B!]ボタンを表示
  • workable が false ならば、
    • [Lesson B!]ボタンを非表示

 

オンロード

オンロード後、まず、Web Storage が使用可能かどうかを調べます。

その後、以下の処理を順次、実行します。

  1. Web Storage から、lessonArray を読出し
  2. output要素に、score を表示
  3. judgeVisibiliry() 関数を動作

 

こちらもおすすめ

AdMob

UnityでAdMobを設定するときのエラーと解決法：Android

管理者

Meta Quest 3にGoogleドライブ経由でAPKファイルをインストールする

管理者

写真の位置情報の有無を確認するプログラム

管理者

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です