SlideShare a Scribd company logo
1 of 42
Download to read offline
HTML5でOpenData
を や って み る

2013.1.24 第3回 Linked Open Data ハッカソン関西
Bathtimefish 村岡 正和
むらおか まさかず

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

HTML5-WEST.jp
Firefox OSの薄い本書きました。

コミックマーケット85
3日目
にて配布!

http://goo.gl/WeyvOl
監修しました。

実例ごとの実装例がたくさん書いてあ
ります。ウェブサイト制作やCMSの運
用時に便利です。

好評販売中!!
HTML5
RichでOpenなWebアプリケーションが
作成できる。
OpenData
http://linkeddata.org/
http://5stardata.info/
( ́ー`)y-

ワカンネ
難しい理屈はわからんけど、
オープンなのはわかった
HTML5でデータを取ってみた。
横浜市立博物館施設一覧のLODを取得する
http://fp.yafjp.org/yokohama_art_lod/place_rdf
と、その前に
orz
ハマったこと。。。
XHRで取得する際にSame Origin Policyにひっかかる。
横浜美術館のRDFをXHRで取得しようと思ったけどできなかった。

HTML5 RIAでOpenDataを利用する際には致命的かも。
OpenData界隈ではCORSはどう考えられてるんだろうか?
詳しい人おしえてください。
調べまくったあげく、
SPARQL
http://ja.wikipedia.org/wiki/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/hI9VhN
appendix
XHRなどのコールバック処理をわかりやすく記述しよう

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
まとめ

HTML5 Webapp開発的にはSame Origin
Policyが痛い。
ServerSide Programで取得か、PackagedAppか?
RDFならSPARQL利用がいいのかも

データのパースは簡単だった。
jQueryマンセー!
いろんなアイデアをOpen WebAppに。

Happy Hacking :-)
Thanks !

More Related Content

What's hot

AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015Akihiko Kigure
 
データベース不要のCMS Picoについて
データベース不要のCMS Picoについてデータベース不要のCMS Picoについて
データベース不要のCMS Picoについて高見 知英
 
2105年、マイクロソフト関連記事ランキングベスト20 新野さん
2105年、マイクロソフト関連記事ランキングベスト20 新野さん2105年、マイクロソフト関連記事ランキングベスト20 新野さん
2105年、マイクロソフト関連記事ランキングベスト20 新野さんKazuo Shimokawa
 
自動化ツールの違いを探る
自動化ツールの違いを探る自動化ツールの違いを探る
自動化ツールの違いを探るToshiya Mabuchi
 
株式会社カブク システム開発最前線
株式会社カブク システム開発最前線株式会社カブク システム開発最前線
株式会社カブク システム開発最前線Takuro Wada
 
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)Kensaku Komatsu
 
コンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフローコンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフローYasuhisa Hasegawa
 

What's hot (8)

AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
 
データベース不要のCMS Picoについて
データベース不要のCMS Picoについてデータベース不要のCMS Picoについて
データベース不要のCMS Picoについて
 
Fetch apiについて
Fetch apiについてFetch apiについて
Fetch apiについて
 
2105年、マイクロソフト関連記事ランキングベスト20 新野さん
2105年、マイクロソフト関連記事ランキングベスト20 新野さん2105年、マイクロソフト関連記事ランキングベスト20 新野さん
2105年、マイクロソフト関連記事ランキングベスト20 新野さん
 
自動化ツールの違いを探る
自動化ツールの違いを探る自動化ツールの違いを探る
自動化ツールの違いを探る
 
株式会社カブク システム開発最前線
株式会社カブク システム開発最前線株式会社カブク システム開発最前線
株式会社カブク システム開発最前線
 
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
Webによるデバイスを用いたリアルタイムサービスの可能性(神戸ITフェスティバル版)
 
コンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフローコンテンツから始まる新しいWebワークフロー
コンテンツから始まる新しいWebワークフロー
 

Similar to Html5でOpen Dataをやってみる

HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?Masakazu Muraoka
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Masakazu Muraoka
 
Swaggerのさわりだけ
SwaggerのさわりだけSwaggerのさわりだけ
SwaggerのさわりだけMasakazu Muraoka
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるMasakazu Muraoka
 
Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発Masakazu Muraoka
 
Ie6をさっさとやめよう その2
Ie6をさっさとやめよう その2Ie6をさっさとやめよう その2
Ie6をさっさとやめよう その2Masakazu Muraoka
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5Sho Ito
 
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみたJAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみたMasakazu Muraoka
 
パンダの会 Html5概説
パンダの会 Html5概説パンダの会 Html5概説
パンダの会 Html5概説Masakazu Muraoka
 
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由Masakazu Muraoka
 
Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなことMasakazu Muraoka
 
Kerasで可視化いろいろ
Kerasで可視化いろいろKerasで可視化いろいろ
Kerasで可視化いろいろMasakazu Muraoka
 
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識Mitsuru Ogawa
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Masakazu Muraoka
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Sho Ito
 
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策Kensaku Komatsu
 

Similar to Html5でOpen Dataをやってみる (20)

HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?HTML5が最近どうなっていて何があぶなっかしいのか?
HTML5が最近どうなっていて何があぶなっかしいのか?
 
Html5 and Graphics
Html5 and GraphicsHtml5 and Graphics
Html5 and Graphics
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
 
Swaggerのさわりだけ
SwaggerのさわりだけSwaggerのさわりだけ
Swaggerのさわりだけ
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
 
Thing.jsについて
Thing.jsについてThing.jsについて
Thing.jsについて
 
Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発Gaiaのソースコードに見るちょっと未来のweb app開発
Gaiaのソースコードに見るちょっと未来のweb app開発
 
Platform.html5
Platform.html5Platform.html5
Platform.html5
 
Ie6をさっさとやめよう その2
Ie6をさっさとやめよう その2Ie6をさっさとやめよう その2
Ie6をさっさとやめよう その2
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみたJAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
JAWS-UGにゴマをすろうと思ってAWSでHTML5してみた
 
パンダの会 Html5概説
パンダの会 Html5概説パンダの会 Html5概説
パンダの会 Html5概説
 
みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由みなさんがHtml5をやらなくていい3つの理由
みなさんがHtml5をやらなくていい3つの理由
 
Html5で変わるいろんなこと
Html5で変わるいろんなことHtml5で変わるいろんなこと
Html5で変わるいろんなこと
 
Kerasで可視化いろいろ
Kerasで可視化いろいろKerasで可視化いろいろ
Kerasで可視化いろいろ
 
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識
 
AMD basic and practice
AMD basic and practiceAMD basic and practice
AMD basic and practice
 
Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方Html5時代のクリエイターのあり方
Html5時代のクリエイターのあり方
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策最新Webプロトコル傾向と対策
最新Webプロトコル傾向と対策
 

More from Masakazu Muraoka

Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Masakazu Muraoka
 
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Masakazu Muraoka
 
JS非同期処理のいま
JS非同期処理のいまJS非同期処理のいま
JS非同期処理のいまMasakazu Muraoka
 
実はとれました。System xhrでcsv形式のopen dataを取得する
実はとれました。System xhrでcsv形式のopen dataを取得する実はとれました。System xhrでcsv形式のopen dataを取得する
実はとれました。System xhrでcsv形式のopen dataを取得するMasakazu Muraoka
 
Async flow controll basic and practice
Async flow controll basic and practiceAsync flow controll basic and practice
Async flow controll basic and practiceMasakazu Muraoka
 
MarkupCafe - html5j Markup group
MarkupCafe - html5j Markup groupMarkupCafe - html5j Markup group
MarkupCafe - html5j Markup groupMasakazu Muraoka
 
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜Masakazu Muraoka
 
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜Masakazu Muraoka
 
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門Masakazu Muraoka
 
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分Webセキュリティ 3つの視点から考えるサイバー攻撃と自分
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分Masakazu Muraoka
 
IE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れIE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れMasakazu Muraoka
 

More from Masakazu Muraoka (11)

Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話Async awaitでの繰り返し処理についての小話
Async awaitでの繰り返し処理についての小話
 
Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満Mozapps installがなくなったことへの不平不満
Mozapps installがなくなったことへの不平不満
 
JS非同期処理のいま
JS非同期処理のいまJS非同期処理のいま
JS非同期処理のいま
 
実はとれました。System xhrでcsv形式のopen dataを取得する
実はとれました。System xhrでcsv形式のopen dataを取得する実はとれました。System xhrでcsv形式のopen dataを取得する
実はとれました。System xhrでcsv形式のopen dataを取得する
 
Async flow controll basic and practice
Async flow controll basic and practiceAsync flow controll basic and practice
Async flow controll basic and practice
 
MarkupCafe - html5j Markup group
MarkupCafe - html5j Markup groupMarkupCafe - html5j Markup group
MarkupCafe - html5j Markup group
 
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
つかってみよう!Yeoman 〜riaビルドツール超入門+α〜
 
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
つかってみよう!Yeoman 〜HTML5 Webアプリ開発を効率化するツールの紹介〜
 
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
 
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分Webセキュリティ 3つの視点から考えるサイバー攻撃と自分
Webセキュリティ 3つの視点から考えるサイバー攻撃と自分
 
IE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れIE6をやめようと思ってももう手遅れ
IE6をやめようと思ってももう手遅れ
 

Recently uploaded

20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 

Recently uploaded (7)

20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 

Html5でOpen Dataをやってみる