JSONファイルの読み込み：Cocos2d-x v3.9（JavaScript）

JSON形式のデータファイルを読み込んで、データを使用する方法です。
読み込んだデータが連想配列に変換されるので、簡単に利用できます。

目次

使用環境

私が使用している環境です。

• 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)

作成する内容

実装内容

• JSONファイルから月ごとの時候の挨拶を読み込む
• ListViewに読み込んだ月を表示
• ListViewで選択された月の時候の挨拶をLabelに表示

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

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

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

　デモは、『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_JSON（任意の名前）
   • 『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	Label
   Position & Size	Position	X 320、Y 840
   	Sizs	X 500、Y 30
   Feature	Custom Size	チェックを入れる
   	Text	時候の挨拶
   	V-Alien	Middle Align
   	Font Style	#000000、22

3.ListViewを配置

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

   グループ	プロパティ名	値
   -	Name	ListView
   Position & Size	Anchor Point	X 0.5、Y 0.5
   	Position	X 320、Y 480
   	Size	X 400、Y 500
   Feature	Clipping	チェックを入れる

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）

1.JSONデータを作成

JSONデータは、下記のサイトでCSVデータを変換して作成しました。

• http://utils.ipentec.com/JsonConvert/CsvToJSon.aspx
• CSVデータ

month,word
1月,新春を寿ぎ（ことほぎ）
2月,余寒厳しき折柄（おりから）
3月,春寒料峭（しゅんかんりょうしょう）のみぎり
4月,うららかな好季節を迎え
5月,青葉若葉の好季節
6月,若葉青葉の候（こう）
7月,三伏大暑の候（さんぷくたいしょのこう）
8月,残暑厳しき折
9月,新秋快適の候（こう）
10月,秋涼爽快の候（こう）
11月,秋気いよいよ深く
12月,寒気厳しき折から

• JSONデータ

[
{ "month": "1月",  "word": "新春を寿ぎ（ことほぎ）"}, 
{ "month": "2月",  "word": "余寒厳しき折柄（おりから）"}, 
{ "month": "3月",  "word": "春寒料峭（しゅんかんりょうしょう）のみぎり"}, 
{ "month": "4月",  "word": "うららかな好季節を迎え"}, 
{ "month": "5月",  "word": "青葉若葉の好季節"}, 
{ "month": "6月",  "word": "若葉青葉の候（こう）"}, 
{ "month": "7月",  "word": "三伏大暑の候（さんぷくたいしょのこう）"}, 
{ "month": "8月",  "word": "残暑厳しき折"}, 
{ "month": "9月",  "word": "新秋快適の候（こう）"}, 
{ "month": "10月",  "word": "秋涼爽快の候（こう）"}, 
{ "month": "11月",  "word": "秋気いよいよ深く"}, 
{ "month": "12月",  "word": "寒気厳しき折から"}
]

2.JSONファイルの作成

1. 『Cocos Code IDE』の画面左の『Explorer』で『res』フォルダを右クリックし、『New』-『ファイル』をクリック
2. 開いたウインドウで、『ファイル名』に『Data.json』を入力し、『終了』ボタンをクリック
3. 『res』フォルダに追加された『Data.json』をダブルクリックして開く
4. 上記のJSONデータを『Data.json』に貼り付ける

3.『resource.js』にリソースファイルを登録

1. 『Cocos Code IDE』の『Explorer』で、『src』フォルダにある『resource.js』をダブルクリックして開く
2. 『resource.js』に、下記のようにリソースファイルを登録

var res = {
    HelloWorld_png : "res/HelloWorld.png",
    MainScene_json : "res/MainScene.json",
    Data_json : "res/Data.json" // 時候の挨拶のJSONファイル
};

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 labelWord = mainscene.node.getChildByName("Label"); // Labelを取得
		var listView = mainscene.node.getChildByName("ListView"); // ListViewを取得
		listView.setBounceEnabled(true); // スクロールの端で跳ね返るように設定
		listView.setItemsMargin(20); // リストの項目の間隔を設定
		
        cc.loader.loadJson(res.Data_json, function(err, data){ // JSONファイルからデータを読み込む
        	if (!err) { // エラーがない場合
        		var label = new ccui.Text(); // ラベルを作成
        		label.setFontSize(28); // フォントサイズを設定
        		//label.setTextColor(cc.color(0, 0, 0, 255)); // フォントの色を黒に設定
        		label.setTouchEnabled(true); // リストで選択可能にする
        		listView.setItemModel(label); // ラベルをリストの項目用のオブジェクトとして設定
        		for (var int = 0; int < data.length; int++) { // データの数だけループ
        			listView.insertDefaultItem(int); // int番目（0始まり）にデフォルトの項目を挿入
        			listView.getItem(int).setString(data[int].month); // 挿入したラベルにデータを表示
        		}
        		listView.addEventListener(function(list, type){ // ListViewのイベントを設定
        			switch (type) {
        			case ccui.ListView.ON_SELECTED_ITEM_START: // アイテムにタッチ開始時;
        				break;
        			case ccui.ListView.ON_SELECTED_ITEM_END: // アイテム選択時（タッチ後スクロールせずに手を離した場合）
        				labelWord.setString(data[list.getCurSelectedIndex()].word); // 選択した月のワードを表示
        				break;
        			}
        		}, this);
        	}
        });
        return true;
    }
});

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

使用した関数

ListViewのメソッド

『ListView.setBounceEnabled(バウンス機能の有無)』

機能	キーとして設定した文字列に関連付けて、値を保存します。
引数	バウンス機能の有無：boolean値（true：有り、false：無し）

『ListView.setItemsMargin(項目の間隔)』

機能	リストの項目の間隔を設定します。
引数	項目の間隔：Number値

『ListView.setItemModel(項目にするオブジェクト)』

機能	リストの項目用のデフォルトのオブジェクトを設定します。
引数	項目にするオブジェクト：Widgetクラスをオブジェクト

『ListView.insertDefaultItem(リストのインデックス)』

機能	インデックスの場所にsetItemModelでしたオブジェクトのクローンを挿入します。
引数	リストのインデックス：Number値

あとがき

　前回は、ListViewの設定を『Cocos Studio 2』で行ったので、今回はできるだけコード上で行おうと思ったのですが、リストからはみ出した項目を表示しない設定が上手く動きませんでした。