マルチデバイス対応を考える上で問題の１つとなる「コンテンツの管理方法」についての考え方は多種多様ですが、小規模サイトや予算が少ない場合、作業時間は少なく、サーバサイドの開発は0で効率よくコンテンツを管理したいですよね。
そんな時は、「JSON形式のファイルで管理」してみてはどうでしょうか？
店舗情報を１つのJSONファイルで管理し、JavaScriptを使ってPCとスマートフォン別々のHTMLに店舗情報を表示ことも可能です。
今回は店舗情報をJSONファイルに保存してHTMLに一覧表示するまでの流れを紹介します。
JSON形式のファイルって何？
そもそもJSON形式のファイルとはどのような構造になっているのでしょうか？
簡単に言ってしまえば軽量データ交換フォーマットで、ファイルの中は配列、オブジェクトになっています。
またJSON形式のファイルはJavaScript以外にもCやC++、Java、Perlなどのサーバサイドの言語でも取り扱うことが出来るので、色々と使い勝手が良いファイルでもあります。
って、すごくイメージしにくいですよね。。。
具体的な記述方法を見たほうが分かりやすいと思うので基本的な形と使い方を紹介します。
配列の参考サイト
JSONの基本的な使い方
それでは、実際に店舗情報をJSON形式のファイルでどのように管理するか紹介します。
JSON基本的な構造はいたってシンプルで {名前:値} と書くだけです。
{"name": "○○渋谷店"}
情報を追加する場合は , でつなげます。
{"name": "○○渋谷店" , "address": "東京都渋谷区"}
そして実際に使うときには、このJSON形式のデータを変数に入れます。
var shopList = {"name": "○○渋谷店" , "address": "東京都渋谷区"}
あとは変数に代入した情報を取り出せば完了です。
JSONファイルと、JSONファイルを呼び出すためのHTMLは下記のようになります。
呼び出し方法は 変数名.名前 です。
※JSONファイルはshoplist.json.jsと保存しています。
shoplist.json.jsの中
var shopList = {"name": "○○渋谷店" , "address": "東京都渋谷区"}
shoplist.htmlの中
<!DOCTYPE html><html lang="ja"> <head> <meta charset="utf-8"> <title>JSONテスト</title> <script src="shoplist.json.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> document.write(shopList.address); </script> </body> </html>
複数の店舗情報を管理する
もうお気づきかもしれませんが、基本的な形だけでは１つの店舗データしか管理できません。
shopListというぐらいですから複数の店舗を管理したいですよね。
その場合、JSON形式のファイルを下記のように記述します。
※見やすくするため改行などを入れました。
var shopList =
[
{
"name": "○○渋谷店",
"address": "東京都渋谷区"
},
{
"name": "○○目黒店",
"address": "東京都目黒区"
}
]
変更箇所は先ほどと同じ形式のデータを , で繋げて、その外側を [] で囲むようにしました。
またデータの取り出しかたも下記のように変わります。
document.write(shopList[1].address);
何番目のaddress情報を取り出すのか指定する必要があるため [1] と指定しています。
これで目黒店の住所情報を取り出せるようになりました。
※配列なので0からスタートします。
店舗一覧として表示する
それでは最後に、店舗の一覧として表示してみます。
今回はjQueryは使わずに記述してみます。
JSONファイルの中身
var shopList =
[
{
"name": "○○渋谷店",
"address": "東京都渋谷区"
},
{
"name": "○○目黒店",
"address": "東京都目黒区"
},
{
"name": "○○練馬店",
"address": "東京都練馬区"
},
{
"name": "○○江東店",
"address": "東京都江東区"
},
{
"name": "○○千代田店",
"address": "東京都千代田区"
}
]
HTMLファイルの中身
<!DOCTYPE html><html lang="ja">
<head>
<meta charset="utf-8">
<title>JSONテスト3</title>
<script src="shoplist.json.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
document.write('<h1>店舗一覧</h1>');
for (var i = 0; i < shopList.length; i++){
document.write('<ul>');
document.write('<li>');
document.write('支店名:' + shopList[i].name + '<br />');
document.write('住所:' + shopList[i].address);
document.write('</li>');
document.write('</ul>');
}
</script>
</body>
</html>
shopList.lengthで店舗情報が何件あるか取得できるので、店舗の数だけ処理を繰り返すようにしています。
またshopList[i]とすることで処理を繰り返す度に取得するデータがひとつずつ、ずれるようにしています。
これでJSON形式のファイルに店舗情報を記述してJavaScriptで一覧表示させることが出来るようになりました。
同じ記述をPC用HTMLとスマートフォン用HTMLに記述すると、コンテンツを一元管理したまま複数のHTMLに情報を公開することが出来ます。
次回は関東地区、関西地区などのように、店舗情報を地域分けしたJSON形式のファイルの作り方と出力方法を紹介します。
JSONの参考サイト
このシリーズの記事
- 簡単にコンテンツの一元管理が出来るJSON形式ファイル その1
- 簡単にコンテンツの一元管理が出来るJSON形式ファイル その2
facebookアカウントでコメント
Powered by Facebook Comments