javascriptとSPARQLでオープンデータをいじくる
オープンデータ・アプリコンテストが気になったので、とりあえずjavascriptからSPARQLを使ってオープンデータで遊んでみました
SPARQLってなんぞや
SPARQLはクエリ言語で、データベースを扱うためのSQLと似たようなものです。
SQLがデータベースを操作するなら、SPARQLはオープンデータを操作します。(SPARQLは検索だけですが)
文法とかについては割愛しますが、なんとなく雰囲気を掴むならCodeIQの問題が分かりやすかったです。
がっつり学ぶなら公式ドキュメントの和訳サイトでしょうか。
あと、SPARQLで遊びたいだけならDBpediaとかがあります。
javascriptからSPARQLを使うには
SPARQLは、エンドポイントと呼ばれるURIにGETリクエストでクエリを送りつけると、クエリに応じたjsonとかxmlとか(指定可能)が返ってきます。
あとはjavascriptの方でjson(またはxml)を解析することでオープンデータとｷｬｯｷｬｳﾌﾌできます。
最小限のサンプルコード
javascriptでSPARQLのクエリを鯖江市のエンドポイントに送り、返ってきたjsonをそのまま文字列として表示します。
鯖江市が提供しているオープンデータについては、こことかここを参考にしています。
(※GRAPHについてはいまいち分かってないです)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>sparql</title> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript"> // GETリクエストを送信 $.get( "http://sparql.sabae.jrrk.org/data/sparql", // エンドポイント {query:"\ PREFIX schema: <http://schema.org/> \ SELECT ?desc ?img \ WHERE { \ GRAPH ?g { \ ?id schema:description ?desc. \ ?id schema:image ?img. \ } \ } limit 20 \ "}, // クエリ(説明文と画像を最大20件まで要求) success, // 返ってきたデータを処理する関数 "json" // 返ってきてほしいデータの形式 ); // getリクエストで得たdataを処理する function success(data) { // 文字列に変換 var html = JSON.stringify(data); // そのまま表示 $("#disp").html(html); } </script> </head> <body> <div id="disp"></div> <p>このアプリケーションは、以下の著作物を改変して利用しています。<br> 鯖江市、さばかん、クリエイティブ・コモンズ・ライセンス 表示 2.1 日本（http://creativecommons.org/licenses/by/2.1/jp/）、オープンデータ・アプリコンテスト利用規約（http://www.opendata.gr.jp/2013contest/terms/index.html#rules）</p> </body> </html>
「{"head":{"vars":["desc","img"]},"results":{"bindings":[{"desc":{"type":"literal","value":"店主が毎朝市場へ…」みたいな文字が出たらうまくいってます。きっと
jsonを解析して体裁を整えたバージョン
success関数の中身を書き換えます。
tableを使って体裁を整えるのと、取得した画像パスから画像を表示します。
function success(data) { var head = data.head.vars; var results = data.results.bindings; var html = "<table>"; for(var i=0; i<results.length; i++) { html += "<tr><td>"; html += results[i].desc.value; html += "</td><td>"; html += "<img src=\""+results[i].img.value+"\"></img>"; html += "</td></tr>"; } html += "</table>"; $("#disp").html(html); }
上記コードによって出来たのがこちら
(追記：上記リンクのプロトコルをhttpsにしていたため表示できないバグがありましたが修正しました)
