Mac好きのアラフォーweb製作者ののんびりブログ

Mac好き、iPhone好きのアラフォーのWEB製作者がその日覚えたこと、気がついたことを備忘録的に淡々とつづるブログです。自分が忘れないために残したものが誰かのお役に立てれば…。

いまさらながらjsonっていうのを使ってみた。

ここ最近CMS的なシステムや、PHPなどのサーバ側でうまいこと生成してくれるような言語でWebサイトを作ることが多い中、サーバの制約上PHPなども使えないのに、同じ体裁の続く、似たような繰り返しが多いページをプレーンなHTMLでゴリゴリと書くのが、しんどくてしんどくて…、ということが仕事でありました。
まあ、楽天市場の出店店舗が使える、いわゆる「ゴールド」サーバーでのことなのですが…。

サーバサイドインクルードやPHPも動かないけど、なんとかできないか、楽天GOLDでやるならjavascriptかなと情報を探っていると、json形式からデータを引っ張ってきて、HTMLを成形、表示。ということが出来そうな雰囲気。

じゃあ、やってみよう!と言うことで、以下、自分用に覚え書きも兼ねて…。

まずは用意するファイル

  1. 呼び出されるデータの入ったjsonファイル。 ここでは「data.json」とします。
  2. json形式のデータをHTMLに成形するためのファイル。 ここでは「write.js」とします。
  3. 実際に表示させるためのファイル。 ここでは「view.html」としました。

data.jsonの中身はこんな感じ。

callback([
    { // 1位
        "name" : "りんご",
        "description" : "少し酸味もあってとてもおいしいりんご2個セットです。" ,
        "image" : "https://farm5.staticflickr.com/3123/2808636423_3bbd9b08c0_q.jpg" ,
        "url" : "http://hogehoge.com/apple"
    },
    { // 2位
        "name" : "バナナ",
        "description" : "ジューシーな甘みのある最高級グレードのバナナです。" ,
        "image" : "https://farm5.staticflickr.com/4144/5170245441_2f8df5ce28_q.jpg" ,
        "url" : "http://hogehoge.com/banana"
    },
    { // 3位
        "name" : "トマト",
        "description" : "適度な酸味が生のままでも加熱してもおいしいトマト。" ,
        "image" : "https://farm4.staticflickr.com/3414/4640025475_d4c0e8e831_q.jpg" ,
        "url" : "http://hogehoge.com/tomato"
    }
]);

そして、write.jsの中身はこんな感じです。

var callback = function(d) {
var snippet = '';
for (var i in d) {
    snippet += '<section class="items">';
    snippet += '<h1 class="rank' + [i] + '"><span>' + d[i].name + '</h1>'; // jsonファイルで「name」としたデータを「h1」の中に挿入
    snippet += '<img src="' + d[i].image + '" alt="" />'; // jsonファイルで「image」としたデータを「img要素」のsrcに挿入
    snippet += '<p><a href="' + d[i].url + '">' + d[i].description + '</a></p>'; // jsonファイルで「url」としたデータを「a要素」に、「description」としたデータをアンカーテキストに挿入
    snippet += '</section>';
    }
    document.write(snippet);
}

そして最後に、実際に表示させるhtmlファイルの中に以下のように仕込んでやります。

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="common.css" />
        <!-- ↓↓↓ まずここでjson形式のデータをHTMLに成形するためのファイル「write.js」を呼び出し ↓↓↓ -->
        <script type="text/javascript" src="write.js"></script>
        <title>実際に表示させるHTML文書です。</title>
    </head>
    <body>
        <div id="ranking">
            <!-- ↓↓↓ そして表示させてやりたいところで呼び出したいデータであるdata.jsonを呼び出し ↓↓↓ -->
            <script type="text/javascript" src="data.json"></script>
        </div>
    </body>
</html>

すると、実際にブラウザ上には

jsonを呼び出すことで生成できたhtmlページの結果

やった!無事表示された♪

もちろん、html文書をゴリゴリ書くのが嫌いじゃなかったらこんな方法取らなくてもいいですし、javascriptをオフにしている閲覧者には表示させることができないので、オールオッケーな方法ではないかもしれませんが、通販(に限らず)担当さんにhtmlの知識があまりなくて、基本的にコピペで作業するようにしてるものの意図せず閉じタグの<なんかを消してしまったりすることもあるので、htmlファイルをいじらせるのが不安だなぁとかっていう場合には、htmlよりはるかに簡単なルールに則ったデータを作成するだけなので更新作業の中で間違いが起こりにくい方法かもしれませんね。

通販サイトに限らず、データベースを使うほどの事もないけど、繰り返しの多いページなんかには使えそうかもです。

と実際にやってみて、ここでふと気付いた見慣れないfor文の書き方。

for( 〜 in … )

今までfor文のことを、「初期値を決めて」、「上限を設定して」、「インクリメントしながら」繰り返し処理する。というものだと思い込んでいましたが、

for..in文は特別な使い方をする文で、オブジェクトに含まれるプロパティを順に取り出す時に使用します。

とのこと。(参照:for..in文 - 繰り返し処理 - JavaScript入門

「オブジェクトに含まれるプロパティの数だけ繰り返し」を行うということで、件数が何件あるかはともかく、名前と値の組み合わせを全て取得するにはちょうどいい回し方ということのようですね。

ついつい一番初めに覚えた方法でデータを取り出すことが当たり前になってる感がありますが、データの取り出し方にはその時々に応じてふさわしいやり方があることを実感。 どんな言語に限らずこういう細かい使い分けをすることで、処理・表示の早さに関わってくるんですね。日々勉強です。

今回のjsonの使い方は、大阪のAndroid/iOS・Webアプリ開発会社ノーティス様のJSONでコンテンツを更新しようを参考にさせていただきました。