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

Vueはじめのいっぽの続きとして、読み込んだJSONデータからのオフライン検索(フィルター)を追加する step7 と、実践的に橋梁オープンデータをSPARQL取得する step8 を追加!

SAPRQLで取得した鯖江市の橋梁オープンデータ
鯖江市の攻めたオープンデータ、管理する全423の橋梁がオープンデータとして、橋梁名、工法、大きさ、緯度経度などが5つ星オープンデータとして公開され、web標準のAPI、SPARQLで取得できます。

こちら、取得SPARQLのテンプレート

prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> prefix geo: <http://www.w3.org/2003/01/geo/wgs84_pos#> prefix jrrk: <http://purl.org/jrrk#> prefix ipc: <http://www.ipc-pacific.com/ipc/> select ?uri ?name ?lat ?lng ?year ?stype ?desc ?route { ?uri rdf:type <%type%>; <%name%> ?name; ipc:bridgeNumber ?num; ipc:structureType ?stype; geo:lat ?lat; geo:long ?lng. optional { ?uri ipc:buildYear ?year. } optional { ?uri ipc:underBridgeDescription ?desc. } optional { ?uri ipc:route ?route. } filter(?lat < %latmax% && ?lat > %latmin% && ?lng < %lngmax% && ?lng > %lngmin%) filter(lang(?name) = 'ja') }

Vue.jsを使えば、データを画面に美しく反映できます。データ1行の表示部分はこのようになってます

<tr> <td><a v-bind:href="uri">{{ name }}</a></td> <td>{{ route }}</td> <td>{{ stype }}</td> </td><td>{{ year }}年</td> <td>{{ lat }},{{ lng }}</td> <td>{{ desc }}</td> </tr>'

書きやすい!


Vue.js はじめのいっぽ
step1 から、順にソースを見ながら、一歩ずつ試していったり、やりたいことに近いものから逆順に辿ったり、ご自由にご活用ください。

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