32
ソースコード公開しました! HTML5 x LOD WEBアプリ SPARQL Timeliner@uedayou http://uedayou.net/ 1Firefox OS × HTML5 × LOD WEB イノベーションハッカソン 2014/6/28

ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

Embed Size (px)

DESCRIPTION

第1回 Firefox OS × HTML5 × LOD WEB イノベーションハッカソン (2014/6/28)

Citation preview

Page 1: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

ソースコード公開しました!

HTML5 x LOD WEBアプリ

“SPARQL Timeliner”

@uedayou

http://uedayou.net/

第1回 Firefox OS × HTML5 × LOD WEB イノベーションハッカソン

2014/6/28

Page 2: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

自己紹介:仕事• ATR Creative エンジニア

•主にスマートフォン向け(iOS/Android)アプリの開発を担当

古地図・絵地図アプリちずぶらりシリーズ

ライフログカメラアプリふぉとぶらり

英語教育アプリ英語カルタ

Page 3: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

自己紹介:趣味いろんなWebアプリ作ってます

• SPARQL Timeliner• 今回紹介します

• 近畿2府1県!?• 近畿2府4県内で合併するとしたらどうなるかをオープンデータを用いてシミュレーションできるWebアプリ

• ミュージアムへ行こう!• オープンデータを利用したミュージアム検索サイト

• Researcher’s Web Page Navigator• 学者・研究者のWebページを自動分類

• おしえて!れはっち• 人工無能搭載の本や役立つ情報を自動推薦してくれるTwitter BOT

など

詳しくは、http://uedayou.net/をご覧ください

Page 4: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

今日は個人的に関わるプロジェクトで作成されたものを

ご紹介します

Page 5: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

SPARQL Timeliner

Page 6: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

SPARQL Timelinerってどんなアプリ?

Page 7: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

特徴

• Linked Open Data(LOD)を簡単に可視化できるWebアプリケーション

•時間情報をタイムライン(時系列)で表示

•位置(緯度経度)を地図上に表示

•作成した可視化ページをWebアプリとして手軽に公開できます

• Webアプリにiframeで埋め込むことができます

• プログラミングは必要ありません

Page 8: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

タイムライン

地図

Page 9: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

必要なもの• SPARQLエンドポイントで公開されたLOD

• LOD用のWeb APIのようなもの

• JSONやXMLでデータを取得できる

•位置(緯度経度)と時間を含むLOD

• SPARQLクエリ文• SPARQLエンドポイントからデータを抽出するクエリ言語

PREFIX geo: <http://www.w3.org/2003/01/geo/wgs84_pos#>PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>

select * where {?uri rdfs:label ?title.?uri geo:lat ?lat.?uri geo:long ?long.

}

Page 10: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

使い方 1.SPARQLエンドポイントのURL

2.SPARQLクエリ文

3.アプリ作成

Page 11: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

完成!

Page 12: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

詳しい使い方は

“SPARQL Timelinerの使い方”http://www.slideshare.net/uedayou/

sparql-timeliner-28905905

をご覧ください

Page 13: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

SPARQL Timelinerでどんなアプリが作れる?

Page 14: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

Wikipedia x SPARQL Timeliner• DBpedia

Page 15: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

日本の大学

Page 16: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

アニメ・ゲーム・漫画x SPARQL Timeliner•残念な日本地図(Location Site of Japanimation)

Page 17: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

残念な日本地図’90-’99

Page 18: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

本 x 地元 x SPARQL Timeliner

• 「京都が出てくる本のデータ」

Page 19: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

京都が出てくる本

Page 20: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

イベント情報 x SPARQL Timeliner• ヨコハマ・アート・LOD

Page 21: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

ヨコハマ・アート・ナビNOW!

Page 22: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

祝!オープンソース化SPARQL Timeliner

Page 23: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

GitHubでソースコード公開しました

• https://github.com/uedayou/SPARQLTimeliner

• ライセンス:MITライセンス

Page 24: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

使い方• SPARQLエンドポイントURLとSPARQLクエリは

index.html内に記述

2.SPARQLクエリ文

1.SPARQLエンドポイントのURL

Page 25: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

オープンソース化でできること

•地図を変更できる!

• コンテンツの見せ方を変更できる!

•画面レイアウトを変更できる!

• その他なんでも変更できる!

Page 26: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

地図の変更

•現在のOpen Street Map から国土地理院の地図や衛星地図などへ変更可能

Page 27: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

コンテンツの見せ方を変更できる

•例:佐賀県橋梁メンテナンスビューア

Page 28: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

レイアウトを変更

Page 29: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

SPARQL Timelinerへのご意見・ご要望について

• FacebookのSPARQL Timelinerグループを開設

•気軽にご参加ください

• https://www.facebook.com/groups/1425291001020491/

Page 30: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

ご清聴ありがとうございました

Page 31: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

• SPARQL Timeliner• http://uedayou.net/SPARQLTimeliner/

• SPARQL Timelinerの使い方• http://www.slideshare.net/uedayou/sparql-timeliner-

28905905

• Facebook:SPARQL Timelinerグループ• https://www.facebook.com/groups/1425291001020491/

• GitHub:SPARQL Timeliner• https://github.com/uedayou/SPARQLTimeliner

• SPARQL Timelinerで作られたアプリ一覧• http://uedayou.net/SPARQLTimeliner/apps/

Page 32: ソースコード公開しました!HTML5 x LOD WEBアプリ“SPARQL Timeliner”

• DBpedia日本語版• http://ja.dbpedia.org/

• 日本の大学• http://lod.sfc.keio.ac.jp/challenge2013/show_status.php?id=a

005

• LSJ: Location Site of Japanimation• http://cheese-factory.info/

• 残念な日本地図’90-’99• http://uedayou.net/zannen9x/

• ししょまろはんラボ:京都が出てくる本のデータ• http://libmaro.kyoto.jp/?p=72

• 京都が出てくる本 - SPARQL Timeliner• http://uedayou.net/kyotobooks/

• ヨコハマ・アート・LOD• http://fp.yafjp.org/yokohama_art_lod

• ヨコハマ・アートナビNOW!• http://uedayou.net/yannow/

• 佐賀県橋梁メンテナンスビューア• http://uedayou.net/sagabridge/