先週，第１４回目の講義で使用したスライドです。

1. ヒューマンインターフェース論
Vol.14
そが としおき
曽我 聡起
北海道文教大学 外国語学部・国際言語学科
13年7月28日日曜日

2. 5章 クライアントサイドのスト
レージ, p.73
データの保持：HTML5で登場。従来はcookieを使っていた。
localStorage
sessionStorage
クライアントサイドのデータベース
13年7月28日日曜日

3. 5章 クライアントサイドのスト
レージ
localStorage :
ウィンドウを閉じた後でもデータは保持されている。
他のウィンドウからアクセス可能。
sessionStorage :
他のウィンドウからアクセスできない。
ウィンドウを閉じるとデータは破棄される。
13年7月28日日曜日

4. 5章 クライアントサイドのスト
レージの例, p.74
localStorage.age = 40 // ageに値をセット
var age = localStorage.age; // 変数ageに値を取り出す。
delete localStorage.age; // ageの値を削除。
扱いが簡単
13年7月28日日曜日

5. 5.1.1 localStorageへの設定情報
の保存
準備 : 第4章のサンプル使用。
head要素内のJavaScript要素は取り除く（外部
JavaScript「kilo.js」に移行）。
kilo.jsをデータライブラリよりダウンロードして、
index.htmlと同一階層に置く。
head要素内にkilo.jsへのリンクを追記する。（p.75）
13年7月28日日曜日

6. 5.1.1 localStorageへの設定情報
の保存, p.75
関数内で、年齢などの値をローカルストレージに保存する。
jQTouchのgoback関数はパネルの消去を逆アニメーションで
行い、前のページに戻る。
関数がfalseを返すことで、ディフォルトのふるまいが実行す
るのを防いでいる。
13年7月28日日曜日

7. 5.1.1 設定終了後の措置, p.76
インターフェース
値を設定後、再度［設定］パネルに戻ると、フィール
ド内に何も表示されない。
loadSettings関数はsaveSettings関数の逆。localStorage
に保存されている値をjQueryのval関数を使って、フィ
ールドに値をセットする。
13年7月28日日曜日

8. 5.1.2 sessionStorageへの日時
の保存, p.77
［日付一覧］パネルで指定された項目と、今日の日付を
基に日時の計算を行う。
JavaScriptのDateオブジェクトを生成し、日付計算を行
い、計算結果をテキスト形式でsessionStorageにデータ
を格納する。
refreshEntries関数は、指定日付に基づき［その日の食
べ物］パネルを更新する（p.79, 図5-1,-2参照）。
13年7月28日日曜日

9. 5.2 クライアントサイドのデー
タベース, p.80
HTML5の強力な機能: クライアントサイドデータベース
リレーショナル形式のデータベースを永続的に保存可能。
データベースは一般的なSQLで定義可能。
13年7月28日日曜日

10. 5.2.1 データベースの作成, p.81
openDatabase関数を呼び出す設定: おまじない
shortName: データベースファイルを参照する際に使う。
version: データベースを変更する際に、変更内容の管理
などを実現する際に使う。
desplayName: iPhoneの設定で表示する名前。
maxSize: データベースの最大サイズ（kB）。
13年7月28日日曜日

11. 5.2.1 データベースの作成, p.81
transactionオブジェクトのexecuteSqlメソッドでSQL文を
実行する。
ここでは、データベースが無かった場合に、CREATE
TABLE文を実行している。
13年7月28日日曜日

12. SafariのWebインスペクタ, p.82
PC版SafariのWebインスペクタを表示すると、様々なデ
バック項目を利用できる。
13年7月28日日曜日

13. 5.2.2 行の挿入, p.82
createEntry関数: データを保存する関数
executeSqlを呼び出してSQL文（行の挿入, INSERT
INTO entries）を実行する。
13年7月28日日曜日

14. 5.2.2.1 エラー処理, p.85
ユーザーインターフェース:
エラーがあった場合に、ユーザーにメッセージを表示
する。
13年7月28日日曜日

15. 5.2.3 行の選択とリザルトセッ
トの扱い, p.87
refreshEntry関数:
指定された日付のデータをすべてデータベースから取
り出し、箇条書きとして［その日の食べ物］パネルに
表示する。
kilo.cssで表示を見やすくする。
13年7月28日日曜日

16. 5.2.4 行の削除, p.90
［削除］ボタンが生成される度に、イベントハンドラの
設定を行う。
deleteEntryById関数:
エントリをデータベースから削除する。
13年7月28日日曜日