IT Office Nishimiyahara

個人用スマホから商用プログラミングまでなんでもお任せ下さい

JSONをストリーム受信できるOboe.jsがスゴイ

   

@nqounetです。

WebでAPIを使うときは、受信するデータはJSONが主流だと思います。未だにXMLだけのところは早くJSONに対応してほしいと思いますよね。

JSONはtableみたい

かなり昔の話ですが。

tableタグを使うと、テーブル要素をすべて読み込まないとレイアウトが決まらないので描画が非常に遅い、tableタグはなるべく使わないようにしよう、というような事が言われていた時代がありました。

IE4とかの時代の話ですね。たぶん。

当時は通信速度も56kbpsとか普通にあったので、巨大なテーブルだと画面が全然更新されないんですね。

JSONのデータも普通に解析すると、最初のカッコに対応するカッコ(つまり最後のデータ)が来るまで解析できません。

gulpのサイトのプラグイン検索はJSONデータを読み込んでいるのですが、そのデータは500KB以上あります。

それが全部読み込まれないと1つも表示されないのです。

なので、まずは15件分だけを取得してページを更新し、その後残りを全部(700件以上)取得する、という方法をとっているようです。

が、そんな苦労をしなくても、取得した部分から解析できればなぁ…って思いませんか?

JSONの味方Oboe.js

実はOboe.jsならそれができるんです。

その辺りを説明したページもまた凄いので、是非ご覧ください。全部見ると大変ですが、最初の2つだけでもイメージがわかると思います。

使い方も驚くほど簡単です。

欲しいパラメータ(プロパティ名)と、それらが揃った時に実行する関数を定義するだけです。

例えば、先ほどのgulpのプラグインの名前(name)と概要(description)をコンソール画面表示するにはこんな感じです。

階層を意識しなくても値が取得できるのは衝撃でした。

APIから各種値を取得するだけならこの使い方で十分ですね。

CORSには対応。しかしJSONPには…

JavaScriptでJSONを取得する際に問題になるのは、same origin policy(同一生成元ポリシー)です。

HTMLファイルと同じoriginであれば、JSONデータをAJAXで取得して使えるのですが、違うoriginの場合はこのデータを利用できません。

AJAXで取得する場合、多くのAPIはこの垣根を超えるためにJSONPという方式で取得できるようになっています。

しかし、Oboe.jsはJSONPには対応してなさそうです。(私が調べた範囲ではですが)

そのため、取得する際には、相手のサーバがCORSに対応している必要があります。

5つほどのサービスを使いながら調べてみましたが、gulpは対応、そしてzusaarも対応していました。

残念ながら、gruntATND BETAconnpassは非対応でした。(gruntはJSONファイルを取得するだけっぽいのでAPIとは言えないかも)

外部のAPIを使う際には使えない場合もありますが、自前のサーバで使用するなら十分利用可能です。

これからのAPIはCORSに対応する事が必要でしょうね。

zusaarは、Perl入学式の告知に使っているのですが、優秀で勉強熱心なエンジニアが担当しているようで安心ですね。

参考になる資料

respo

respo link

ZenBackWidget

 - 情報技術について , , , , ,