JSON

JSON は “JavaScript Object Notation” の略称で、 今や息をするように当たり前のように使われているデータフォーマットです。

• サイズが少なくて済む
• 書式に馴染みがある（JavaScriptのオブジェクトリテラルほぼそのまま）
• データの型をそのまま活かせる

などの特徴を持ち、Webアプリケーションのデータのやり取りだけでなく、 node.js のパッケージ定義ファイル（package.json）や、 Sublime Text 2 等ソフトウェアの設定ファイル等、様々な場面で目にするようになりました。

生成・パース

JSON文字列の生成・展開は JSON オブジェクトの stringify / parse メソッドを通して行うことが出来ます。

var person = {
    name: "john",
    age: 15,
    active: true,
    tags: ["JavaScript", "CSS", "HTML"]
};

var json = JSON.stringify(person);
// '{"name":"john","age":15,"active":true,"tags":["JavaScript","CSS","HTML"]}'
var parsed = JSON.parse(json);
// { name: "john", ... }

JSON APIは古いブラウザ等では使えない場合もありますが、 その場合は json2.js などを利用する事で、 レガシーな環境でも JSON.parse/stringify を使用出来るようになります。 あるいは、パースするだけならば jQuery に $.parseJSON メソッドが用意されています。

$.parseJSON('{"name":"john","age":15,"active":true,"tags":["JavaScript","CSS","HTML"]}');

型 と toJSON メソッド

型を活かせるとは言っても全てがそうなのではなく、JSONで表現できる型は限られています。 JSONはあくまでJSONであって、JavaScriptではないという事ですね。

表現できる型は以下となります。

• 数値
• 文字列
• 真偽値
• 配列
• オブジェクト（連想配列）
• null

それ以外の型については、Date オブジェクトのように toJSON メソッドを持つ物であればその結果が代入されます。 （Date.toJSON は ISO文字列を返します） ただし、パース時に元のオブジェクトに変換してくれたりはしません。

var data = {
    date: new Date()
};
JSON.stringify(date); // {"date":"2013-11-11T03:46:11.583Z"}

つまり、toJSON メソッドを定義してさえ置けば、そのままJSONに渡せてしまうという事です。 backbone.js の Model や Collection には toJSON メソッドが実装されており、そのままスムーズにデータのやり取りをする事が出来ます。 自前のクラス等をつくる際には toJSON を生やしておくと色々捗りそうです。

JSONPath

全く違う話になりますが、XMLのデータの必要な情報にだけアクセスする XPath という物があります。 XML文書あるいはそのデータから “//chapter[@title=”第1章”]/paragraph” のような文字列表現で条件を指定することで、 条件に適合するデータを抽出するという物なのですが、 JSON にも同じ趣向のライブラリがあります。それが JSONPath です。

http://goessner.net/articles/JsonPath
JSONPath is a lightweight component that allows to find and extract relevant portions out of JSON structures on the client as well as on the server.

JavaScriptの実装は、90行程度に収まっています。 簡単な例で試してみましょう。

var data = {
    length: 3,
    items: [
        {
            name: "JavaScript 第6版",
            price: 4410,
            author: "David Flanagan"
        },
        {
            name: "JavaScript: The Good Parts",
            price: 1890,
            author: "Douglas Crockford"
        },
        {
            name: "JavaScriptパターン",
            price: 2940,
            author: "Stoyan Stefanov"
        }
    ]
};

// price が2000超の本の著者を抽出する
var authors = jsonPath(data, "$.items[?(@.price>2000)].author");
// ["David Flanagan", "Stoyan Stefanov"]

“$” がルートを示し、そこから “.” で下層を辿っていき、”?” を使って属性でフィルタをかけたりする事ができます。 “@” は自身のノードを指します。 詳しい書式については 参考ページ にXPathとの対応表として掲載されています。

慣れないと時間がかかりそうですが、大きなデータからの抽出に役立つかもしれません。

参考資料

• JSON
• douglascrockford/JSON-js
• jQuery.parseJSON() | jQuery API Documentation
• JSONPath – XPath for JSON
• jsonpath – XPath like syntax for JSON – Google Project Hosting

書いてみたもの

SpreadSheetLoader

mach3/js-spreadsheetloader via GitHub

• スプレッドシートのJSONを読み込みます
• 読み込んだデータを整理します
• jQuery 1.7+ が必要です

簡単な使い方

1. URLを取得

まず前編の記事を参考にしてURLを取得してきましょう。
形式は「Atom」または「RSS」の、「セル」を選択してください。
こんな感じのURLですね。

https://spreadsheets.google.com/feeds/cells/**********/***/public/basic

2. 読み込む

まずはインスタンスを初期化し、URLを渡し、読み込みます。

// 1. インスタンス初期化
var myloader = new SpreadSheetLoader( [your_url] );

// 2. readyイベントハンドラを登録
myloader.on("ready", function(){
    var data = this.getData();
});

// 3. load()
myloader.load();

1. コンストラクタの引数にURLを渡して初期化します。
   
   URLは後からsetUrl()で渡すことも出来ます。
2. on()でreadyイベントへのハンドラを設定します。
   
   readyイベントは、スプレッドシートが読み込まれ、データが整理された時点で発火します。
3. load()で読み込み開始

3. データを利用する

readyイベントハンドラの中では、自由にデータを利用する事ができます。
あとは煮るなり焼くなり。
データの利用の仕方は…

データを取得する

整理されたデータを取得して利用する為には、幾つかの方法が用意されています。

getData() : Array

データがまるごと配列で返されます。

myloader.on("ready", function(){
    var data = this.getData();
    console.log(data[3]); // 4番目のデータ
});

getItem(condition) : Array

条件に合うデータのみを配列で返します。
条件はオブジェクトで渡します。

myloader.on("ready", function(){
    var myItems = this.getItem({color:"red", price:800}); // 色がredで、価格が800の物を抽出
});

each(callback)

データに対して繰り返し処理を行います。（中身はjQuery.fn.eachです）

myloader.on("ready", function(){
    var total = 0;
    this.each(function(){
      total += this.price;
    });
    console.log( "Total price:", total ); // 全データのpriceの合計
});

試してみる

ソース

例えば、こんな表を読み込んでみます。

デモ

まとめ

前記事の通り、使える場面というのはわりと限られてそうではありますが、
何かの折に使ってみようかなと思っております。

1. URLの取得
2. 「リスト」と「セル」
3. JSONPしてみる
4. どんな時に使えそうか
5. デメリットなど
6. 後半へ

URLの取得

現在の「新しいスプレッドシート」では「公開データのリンクを取得」のUIがありませんが、APIは一応整備されていてJSONPでも利用できます。
URL: https://spreadsheets.google.com/feeds/list/[A]/[B]/public/basic?alt=json
[A]にはスプレッドシートID、[B]にはワークシートIDが入ります。

まずは対象となるスプレッドシートをJSONで出力する事からスタート。
現時点でJSONは選択肢には出てこないので、ちょっと自分で書き換える必要があります。

1. 「ファイル」→「ウェブに一般公開」→「公開開始」で公開する。
2. 「公開データへのリンクを取得 」で「RSS」を選択する。
3. 末尾の「alt=rss」を「alt=json」に変更してコピー。

コピーしたらアドレスバーに入力して内容をチェックしてみましょう。

「リスト」と「セル」

「公開データへのリンクを取得」では、「リスト」と「セル」というラジオボタンがありますが、
これはデータ出力の方法を設定する物です。

「リスト」

データの1カラム目をタイトルとし、行を一つのコンテンツとして出力。

「セル」

内容を含むセルを全て順番に出力していきます。

例

例えば、次のようなテーブルの場合。

「リスト」の場合は次のように出力されます。
行ごとに「entry」がある感じですね。

{
    "version": "1.0",
    "encoding": "UTF-8",
    ...
    "feed": {
        ...
        "entry": [{
            ...
            "title": {
                "type": "text",
                "$t": "1"
            },
            "content": {
                "type": "text",
                "$t": "name: hoge, content: this is hoge"
            }
        }]
    }
}

一方「セル」の場合は、内容を含むセル毎にentryを出力します。
現在地はtitleの「A1」「B1」「A2」などで取得できる他、
id属性にあるURLの末尾にRC方式で記載されています。

https://spreadsheets.google.com/feeds/cells/[document_id]/od6/public/basic/R1C3

{
    "version": "1.0",
    "encoding": "UTF-8",
    ...
    "feed": {
        "entry": [
            {
                ...
                "title": {
                        "type": "text",
                        "$t": "A1"
                },
                "content": {
                        "type": "text",
                        "$t": "id"
                }
            },
            {
                ...
                "title": {
                        "type": "text",
                        "$t": "B1"
                },
                "content": {
                        "type": "text",
                        "$t": "name"
                }
            },
            /* セルの分繰り返し */
        ]
    }
}

どっちがいいの？

一見すると「リスト」の方が扱いやすそうなのですが、
「リスト」は区切り文字に使用される「,」および「:」がセルの内容に含まれていても、
エスケープ等はしてくれないのでパースが少々厄介になります。

つまり、セル内容に区切り文字を含む可能性がある場合は
「セル」方式を整理して利用した方が安全そうです。

JSONPしてみる

jQueryを使ってJSONPで取得してみます。
コールバック用のパラメータは「callback」なのでデフォルトでOK。

var url = "[your_url]";

$.ajax({
    url : url,
    dataType : "jsonp",
    success : function(data, status){
        $.each(data.feed.entry, function(i, item){
            console.log(item);
        });
    }
});

渡されたオブジェクトをdataとして、data.feed.entryと辿ると各アイテムが取得できます。

どんな時につかえそうか

CMSは数あれど、ニュース記事や静的なページは編集出来ても、
表形式の内容の編集には基本的には向いていません。
また、「MTやWordPressはわからないけどExcelなら使えるよ！」
という方も、一般企業のWeb担当さんにはいらっしゃるかもしれません。

例えば、

• お店のメニュー
• ショップリスト
• スライダーの画像リスト

といったコンテンツをクライアントが更新担当する場合は導入検討の余地がありそうですね。
表形式は、ページというより簡易データベースとして活躍しそうです。

私は先日、JavaScriptから商品リストを読み込みたい案件があり、
定期的にメンテナンスもある関係上管理しやすくする為、導入してみました。

デメリットなど

アクセシビリティの問題

JavaScriptでの出力となると、当然アクセシビリティの問題が生じます。
そこらへんが気になる性格のコンテンツにはあまり適切な手法ではないと思います。
それでも導入したい場合はクライアント側のJavaScriptではなくサーバサイドでの処理、
且つキャッシュの保持等を検討した方が良いかもしれません。

オーナー情報に注意

出力結果を見るとわかりますが、gmailのアカウント名が思いっきり出力されます。
気になる場合は専用のアカウントを使うか、
開発が終わったら担当者のアカウントに移譲した方が良いでしょう。

後半へ

後半は、これを単純化するライブラリを書いてみたので、そのご紹介です。

次のようなJSONフォーマットの文字列が
「str」に格納されていると想定します。

{
    "status" : "success",
    "content" : [
        { "id" : 1 , "message" : "Nice to meet you, world !" },
        { "id" : 2 , "message" : "Hello, world !" },
        { "id" : 3 , "message" : "Hello again, world !" }
    ]
}

この文字列をオブジェクトとしてロードし、
それをもう一度JSON文字列として出力するテストです。

PHP

$php_obj = json_decode( $str ); // JSONからPHPオブジェクトを生成
$json_string = json_encode( $php_obj ); // PHPオブジェクトからJSONを生成

さすが関数から生まれてきたような言語のPHP。
JSONだって関数一発です。

Ruby

Rubyは1.9からjsonライブラリが標準搭載されているそうです。
当方の環境も1.9だったのでそのままそれを利用させて頂きます。

library json

require "json" # jsonライブラリが必要
ruby_obj = JSON.load( str ) # JSONからRubyオブジェクトを生成
json_string = JSON.generate( ruby_obj ) # RubyオブジェクトからJSONを生成

1.9未満だと他のライブラリに依存する事になります。
面倒なので（!?）ここでは割愛。

ActionScript3

AS3はJSONのパーサが標準装備されていないので、
as3corelibを使わせていただきます。

mikechambers’s as3corelib at master – GitHub

import com.adobe.serialization.json.JSON; // as3corelibからインポート

// 中略

var as3_obj:Object = JSON.decode( str ); // JSONからAS3オブジェクトを生成
var json_string:String = JSON.encode( as3_obj ); // AS3オブジェクトからJSONを生成

AS3というとXMLと相性も良いのでそちらをチョイスする事が多かったですが、
データ量によっては帯域節約の為にJSONを使うのも大いにありですね。その後も楽ですし。

XMLとかYAMLとか色々ありますが、JavaScriptの隆盛もあって
最近はJSONフォーマットがもてはやされている感じですね。
学習コストも極めて少なくて済むので、今後とも重宝されそうです。

JSON

JSONとは「JavaScript Object Node」の略で、
その名の通りJavaScriptのオブジェクトを表した物。
中身は勿論JavaScriptのオブジェクトリテラルです。

{
    "status" : "success",
    "content" : [ "hoge", "fuga", "foo", "bar" ]
}

昨今はXMLにかわって情報をやり取りする際のフォーマットとして
頻繁に使われるようになりました。

ただ、外部サービスと通信する際に、
AjaxでJSONをやり取りするには「クロスドメイン」という壁があります。
つまり、他ドメインに属するファイルはAjaxでは基本的に取得出来ないのです。

そこでJSONPの出番です。

JSONP

JSONP(JSON with Padding）というのは、
コールバック関数を介してJSONのデータを受け取る手法です。

myfunc({
    "status" : "success",
    "content" : [ "hoge", "fuga", "foo", "bar" ]
});

JSONを出力する側では、こんな感じに関数の引数に渡してやります。

上では関数名が「myfunc」になっていますが、
APIを公開している多くのサービスは、
大抵この関数名をパラメータで指定出来るようになっています。

<script type="text/javascript">
function myfunc(data){
    console.log( data );
}
</script>
<script type="text/javascript" src="http://example.com/hoge.json?callback=myfunc"></script>

コールバック関数を宣言したら、あとはscript要素でAPIにアクセスする。
「myfunc」内でJSONのデータを受け取り、煮たり焼いたりしましょう。
思いのほかシンプル。

そんなJSONPですが、
jQueryを通すとJSONPの仕組みが隠蔽されたような形になります。

jQueryでJSONPを使うと…

jQuery.ajax

$.ajax({
    url:"http://example.com/hoge.json",
    dataType:"jsonp",
    jsonp:"callback",
    success:function(data){
        console.log( data );
    }
});

上の例と同じ処理をしているわけですが、
普通のAjaxとほぼ同じ書式で出来てしまいますね。
違うのは、dataTypeパラメータとjsonpパラメータぐらい。

script要素の追加、コールバック関数の指定等は、
jQueryが勝手に代理で行ってくれます。

<script type="text/javascript" src="http://example.com/hoge.json?calback=jsonp1287411860619"></script>

DOMを見ていると、こんな感じのscript要素が生成されています。
コールバック関数名も動的に生成し、その中身をsuccessで設定した関数にしているわけですね。

まずは生JSで書いてみた方が良いと思う

前半で紹介したとおり、JSONPは全くもってシンプルな手法なのですが、
このようにjQueryを用いることで得体の知れない物になってしまっていませんか？
面倒な処理を代理で行ってくれるのがフレームワークなのですが、
その親切が学習する上での妨げになってしまう事があります。
（JSONPの例に限った話ではなく）

まずは、フレームワークに頼らない生のスクリプトで実験してみる。

そうする事が、その技術に対する理解を深められるだけでなく、
フレームワークをより上手く活用出来るようになる為の近道になるのではないかと
自戒の意も含めてここに記しておきます。