Html5でOpen Dataをやってみる
-
Upload
masakazu-muraoka -
Category
Technology
-
view
524 -
download
3
description
Transcript of Html5でOpen Dataをやってみる
![Page 1: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/1.jpg)
HTML5でOpenDa t aをやってみる
2013.1.24 第3回 Linked Open Data ハッカソン関西Bathtimefish 村岡 正和
![Page 2: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/2.jpg)
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバーGDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
HTML5-WEST.jp
Webアプリケーション開発 IT業務システム設計/開発Webサービス導入/事業戦略コンサルティング
@bathtimefish
![Page 3: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/3.jpg)
コミックマーケット85
Firefox OSの薄い本書きました。
3日目
にて配布!
http://goo.gl/WeyvOl
![Page 4: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/4.jpg)
監修しました。
実例ごとの実装例がたくさん書いてあります。ウェブサイト制作やCMSの運用時に便利です。
好評販売中!!
![Page 5: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/5.jpg)
HTML5
![Page 6: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/6.jpg)
![Page 7: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/7.jpg)
![Page 8: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/8.jpg)
RichでOpenなWebアプリケーションが作成できる。
![Page 9: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/9.jpg)
OpenData
![Page 12: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/12.jpg)
( ́ー`)y-~~ ワカンネ
![Page 13: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/13.jpg)
難しい理屈はわからんけど、オープンなのはわかった
![Page 14: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/14.jpg)
HTML5でデータを取ってみた。
![Page 15: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/15.jpg)
横浜市立博物館施設一覧のLODを取得する
![Page 16: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/16.jpg)
http://fp.yafjp.org/yokohama_art_lod/place_rdf
![Page 17: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/17.jpg)
と、その前に
![Page 18: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/18.jpg)
ハマったこと。。。orz
![Page 19: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/19.jpg)
XHRで取得する際にSame Origin Policyにひっかかる。
HTML5 RIAでOpenDataを利用する際には致命的かも。
OpenData界隈ではCORSはどう考えられてるんだろうか?
詳しい人おしえてください。
横浜美術館のRDFをXHRで取得しようと思ったけどできなかった。
![Page 20: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/20.jpg)
調べまくったあげく、
![Page 21: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/21.jpg)
http://ja.wikipedia.org/wiki/SPARQL
SPARQL
![Page 22: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/22.jpg)
http://lod.ac/wiki/SPARQL%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88
![Page 23: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/23.jpg)
https://github.com/jgeldart/jquery-sparql
![Page 24: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/24.jpg)
Demo
![Page 25: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/25.jpg)
![Page 26: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/26.jpg)
大阪市施設情報CSVを取得する
![Page 27: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/27.jpg)
http://www.city.osaka.lg.jp/toshikeikaku/page/0000250227.html
![Page 28: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/28.jpg)
と、その前に
![Page 29: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/29.jpg)
やっぱりとれなかった orz
CSVのパースがやりたかったのでデータをSame Originにコピーした。。。
OpenDataのデモとしてダメダメなのはわかってますw
![Page 30: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/30.jpg)
Demo
![Page 31: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/31.jpg)
https://github.com/mirlord/jquery-csv
![Page 32: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/32.jpg)
![Page 34: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/34.jpg)
appendix
![Page 35: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/35.jpg)
XHRなどのコールバック処理をわかりやすく記述しよう
function() { callback( function() { callback( function() { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () {
![Page 36: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/36.jpg)
https://api.jquery.com/jQuery.ajax/
![Page 37: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/37.jpg)
https://api.jquery.com/jQuery.when/
![Page 38: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/38.jpg)
http://wiki.commonjs.org/wiki/Promises/A
![Page 39: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/39.jpg)
http://www.slideshare.net/bathtimefish/async-flow-controll-basic-and-practice
![Page 40: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/40.jpg)
まとめ
HTML5 Webapp開発的にはSame Origin Policyが痛い。
ServerSide Programで取得か、PackagedAppか?
RDFならSPARQL利用がいいのかも
データのパースは簡単だった。
jQueryマンセー!
![Page 41: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/41.jpg)
いろんなアイデアをOpen WebAppに。
Happy Hacking :-)
![Page 42: Html5でOpen Dataをやってみる](https://reader030.fdocument.pub/reader030/viewer/2022020115/54b6e7f04a7959aa3d8b472b/html5/thumbnails/42.jpg)
Thanks !