値を保存する方法（Local Storage）：Cocos2d-x v3.9（JavaScript）

　ユーザー設定値等、アプリを終了しても保持したい値を保存する方法です。
　Cocos2d-xのC++版の『CCUserDefault』の代替となるものを探していたのですが、JavaScript版では『cc.sys.localStorage』を使用するようです。

目次

使用環境

• OS：Mac OS X El Capitan Version 10.11.3
• Cocos2d-x Version 3.9（Javascript）
• Cocos Studio 2 Version 2.3.3
• Cocos Code IDE Version Version 1.2.0
• Xcode Version 7.2.1
• ブラウザ：Google Chrome Version 49.0.2623.87 (64-bit)

作成する内容

実装内容

• アプリ起動時に起動時間を保存し、次回起動時に『前回の起動時間』として表示
• チェックボックスの値を変更時に保存し、次回起動時に値を読み込む
• スライダーの値を変更時に保存し、次回起動時に値を読み込む
• 『全て削除ボタン』により保存した値を全て消去する

作成するプログラムのデモ

　下記のリンクから動作を確認できます。

• http://githubmorley.github.io/cocosprojects-pages/hellococos09/

　デモは、『Cocos Studio 2』で『HTML5』パッケージを作成して『GitHub Page』にアップしたものです。
　 アップする方法は、下記の記事を参考にして下さい。

• HTML5パッケージの作成 - モーリーのメモ
• GitHub Pageで『HTML5パッケージ』を公開 - モーリーのメモ

作業手順（Cocos Studio 2）

1.Cocos Studio 2を起動

1. 『/Applications/Cocos/Cocos Studio 2』を起動

2.新規プロジェクトを作成

1. アプリケーションメニューの『File』-『New Project...』をクリック
   
2. 開いたウィンドウで『All』の『Cocos Project』を選択し、『Next』をクリック
   
3. 次のように設定を行った後、『Finished』をクリック
   • 『Project Name（プロジェクト名）』：HelloCocos_LocalStorage（任意の名前）
   • 『Project Path（プロジェクトの保存先）』：（任意のフォルダ）
   • 『Orientation（画面の向き）』：『縦向きの画面のアイコン』を選択
   • 『Engine Version（Cocos2d-xのバージョン）』：『cocos2d-x-3.9』を選択
   • 『Project Language（使用するプログラミング言語）』：『JavaScript』を選択
     

3.前回起動時間表示用のLabelを配置

1. 画面左上の『Objects』ウインドウの『Widgets』の『Label』を『Canvas』にドラッグ＆ドロップ
2. 『Properties』ウインドウで『Label』のプロパティを下記のように変更
   ＊書いていないパラメータは変更していません。
   

   グループ	プロパティ名	値
   -	Name	LabelTime
   Position & Size	Position	X 320、Y 840
   Feature	Text	前回の起動時間：00:00:00
   	H-Alien	Center
   	Font Style	#000000、36

3.CheckBoxを配置

1. 画面左上の『Objects』ウインドウの『Widgets』の『CheckBox』を『Canvas』にドラッグ＆ドロップ
2. 『Properties』ウインドウで『CheckBox』のプロパティを下記のように変更
   ＊書いていないパラメータは変更していません。
   

   グループ	プロパティ名	値
   -	Name	CheckBox
   Position & Size	Position	X 320、Y 760

4.Sliderを配置

1. 画面左上の『Objects』ウインドウの『Widgets』の『Slider』を『Canvas』にドラッグ＆ドロップ
2. 『Properties』ウインドウで『Slider』のプロパティを下記のように変更
   ＊書いていないパラメータは変更していません。
   

   グループ	プロパティ名	値
   -	Name	Slider
   Position & Size	Position	X 320、Y 680
   	Size	X 180、Y 60

5.データ全削除用のButtonを配置

1. 画面左上の『Objects』ウインドウの『Widgets』の『Button』を『Canvas』にドラッグ＆ドロップ
2. 『Properties』ウインドウで『Button』のプロパティを下記のように変更
   ＊書いていないパラメータは変更していません。
   

   グループ	プロパティ名	値
   -	Name	ButtonClear
   Position & Size	Position	X 320、Y 580
   Feature	Text	全削除
   	Font Style	##414146、24

6.保存

これまでの作業を保存します。

1. アプリケーションメニューの『File』-『Save All』をクリック

7.プロジェクトのパブリッシュ

1. アプリケーションメニューの『Project』-『Publish and Package...』をクリック
2. 開いたウインドウで下記のように設定し、『OK』をクリック
   • 『Publish』の『Publish Type』の『Publish to Code IDE』を選択
     

『Cocos Code IDE』が起動し、プロジェクトが読み込まれます。

作業手順（Cocos Code IDE）

2.『app.js』の編集

1. 『Cocos Code IDE』の画面左の『Explorer』で、『srcフォルダ』にある『app.js』をダブルクリックして開く
2. 『app.js』の『HelloWorldLayer』を下記のように編集します。

var HelloWorldLayer = cc.Layer.extend({ // cc.Layerを継承
	ctor:function () { // コンストラクタ
		this._super();  // 親クラスのメソッドを継承
		var mainscene = ccs.load(res.MainScene_json); // MainSceneのJSONファイルを読み込む
		this.addChild(mainscene.node);  // レイヤーに追加

		var labelTime = mainscene.node.getChildByName("LabelTime"); // LabelTimeを取得
		var checkBox = ccui.helper.seekWidgetByName(mainscene.node, "CheckBox"); // CheckBoxを取得
		var slider = ccui.helper.seekWidgetByName(mainscene.node, "Slider"); // Sliderを取得
		var buttonClear = mainscene.node.getChildByName("ButtonClear"); // ButtonClearを取得
		
		// 前回の起動時間の取得
		var date = cc.sys.localStorage.getItem("TIME"); // 前回の起動時間を取得
		if (date != null) { // 値が存在する場合
			labelTime.setString("前回の起動時間：" + date); // ラベルに表示
		} else { // 値がない場合
			labelTime.setString("前回の起動時間：初回起動"); // ラベルに表示
		}
		cc.sys.localStorage.setItem("TIME", (new Date()).toLocaleTimeString()); // 今回の起動時間を保存

		// CheckBox
		var check = cc.sys.localStorage.getItem("CHECK"); // 保存された値を取得
		if (check != null) { // 値が存在する場合
			checkBox.setSelected(check); // CheckBoxの値を設定
		} else { // 値がない場合
			checkBox.setSelected(false); // CheckBoxの値をfalseに設定
		}
		checkBox.addEventListener(function(sender, type){ // CheckBoxがイベントを受け取れるようにする
			switch (type) {
			case ccui.CheckBox.EVENT_SELECTED: // チェック状態になった場合
			case ccui.CheckBox.EVENT_UNSELECTED: // 非チェック状態になった場合
				cc.sys.localStorage.setItem("CHECK", String(checkBox.isSelected())); // CheckBox値を保存
				break;
			}
		}, this);

		// Slider
		var perSlider = cc.sys.localStorage.getItem("Slider"); // 保存された値を取得
		if (perSlider != null){
			slider.setPercent(perSlider); // Sliderの値を設定
		} else { // 値がない場合
			slider.setPercent(50); // 50に設定
		}
		slider.addEventListener(function(sender, type){ // Sliderがイベントを受け取れるようにする
			switch (type) {
			case ccui.Slider.EVENT_PERCENT_CHANGED: // Sliderの値が変更された場合
				cc.sys.localStorage.setItem("Slider", slider.getPercent()); // Sliderの値を保存
				break;
			}
		});

		// 全削除ボタン
		buttonClear.addTouchEventListener(function(sender, type){ // ボタンイベントを設定
			switch (type) {
			case ccui.Widget.TOUCH_ENDED: // ボタンを離した時
				//cc.sys.localStorage.removeItem("TIME"); // 前回の起動時間を削除
				cc.sys.localStorage.clear(); // 保存された値を全て削除
				labelTime.setString("前回の起動時間：初回起動"); // ラベルに表示
				checkBox.setSelected(false); // CheckBoxの値をfalseに設定
				slider.setPercent(50); // 50に設定
				break;
			}
		}, this);

		return true;
	}
});

　
以上で、作成作業は完了です。
実行して動作を確認してください。

使用した関数

『cc.sys.localStorage.setItem("キー", 値)』

機能	キーとして設定した文字列に関連付けて、値を保存します。
引数1	キー：文字列、任意の文字列を設定できます。
引数2	値：保存する値

『cc.sys.localStorage.getItem("キー")』

機能	キーに関連付けられた値を取得します。
引数	キー：文字列、保存時に設定した文字列を指定します。

『cc.sys.localStorage.removeItem("キー")』

機能	キーに関連付けられた値を削除します。
引数	キー：文字列、保存時に設定した文字列を指定します。

『cc.sys.localStorage.clear()』

機能	全ての値を削除します。

あとがき

　Mac上のシミュレータだけでなく、ブラウザ上、iOSシミュレータ上でも正しく動作しました。