講義用の資料です。 LocalStorageを利用したメモ帳アプリの解説です。 JSONの活用方法も説明しています。

1. LocalStorageによる
データ保存
メモ帳アプリを作ってみよう

2. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 2
localStorage

3. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 3
localStorageとは
• HTML5の関連技術として、新しい規格として標準化
• アプリ（ブラウザ）を終了しても、５MBまでのデータを
保存することができるため、オフラインでも利用可能
• 現状は文字列のみ、保存・読み込みが可能
– 配列などのオブジェクトは保存できない
• Internet Explorer 8、Mozilla Firefox、Google Chrome、
Safari、Operaなど全ての主要ブラウザの最新版で実装済
み

4. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 4
記述方法
• localStorageの値の設定（保存）
– localStorage . キー = 値
– localStorage['キー'] = 値
– localStorage.setItem('キー', 値)
• localStorageの値の取得
– localStorage.キー
– localStorage['キー']
– localStorage.getItem('キー')
• localStorageの値の削除
– delete localStorage.キー
– delete localStorage['キー']
– localStorage.removeItem('キー')

5. • localStorageの値の設定（保存）
– localStorage . キー = 値
– localStorage['キー'] = 値
– localStorage.setItem('キー', 値)
• localStorageの値の取得
– localStorage.キー
– localStorage['キー']
– localStorage.getItem('キー')
• localStorageの値の削除
– delete localStorage.キー
– delete localStorage['キー']
– localStorage.removeItem('キー')
記述方法
簡単に入力できる
記述を利用

6. 記述方法
• localStorageの値の設定（保存）
– localStorage . キー = 値
• localStorageの値の取得
– localStorage.キー
• localStorageの値の削除
– delete localStorage.キー
「キー」は、変数名のルールで任意に指定できます。
「localStrage.キー」という変数だと考えると
変数と同じように利用できます

7. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 7
とりあえず、簡単に
保存・取得・削除

8. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 8
一人つぶやきアプリ作成

9. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 9

10. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 10
アプリ開発演習に向けて
複数ページコンテンツを
作成してみよう

11. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 11
一人つぶやきアプリ基本仕様
• つぶやき閲覧ページ
– 過去のつぶやきを表示
– つぶやき登録画面へ移動
– つぶやき消去
• つぶやき登録ページ
– 入力用inputタグ
– 登録ボタン

12. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 12
つぶやき登録画面作成
• 登録日時と文字を保存したい
• 複数のつぶやきを保存したい
– 配列などが利用できないので、複数の情報を
保存するのが難しい

13. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 13
つぶやき登録画面作成
• 登録日時と文字を保存したい
• 複数のつぶやきを保存したい
– 配列などが利用できないので、複数の情報を
保存するのが難しい
そんなときは・・

14. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 14
JSON

15. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 15
JSONとは
• JavaScript Object Notation
– javaScriptから文字データを構造的に扱うために考え
られたデータ形式
– ダブルクォートで値などを囲む
– コロン区切りのペアを、カンマ区切りで記載
{ “date” : “1月1日”, “text” : “あけおめ”}
{ “変数” : “値”, “変数” : “値”}

16. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 16
JSONをStorageで活用
• localStorageは文字しか保存できない
でも、JavaScriptでは配列を活用したい

17. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 17
JSONをStorageで活用
• localStorageへのデータ書き込み
– 配列をJSONデータ（文字）に変換
• localStorageからデータ取得
– JSONデータ（文字）を配列に変換
– 配列に変換後、配列名.変数 としてデータ加工
JSON.stringify(配列)
JSON.parse(jsonデータ)

18. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 18
配列の使い方

19. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 19
配列はいろいろ出来る
• 配列の先頭に挿入
– 配列.unshift(データ)
• 配列の後に追加
– 配列.push(データ)
詳しくはMSDNリファレンス

20. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 20
警告メッセージと
確認ダイアログ

21. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 21
ダイアログ表示
• 警告メッセージ
alert(‘メッセージ');
• 確認ダイアログ
var r = confirm(‘メッセージ');
if(r){
//OK
}else{
//キャンセル
}

22. Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights 22
HTML要素の
生成と追加

23. Copyright Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 23
タグの生成方法
• タグの生成
オブジェクト名 ＝ document.createElement(“タグ名”);
• 属性の追加
オブジェクト名.属性名 ＝ 値;
• タグ内への文章追加
オブジェクト名. innerHTML ＝ 値;
• タグへのCSS指定
オブジェクト名. style.プロパティ ＝ 値;

24. Copyright Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 24
タグの追加方法
• ID指定でのタグの追加
document.getElementById(“id名”).appendChild(オブジェクト名);
• タグ指定でのタグ追加
var 親オブジェクト名 ＝
document.getElementByTagName (“親タグ名”);
親オブジェクト名[何番目].appendChild (オブジェクト名);