0
H T M L 5 で O p e n D a t a
を や ってみ た
2014.6.28
OpenData&FirefoxOS Hackathon OSAKA
Bathtimefish 村岡 正和
HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
H...
Firefox OSの
薄い本書きました。
http://goo.gl/mA8ebW
好評発売中!
開発に、「もえあがる」のはつきものだ
第一話 がいあハックス
(Gaia開発環境の構築とデバッグ)
著
監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中!!
日本ウェアラブルデバイスユーザー会
w-ug.jp
HTML5
HTML5は
一言でいうと、
広い
ひ ろ
もうとっくに「ホームページ制作技術」じゃない!!
RichでOpenなWebアプリケーションが
作成できる。
Firefox OS
http://www.mozilla.org/ja/firefox/os/
PanasonicからTVが出そう
パナソニック、Mozillaと提携して
Firefox OS搭載のスマートTV開発へ
http://jp.techcrunch.com/2014/01/07/20140106panasonic-ffos-tv...
TV TunerがJSで操れそう
http://airpingu.github.io/tv-tuner-api/index.html
Tizen IVI
https://wiki.tizen.org/wiki/IVI/IVI_Platforms
Automotive Grade Linux
https://automotive.linuxfoundation.org/
IVI Dashboard App Source Code
Vehicle Information API
https://rawgit.com/w3c/automotive-bg/master/snapshots/vehicle_spec_snapshot_latest.html
WEB of Things
WoT
JavaScriptで
焦電センサー制御
http://www.espruino.com/
WoT!! WoT!!
って吠えてたら
日経エレクトロニクス
に載ったw
日経エレクトロニクス
2014.6.23 号
学校教育でもHTML & JavaScript
「情報の科学」2014年度版 日本文教出版
OpenData
http://linkeddata.org/
( ́ー`)y- ワケワカンネ
難しい理屈はわからんけど、
オープンなのはわかった
HTML5でデータを取ってみた。
横浜市立博物館施設一覧のLODを取得する
http://fp.yafjp.org/yokohama_art_lod/place_rdf
と、その前に
ハマったこと。。。
orz
XHRで取得する際にSame Origin Policyにひっかかる。
HTML5 RIAでOpenDataを利用する際には致命的かも。
OpenData界隈ではCORSはどう考えられてるんだろうか?
詳しい人おしえてください。
横浜美術館のR...
調べまくったあげく、
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のデモとしてダメダメなのはわかってますw
Demo
https://github.com/mirlord/jquery-csv
http://goo.gl/1ONNeP
HTML5 Webapp開発的にはSame Origin
Policyに注意しよう。
OpenDataはCORSを開放すべきだと思う
いまのところRDFを使うならSPARQL利用が現実的
データのパースは簡単だった。
jQueryマンセー!
appendix
XHRなどのコールバック処理をわかりやすく記述しよう
function() {
callback( function() {
callback( function() {
callback( function () {
callback( fu...
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
いろんなアイデアをOpen WebAppに。
Happy Hacking :-)
Thanks !
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
HTML5でOpen Dataをやってみた
Upcoming SlideShare
Loading in...5
×

HTML5でOpen Dataをやってみた

1,062

Published on

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,062
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
4
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5でOpen Dataをやってみた"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×