書いてみたもの

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の合計
});

試してみる

ソース

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

デモ

まとめ

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

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の例に限った話ではなく）

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

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