HTML5 Local Storageを利用したメモ帳アプリ
1 like1,463 views
講義用の資料です。 LocalStorageを利用したメモ帳アプリの解説です。 JSONの活用方法も説明しています。
![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('キー')](https://image.slidesharecdn.com/appslocalstorage01-151128023511-lva1-app6892/85/HTML5-Local-Storage-4-320.jpg)
![• localStorageの値の設定（保存）
– localStorage . キー = 値
– localStorage['キー'] = 値
– localStorage.setItem('キー', 値)
• localStorageの値の取得
– localStorage.キー
– localStorage['キー']
– localStorage.getItem('キー')
• localStorageの値の削除
– delete localStorage.キー
– delete localStorage['キー']
– localStorage.removeItem('キー')
記述方法
簡単に入力できる
記述を利用](https://image.slidesharecdn.com/appslocalstorage01-151128023511-lva1-app6892/85/HTML5-Local-Storage-5-320.jpg)
![Copyright Ⓒ 2015 Yoshihiro Takahashi All Rights Reserved. 24
タグの追加方法
• ID指定でのタグの追加
document.getElementById(“id名”).appendChild(オブジェクト名);
• タグ指定でのタグ追加
var 親オブジェクト名 ＝
document.getElementByTagName (“親タグ名”);
親オブジェクト名[何番目].appendChild (オブジェクト名);](https://image.slidesharecdn.com/appslocalstorage01-151128023511-lva1-app6892/85/HTML5-Local-Storage-24-320.jpg)
HTML5 Local Storageを利用したメモ帳アプリ
- 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 (オブジェクト名);