Web Storage とJSON の試作プログラム
Web Storage と JSONを用いた、Webアプリの試作プログラムを作りました。
「学習システム」を念頭に置いた試作プログラム（プロトタイプ）です。
本記事は、記事「Web Storage の試作プログラム」の続き記事になります。
今回の試作プログラムは前回と比べて、データ構造が複雑になっています。
そのため、「学習システム」としてできること（機能）が増えました。
- 今回の試作プログラム： データ構造が複雑、 機能が多い
- 前回の試作プログラム： データ構造が簡単、 機能が少ない
試作プログラムの仕様
仕様
- 学習画面が「初級」と「中級」の2画面ある。
- 「初級」修了者のみ「中級」に進める。
- 学習記録が残る。
- 学習記録は消去できる。
動きの確認
- [Lesson Start]ボタンをクリック
レッスンA ページに移動 - [Lesson A!]ボタンをクリック
レッスンA の得点表示
60点以上だと、[Next Lesson]ボタンが表示 - [Next Lesson]ボタンをクリック
レッスンB ページに移動 - [Lesson B!]ボタンをクリック
レッスンB の得点表示 - ブラウザを閉じる
試作プログラムの終了 - [Lesson Start]ボタンをクリック
試作プログラムの再起動
Lesson A の得点が残っていることを確認 - [Next Lesson]ボタンをクリック
Lesson B の得点が残っていることを確認 - [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() 関数
この関数で、レッスンを「疑似的に学習」しています。
以下の順に処理します。
- 得点（score）は、0点から100点までの値を乱数計算
- output要素に、score を表示
- Web StorageからlessonArrayにデータ読込
- lessonArray に score を保存
- judgeVisibiliry() 関数を動作
- lessonArray をWeb Storage に保存
judgeVisibility() 関数
この関数は、[Next Lesson]ボタンの表示/非表示を判断します。
score の値により、処理が分岐します。
- もし、score がBORDERLINE 以上ならば、
- [Next Lesson]ボタンを表示
- 中級ページのworkableを、true に設定
- score がBORDERLINE より下ならば、
- [Next Lesson]ボタンを非表示
- 中級ページのworkableを、false に設定
オンロード
オンロード後、まず、Web Storage が使用可能かどうかを調べます。
その後、以下の処理を順次、実行します。
- Web Storage から、lessonArray を読出し
- output要素に、score を表示
- 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() 関数
この関数で、レッスンを「疑似的に学習」しています。
以下の順に処理します。
- 得点（score）は、0点から100点までの値を乱数計算
- output要素に、score を表示
- Web StorageからlessonArrayにデータ読込
- lessonArray に score を保存
- lessonArray をWeb Storage に保存
judgeVisibility() 関数
この関数は、[Lesson B!]ボタンの表示/非表示を判断します。
Lesson B の workable の値により、処理が分岐します。
- もし、workable が true ならば、
- [Lesson B!]ボタンを表示
- workable が false ならば、
- [Lesson B!]ボタンを非表示
オンロード
オンロード後、まず、Web Storage が使用可能かどうかを調べます。
その後、以下の処理を順次、実行します。
- Web Storage から、lessonArray を読出し
- output要素に、score を表示
- judgeVisibiliry() 関数を動作
