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を用いて、以下のデータ構造としました。

 

 

Web Storageへの保存

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

 

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

(注)上記value は、配列(Array)です

 

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

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

 

 

各レッスンのデータ構造

 

 

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

 

試作プログラム

 

 

 

 

ユーティリティ

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

  • プログラム名: utilWS.js

 

utilWS.js

 

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

 

 

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

 

 

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

 

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。