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

管理者 2017-01-102018-10-06 0 Comments JavaScript、プログラム

Contents

1 試作プログラムの仕様
2 データ構造
3 試作プログラム
- 3.1 共有:

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() 関数を動作

試作プログラムの仕様

仕様

動きの確認

データ構造

Web Storageへの保存

各レッスンのデータ構造

試作プログラム

ユーティリティ

初級ページ

中級ページ

共有:

こちらもおすすめ

dokoQL でSQL を学習する方法

Text2MindMap の線上に文字を書く方法

水準器アプリの試作1

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル