1. H T M L 5 で O p e n D a t a
を や ってみ た
2014.6.28
OpenData&FirefoxOS Hackathon OSAKA
Bathtimefish 村岡 正和

2. HTML5-WEST.jp代表 / html5j マークアップ部 部長 / HTML5 Experts.jp メンバー
GDG京都 / CSS Nite in OSAKA / 神戸ITフェスティバル実行委員など
むらおか まさかず
村岡正和
HTML5-WEST.jp
Webアプリケーション開発 IT業務システム設計/開発
Webサービス導入/事業戦略コンサルティング
@bathtimefish

3. Firefox OSの
薄い本書きました。
http://goo.gl/mA8ebW
好評発売中！
開発に、「もえあがる」のはつきものだ
第一話 がいあハックス
（Gaia開発環境の構築とデバッグ）
著

4. 監修しました。
実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。
好評販売中！！

5. 日本ウェアラブルデバイスユーザー会
w-ug.jp

6. HTML5

7. HTML5は
一言でいうと、
広い
ひ ろ
もうとっくに「ホームページ制作技術」じゃない！！

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

11. Firefox OS
http://www.mozilla.org/ja/firefox/os/

12. PanasonicからTVが出そう
パナソニック、Mozillaと提携して
Firefox OS搭載のスマートTV開発へ
http://jp.techcrunch.com/2014/01/07/20140106panasonic-ffos-tvs/

13. TV TunerがJSで操れそう
http://airpingu.github.io/tv-tuner-api/index.html

14. Tizen IVI
https://wiki.tizen.org/wiki/IVI/IVI_Platforms

15. Automotive Grade Linux
https://automotive.linuxfoundation.org/

16. IVI Dashboard App Source Code

17. Vehicle Information API
https://rawgit.com/w3c/automotive-bg/master/snapshots/vehicle_spec_snapshot_latest.html

18. WEB of Things
WoT

20. JavaScriptで
焦電センサー制御
http://www.espruino.com/

21. WoT!! WoT!!
って吠えてたら
日経エレクトロニクス
に載ったｗ
日経エレクトロニクス
2014.6.23 号

22. 学校教育でもHTML & JavaScript
「情報の科学」2014年度版 日本文教出版

23. OpenData

24. http://linkeddata.org/

25. ( ́ー｀)y- ﾜｹﾜｶﾝﾈ

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

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

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

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

30. と、その前に

31. ハマったこと。。。
orz

32. XHRで取得する際にSame Origin Policyにひっかかる。
HTML5 RIAでOpenDataを利用する際には致命的かも。
OpenData界隈ではCORSはどう考えられてるんだろうか？
詳しい人おしえてください。
横浜美術館のRDFをXHRで取得しようと思ったけどできなかった。

33. 調べまくったあげく、

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

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

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

37. Demo

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

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

41. と、その前に

42. やっぱりとれなかった orz
CSVのパースがやりたかったのでデータをSame Originにコピーした。。。
OpenDataのデモとしてダメダメなのはわかってますｗ

43. Demo

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

46. http://goo.gl/1ONNeP

47. HTML5 Webapp開発的にはSame Origin
Policyに注意しよう。
OpenDataはCORSを開放すべきだと思う
いまのところRDFを使うならSPARQL利用が現実的
データのパースは簡単だった。
jQueryマンセー！

48. appendix

49. XHRなどのコールバック処理をわかりやすく記述しよう
function() {
callback( function() {
callback( function() {
callback( function () {
callback( function () {
callback( function () {

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

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

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

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

54. いろんなアイデアをOpen WebAppに。
Happy Hacking :-)

55. Thanks !