HTML5でOpen Dataをやってみた
-
Upload
masakazu-muraoka -
Category
Technology
-
view
941 -
download
1
description
Transcript of HTML5でOpen Dataをやってみた
![Page 1: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/1.jpg)
HTML5でOpenDa t aをやってみた
2014.6.28OpenData&FirefoxOS Hackathon OSAKA
Bathtimefish 村岡 正和
![Page 2: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/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://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/3.jpg)
Firefox OSの薄い本書きました。
http://goo.gl/mA8ebW
好評発売中!
開発に、「もえあがる」のはつきものだ
第一話 がいあハックス (Gaia開発環境の構築とデバッグ)
著
![Page 4: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/4.jpg)
監修しました。
実例ごとの実装例がたくさん書いてあります。ウェブサイト制作やCMSの運用時に便利です。
好評販売中!!
![Page 5: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/5.jpg)
日本ウェアラブルデバイスユーザー会
w-ug.jp
![Page 6: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/6.jpg)
HTML5
![Page 7: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/7.jpg)
HTML5は
一言でいうと、
広いひ ろ
もうとっくに「ホームページ制作技術」じゃない!!
![Page 8: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/8.jpg)
![Page 9: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/9.jpg)
![Page 10: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/10.jpg)
RichでOpenなWebアプリケーションが作成できる。
![Page 11: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/11.jpg)
Firefox OS
http://www.mozilla.org/ja/firefox/os/
![Page 12: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/12.jpg)
PanasonicからTVが出そう
パナソニック、Mozillaと提携してFirefox OS搭載のスマートTV開発へ
http://jp.techcrunch.com/2014/01/07/20140106panasonic-ffos-tvs/
![Page 13: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/13.jpg)
TV TunerがJSで操れそう
http://airpingu.github.io/tv-tuner-api/index.html
![Page 14: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/14.jpg)
Tizen IVI
https://wiki.tizen.org/wiki/IVI/IVI_Platforms
![Page 15: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/15.jpg)
Automotive Grade Linux
https://automotive.linuxfoundation.org/
![Page 16: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/16.jpg)
IVI Dashboard App Source Code
![Page 17: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/17.jpg)
Vehicle Information API
https://rawgit.com/w3c/automotive-bg/master/snapshots/vehicle_spec_snapshot_latest.html
![Page 18: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/18.jpg)
WEB of Things
WoT
![Page 19: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/19.jpg)
![Page 21: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/21.jpg)
WoT!! WoT!!って吠えてたら日経エレクトロニクスに載ったw
日経エレクトロニクス2014.6.23 号
![Page 22: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/22.jpg)
学校教育でもHTML & JavaScript
「情報の科学」2014年度版 日本文教出版
![Page 23: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/23.jpg)
OpenData
![Page 25: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/25.jpg)
( ́ー`)y-~~ ワケワカンネ
![Page 26: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/26.jpg)
難しい理屈はわからんけど、オープンなのはわかった
![Page 27: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/27.jpg)
HTML5でデータを取ってみた。
![Page 28: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/28.jpg)
横浜市立博物館施設一覧のLODを取得する
![Page 29: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/29.jpg)
http://fp.yafjp.org/yokohama_art_lod/place_rdf
![Page 30: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/30.jpg)
と、その前に
![Page 31: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/31.jpg)
ハマったこと。。。orz
![Page 32: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/32.jpg)
XHRで取得する際にSame Origin Policyにひっかかる。
HTML5 RIAでOpenDataを利用する際には致命的かも。
OpenData界隈ではCORSはどう考えられてるんだろうか?
詳しい人おしえてください。
横浜美術館のRDFをXHRで取得しようと思ったけどできなかった。
![Page 33: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/33.jpg)
調べまくったあげく、
![Page 34: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/34.jpg)
http://ja.wikipedia.org/wiki/SPARQL
SPARQL
![Page 35: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/35.jpg)
http://lod.ac/wiki/SPARQL%E3%82%B9%E3%83%8B%E3%83%9A%E3%83%83%E3%83%88
![Page 36: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/36.jpg)
https://github.com/jgeldart/jquery-sparql
![Page 37: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/37.jpg)
Demo
![Page 38: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/38.jpg)
![Page 39: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/39.jpg)
大阪市施設情報CSVを取得する
![Page 40: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/40.jpg)
http://www.city.osaka.lg.jp/toshikeikaku/page/0000250227.html
![Page 41: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/41.jpg)
と、その前に
![Page 42: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/42.jpg)
やっぱりとれなかった orz
CSVのパースがやりたかったのでデータをSame Originにコピーした。。。
OpenDataのデモとしてダメダメなのはわかってますw
![Page 43: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/43.jpg)
Demo
![Page 44: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/44.jpg)
https://github.com/mirlord/jquery-csv
![Page 45: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/45.jpg)
![Page 46: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/46.jpg)
http://goo.gl/1ONNeP
![Page 47: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/47.jpg)
HTML5 Webapp開発的にはSame Origin Policyに注意しよう。
OpenDataはCORSを開放すべきだと思う
いまのところRDFを使うならSPARQL利用が現実的
データのパースは簡単だった。
jQueryマンセー!
![Page 48: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/48.jpg)
appendix
![Page 49: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/49.jpg)
XHRなどのコールバック処理をわかりやすく記述しよう
function() { callback( function() { callback( function() { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () { callback( function () {
![Page 50: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/50.jpg)
https://api.jquery.com/jQuery.ajax/
![Page 51: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/51.jpg)
https://api.jquery.com/jQuery.when/
![Page 52: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/52.jpg)
http://wiki.commonjs.org/wiki/Promises/A
![Page 53: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/53.jpg)
http://www.slideshare.net/bathtimefish/async-flow-controll-basic-and-practice
![Page 54: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/54.jpg)
いろんなアイデアをOpen WebAppに。
Happy Hacking :-)
![Page 55: HTML5でOpen Dataをやってみた](https://reader033.fdocument.pub/reader033/viewer/2022042714/54b6e7e54a7959aa3d8b4729/html5/thumbnails/55.jpg)
Thanks !