スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
--/--/--(--)
スポンサー広告

6-2.Monaca開発(データを保存する機能)

2作目にリリースしたアプリ「トイトレくまちゃん」には
「ごほうびシール」という機能があって、こんな実行イメージです。
s04.jpg

「シールをはる」ボタンを押すと、くまのシールが増えていく機能です。
実際のトイレトレーニングにはよくごほうびシールが使われます。
トイレにシートをはっておいて、トイレでおしっこができたら
子供にシールを貼らせます。
またシールを貼りたくて、それが動機になってトイレに行くようになる、というもの。
それをアプリ化したのです。

実際のシールを貼る行為にはまけるけど、まぁ励みになるかなと。
外出先のトイレとか祖父母の家のトイレとかでおしっこできたときも
シールを貼る真似事ができるためです。

で、これ、1回シールを貼ったら、次にアプリを起動するときまで、「今何個シールついてる」
という情報を記憶しておきたいですよね。
localStorageという機能を使って記憶する機能を作りました。

参考にしたのはMonacaドキュメントのTO DOアプリサンプルソース解説のページです。

これによると、
「localStorage(ローカルストレージ)というデータ保存のための端末内のデータベース」
と書いてあります。

あと、新しいプロジェクト→メモ帳アプリ というのを作成すると、
メモ帳アプリの全ソースが見れるのでこちらも参考にしました。

以下が私が今回書いたソースです。
ちょっとインデントがされてなくて見にくいのですが
(ブログに貼ったためです)こんな感じになりました。

data.js
--------------------------------
function getGohoubi() {
if(localStorage.getItem("gohoubi")==null){
return 0;
}
else
{
return localStorage.getItem("gohoubi");
}
}

function saveGohoubi(gohoubi) {
try {
localStorage.setItem("gohoubi", gohoubi);
} catch (e) {
alert('Error saving to storage.');
throw e;
}
}

function delGohoubi() {
window.localStorage.clear();
}

function addData() {
var data = getGohoubi();
data= Number(data) + 1;
saveGohoubi(data);
}

//データ削除
function delAllData(){
if(window.confirm('初回インストール時の状態に戻ります。\nよろしいですか?')){
if(window.confirm('本当に削除しますか?')){
delGohoubi();
alert('削除しました');
location.replace("index.html");
}
}
else{
}
}
----------------------------------------

"gohoubi"というIDで保存しておくと、
次にアプリを起動したときにもまたその値を取得できます。

なので「ごほうびシール」のページをひらいたときに
getGohoubiファンクションを呼び出して
シールの個数を取得して、シールの画像を設定します。

「シールをはる」ボタンを押されたらaddDataボタンを押すと、
シールの個数がプラス1され、それを保存します。

「シールをぜんぶけす」ボタンを押されたらdelAllDataファンクションを呼び出して
localStorageを初期化しています。


「初心者が開発」がコンセプトのこのサイトで
こんなソース自分じゃ書けない!と思うかもしれませんが、
Monacaサンプルソース「TO DOアプリ」「メモ帳アプリ」を
ほとんどそのまま流用して作っています。
比較してみてください。
たぶん「これなら私でも書けそう!」と思うことでしょう。
スポンサーサイト

-----------------------------------

-----------------------------------
応援はこちらのクリックをお願いします。
にほんブログ村 IT技術ブログ iPhoneアプリ開発へ
にほんブログ村
にほんブログ村 IT技術ブログ Androidアプリ開発へ
にほんブログ村
















管理者にだけ表示を許可する


| ホーム |
Page Top↑
▲ Page Top
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。