リストとデータソース (3/8)

データソースで利用されるデータは、基本的に「データの構造を保持したまま送れるテキストベースのもの」でなければいけません。これに合格するのは「XML」と「JSON」ぐらいでしょう。例えば、外部のRSSなどを利用するならXMLが使えると便利ですし、JavaScriptでのデータ利用を考えるとJSONが便利です。

ここでは、JavaScriptでデータを簡単に用意できる「JSON」を使ってみることにしましょう。JSON（JavaScript Object Notation）は、JavaScriptのオブジェクトをテキストとして扱えるようにするために考え出されたフォーマットです。JSON形式でテキストを用意することで、JavaScriptどうしで簡単に複雑なデータをやり取りすることができます。

では、実際にJSONのデータを作ってみましょう。プロジェクトの「mobile」フォルダの中に、「data.js」というスクリプトファイルを用意してください。そして、下に掲載したリストを記述しましょう。

JSONのデータは、見ればわかるように連想配列の形をしています。ここでは以下のような構造になっていることがわかります。

{ title: タイトル , items: [ データ1, データ2, ……] }

titleにはデータのタイトルを、そして実際に利用するデータはitemsに配列として用意します。そして、この配列に用意するデータも、更に連想配列の形になっています。ここでは、こんなデータが用意されていますね。

{ name: 名前 , subtitle: サブタイトル , content: データの内容 }

これは、「こういう形で書かないといけない」というものではありません。とりあえず今回はサンプルとしてこういうデータを用意してみた、というだけです。このように、連想配列の形で記述されていれば、どういう項目を用意してもかまいません。

ただし！　注意すべきは「すべてのデータは、同じ内容でないといけない」という点です。itemsの配列に用意するデータは、それぞれ同じ項目を持った連想配列でなければいけません。内容が違っていたりすると、正しくデータを利用できないので注意してください。

データの構造さえきちんとしていれば、値はどのようなものでもかまいません。ここで掲載したのはあくまで参考例ですから、それぞれで自分なりに表示させたいテキストを用意してみるとよいでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

{
	title: 'マイコンテンツ',
	items: [
		{
			name: "Windows",
			subtitle: "もっとも広く使われるOS",
		content: "Windowsは、パソコンの主流OSです。XP、Vista、7といったものがあります。"
		}, 
		{
			name: "Mac OS X",
			subtitle: "独自路線をゆくライバル",
		content: "Mac OS Xは、アップルのMacintoshに搭載されるOSです。使いやすさが高く評価されています。"
		},
		{
			name: "Linux",
			subtitle: "オープンソースの世界",
			content: "無償で提供するオープンソースOSです。AndroidやChrome OSでも使われています。"
		}
	]
}