サイバーフライデーと電脳メガネ用西山公園駐車場リアルタイムオープンデータ表示アプリ

2023-03-31

鯖江は良いお天気、さくら日和。最終金曜日のサイバーフライデー、ChatGPT、MINDSTORM、STARLINK、cocorokit+、リアルドラム、VR、陶芸、MTなどがテーマでした。いろんな活動のハブにしていきます。

気になる西山公園の駐車場の空き状況、リアルタイムオープンデータを使った、電脳メガネ用アプリをつくりました！（参考、鯖江市営駐車場満車・空車状況）

「SPV-AR - Sabae Parking View for AR」src on GitHub 黒が透けるMOVERIOや、Nrealのような電脳メガネ用、視界の邪魔にならないように右上に配置。1分置きに最新情報に更新されます。

「code4fukui/parking-view」
鯖江市駐車場リアルオープンデータを使いたい方のためのオープンソースを使います。

つくりかた
1. HTMLを用意します
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="icon" href="data:"> スマホ、faviconスキップにも対応した最近のテンプレート。「ｈｔ」でまとめて単語登録しておくと便利です。

2. HTMLで構造をつくります
リアルタイムオープンデータに対応した2箇所の駐車場名と満空情報を並べて、書き換えが必要なものidを付けておきます。 <main id=main> <span class=name>嚮陽会館前</span><span id=p1 class="value err"></span> <span class=name>ふれあい広場</span><span id=p2 class="value err"></span> </main>

3. CSSでデザインします
gridレイアウト、便利です！ <style> main { display: inline-grid; width: 10em; position: fixed; top: 1em; right: 1em; grid-template-columns: 1fr 1fr; white-space: nowrap; padding: .3em; gap: .3em .3em; } </style>

4. JavaScriptでオープンデータを反映させて、できあがり！
最新情報をAPIで取得して、反映します。ESモジュールはimport文と合わせて追加するだけ、お手軽です。 <script type="module"> import { getParking, updateParking } from "https://code4fukui.github.io/parking-view/parking.js"; const parking = await getParking(); const set = (span, p) => span.className = "value " + (p ? (p.full ? "full" : "hasspc") : "err"); const update = async () => { await updateParking(parking); //console.log(parking); set(p1, parking.find(p => p.name == "嚮陽会館前駐車場")); set(p2, parking.find(p => p.name == "ふれあい広場駐車場")); setTimeout(update, 60 * 1000); }; update(); </script>

5. GitHubにアップして、GitHub Pagesで公開。

西山公園の桜！