html5でopen dataをやってみる

HTML5でOpenDa t aをやってみる

2013.1.24 第3回 Linked Open Data ハッカソン関西Bathtimefish 村岡 正和

HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバーGDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など

むらおか　まさかず

村岡正和

HTML5-WEST.jp

Webアプリケーション開発　IT業務システム設計/開発Webサービス導入/事業戦略コンサルティング

@bathtimefish

コミックマーケット85

Firefox OSの薄い本書きました。

3日目

にて配布！

http://goo.gl/WeyvOl

監修しました。

実例ごとの実装例がたくさん書いてあります。ウェブサイト制作やCMSの運用時に便利です。

好評販売中！！

HTML5

RichでOpenなWebアプリケーションが作成できる。

OpenData

http://linkeddata.org/

http://5stardata.info/

( ́ー｀)y-~~ ﾜｶﾝﾈ

難しい理屈はわからんけど、オープンなのはわかった

HTML5でデータを取ってみた。

横浜市立博物館施設一覧のLODを取得する

http://fp.yafjp.org/yokohama_art_lod/place_rdf

と、その前に

ハマったこと。。。orz

XHRで取得する際にSame Origin Policyにひっかかる。

HTML5 RIAでOpenDataを利用する際には致命的かも。

OpenData界隈ではCORSはどう考えられてるんだろうか？

詳しい人おしえてください。

横浜美術館のRDFをXHRで取得しようと思ったけどできなかった。

調べまくったあげく、

http://ja.wikipedia.org/wiki/SPARQL

SPARQL

http://lod.ac/wiki/SPARQL%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88

https://github.com/jgeldart/jquery-sparql

Demo

大阪市施設情報CSVを取得する

http://www.city.osaka.lg.jp/toshikeikaku/page/0000250227.html

と、その前に

やっぱりとれなかった orz

CSVのパースがやりたかったのでデータをSame Originにコピーした。。。

OpenDataのデモとしてダメダメなのはわかってますｗ

Demo

https://github.com/mirlord/jquery-csv

http://goo.gl/hI9VhN

appendix

XHRなどのコールバック処理をわかりやすく記述しよう

function() { callback( function() { callback( function() { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () {

https://api.jquery.com/jQuery.ajax/

https://api.jquery.com/jQuery.when/

http://wiki.commonjs.org/wiki/Promises/A

http://www.slideshare.net/bathtimefish/async-flow-controll-basic-and-practice

まとめ

HTML5 Webapp開発的にはSame Origin Policyが痛い。

ServerSide Programで取得か、PackagedAppか？

RDFならSPARQL利用がいいのかも

データのパースは簡単だった。

jQueryマンセー！

いろんなアイデアをOpen WebAppに。

Happy Hacking :-)

Thanks !