福野泰介の一日一創 - create every day

オープンデータ避難所ナビアプリをつくってみるハンズオン勉強会 はじめてのJavaScript+SPARQL

2015/12/14
#js #SPARQL #opendata 

福井県システム工業会(FAS)オープンデータ委員会主催、VLED支援のハンズオン勉強会を開催。 JavaScriptもSPARQLも経験ほぼ0の19名が参加し、現在位置付近の避難所を表示し、その場所までナビするWebアプリを開発、カスタマイズまで行う2時間。 勉強になった、アプリをつくりたくなったなど、うれしい声多数いただきました!

2016.1.23(土)のハッカソン(賞金付き!?)と、2016.3.5のオープンデータデイに向けて、ぜひあれこれ創ってみてください!

こちら、今回の資料です。(プログラム一式のダウンロードはこちら

HTMLの超初歩(map0.html)からスタートし、オープンデータを表示してみる(map8.html)、そしてナビアプリ(map12.html)へと、ひとつずつHTMLやCSS、JavaScript、SPARQLをなぞりながら進めていきました。


参考アプリ「観光オープンデータへのナビ(仮
いろいろ自由に書き換えるオープンソースなベースアプリです

例えば、アイコン画像、icon.png と書いてあるJavaScriptのプログラム、icon_d.png へと変更すると、この通り。

アイコンを変えるだけでがらっと印象が変わります。いろいろカスタマイズしてみましょう!

リアルタイムオープンデータ、河川の水位を使ったアプリづくりハンズオン資料もJavaScrit&SPARQLの復習にどうぞ!

SPARQLのオススメ本!

補足
※ 動かない時の対処方法:Chromeではデベロッパーツール、Safariでは開発メニュー(環境設定、詳細、開発メニュー表示をチェック)、IEではF12
※ Windowsで展開した時にできた余計なフォルダをなくしました
※ 資料にSPARQLKnocker追加など、若干加筆しています
※ SPARQLの解説はもっと分かりやすくしたい(参考、イベントアプリ統計アプリiPhoneアプリへの組み込み

Tweet
クリエイティブ・コモンズ・ライセンス
この作品は「Creative Commons — CC BY 4.0」の下に提供されています。
CC BY 福野泰介 - Taisuke Fukuno / @taisukef / high-res profile image