爆速JSONPをオープンソース化しました

先日、ブログパーツ作成フレームワーク 爆速JSONP をGitHubにて公開しました。2012年8月にYahoo! JAPANのソフトウェアガイドラインをライセンスとするバージョンを公開しましたが、オープンソース化に伴い、CDNで配布しているファイルもGitHub版に差し替えています。（インターフェースは互換性を保っています）

yahoojapan/bakusoku-jsonp · GitHub

• CDN版： https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1.js
• CDN版(圧縮済み)： https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1-min.js

MITライセンスを採用していますので、自由にフォークして書き換えてみてください。ビルド済みのファイルも、ビルド用のMakefileも同梱しているので、カスタマイズしてからビルドするなんてことも可能です。

爆速JSONPによるブログパーツの例

一言で爆速JSONPを説明すると、冒頭に書いた通り「ブログパーツ作成フレームワーク」ということになります。JavaScriptを一切書かず、HTMLテンプレートを書くだけで、WebAPIをベースにしたブログパーツを作ることができます。

ブログパーツを作るまでの流れはJSONP WebAPIを爆速で使いこなせるフレームワークの記事にも書いています。

Yahoo!ショッピングの売れ筋商品画像を並べる

Yahoo!ショッピングの商品検索APIを使って、「テレビ」を検索し、売れ筋順で上位3件を表示してみます。

 <script src="https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1-min.js"
  data-url="http://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch"
  data-p-appid="あなたのアプリケーションID"
  data-p-category_id="635"
  data-p-sort="-sold"
>
{{#ResultSet.0.Result}}
 {{#0}}
 <a href="{{Url}}"><img src="{{Image.Medium}}" alt="{{Name}}"></a>
 {{/0}}
 {{#1}}
 <a href="{{Url}}"><img src="{{Image.Medium}}" alt="{{Name}}"></a>
 {{/1}}
 {{#2}}
 <a href="{{Url}}"><img src="{{Image.Medium}}" alt="{{Name}}"></a>
 {{/2}}
{{/ResultSet.0.Result}}
</script>

電力メーターブログパーツ

震災関連情報として公開している、電力使用状況APIをブログパーツにします。データの加工はグローバル関数を作ることで対応できます。

<script>
/**
 * データの加工をする関数
 */
function calculateRate(data) {
  var e = data.ElectricPowerUsage;
  e.Rate = Math.round(e.Usage.$ / e.Capacity.$ * 1000) / 10;

  if (e.Rate > 90) {
    e.Color = 'red';
  } else if (e.Rate > 80) {
    e.Color = 'orange';
  } else {
    e.Color = 'green';
  }
  return e;
}
</script>

<script src="https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1-min.js"
  data-url="http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage"
  data-filter="calculateRate"
  data-p-appid="あなたのアプリケーションID"
  data-p-output="json"
>

 <small>東京電力：電力使用量<br>
 {{Date}} {{Hour}}時現在
 </small><br>
 <strong style="color:{{Color}};font-size:3em;font-family:sans-serif;">
  {{Rate}}
 </strong>
 %<br>
 節電にご協力ください

</script>

なお、Yahoo! JAPANのWeb APIを使う際は、アプリケーションを登録すると発行される「アプリケーションID」が必要です。上記のサンプルを動作させる場合は、登録を行ってみてください。

新しいアプリケーションを開発

OSS化にあたって：依存関係の管理

爆速JSONPはmustache.jsを内包するライブラリですので、ビルドするにはmustache.jsが必要です。

mustache.jsもまたMITライセンスのOSSなので、一緒に再配布することもできるのですが…

• mustache.jsに変更を加えていないことを保証しにくくなる
• コピー元のバージョンがわかりにくくなる
• 原作者へのリスペクト

などを考慮して、オリジナルそのものへリンクを張る形式を考えました。

爆速JSONPではgit submoduleを使って依存関係を記述しています。GitHubからcloneする際、デフォルトでは再帰的にcloneされないので、initとupdateが必要です。

# GitHubからclone
$ git clone git://github.com/ydnjp/bakusoku-jsonp.git
$ cd bakusoku-jsonp
$ git submodule init
$ git submodule update

# または一発で
$ git clone --recursive git://github.com/ydnjp/bakusoku-jsonp.git

テストスクリプトを実行するには、PHP5.4以降がインストールされている環境であれば、ビルトインウェブサーバーを使うと楽です。

$ pwd
path/to/bakusoku-jsonp

$ php -S localhost:8080

# この状態でブラウザを開き、 http://localhost:8080/tests/ を参照

ビルドするには、makeするだけです。ただ、前提としてYUI Compressorが"yuicompressor"というコマンドで実行できるようになっている必要があります。

$ make

# buildディレクトリ配下に、ビルドしたjsファイルが生成されます。

他の圧縮ツールを使いたい場合は、MINIFIERを上書きしてください。たとえばuglify-jsを使いたい場合は以下のようになります。

$ make MINIFIER=uglifyjs

# buildディレクトリ配下に、ビルドしたjsファイルが生成されます。

OSS化にあたって：JavaScriptのライブラリをOSS化するということ

爆速JSONPはJavaScriptのライブラリです。ということは、ライブラリを使う人のWebサイトで実行してもらうことになります。言い換えると、ページの中身を無茶苦茶に書き換えたり、情報を盗むようなことが可能な立場で実行されるということです。

もし、難読化したファイルしか提供されず何をしているのかよくわからないような、素性の知れないスクリプトがあったとして、使う人がいるでしょうか？ 本当にそのスクリプトは個人情報を収集したり攻撃をしないのでしょうか？　…少なくとも、Yahoo! JAPANでは素性の知れないスクリプトを使うことは禁じられていますし、素性がわかっていても使う前にスクリプトを厳密に検証しなければなりません。

この時、検証しにくいファイルしか提供されていないのであれば、そんなライブラリは使いにくくて仕方ないことでしょう。

ライブラリをOSS化するというのは、「 これはきちんと機能通りの動作のみを行うライブラリである。いくらでも検証して欲しい 」と明示することでもあります。特にブラウザ上で動作するJavaScriptの場合、致命的な被害を与えかねないため、検証しやすいよう整えておくことが重要です。

今までは圧縮前のソースコードを一緒に提供するだけでしたが、これでより一層使いやすくなったと思います。

ぜひ使ってみてください。

関連記事

JSONP WebAPIを爆速で使いこなせるフレームワーク - Yahoo! JAPAN Tech Blog