HTML5でOpenDa t aをやってみた

2014.6.28OpenData&FirefoxOS Hackathon OSAKA

Bathtimefish 村岡 正和

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

むらおか　まさかず

村岡正和

HTML5-WEST.jp

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

@bathtimefish

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-tvs/

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!!って吠えてたら日経エレクトロニクスに載ったｗ

日経エレクトロニクス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はどう考えられてるんだろうか？

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

横浜美術館の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/1ONNeP

HTML5 Webapp開発的にはSame Origin Policyに注意しよう。

OpenDataはCORSを開放すべきだと思う

いまのところRDFを使うならSPARQL利用が現実的

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

jQueryマンセー！

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

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

Happy Hacking :-)

Thanks !