福野泰介の一日一創

福井県観光連盟によるイベント情報と、Code for FUKUIのイベントを混ぜて、CSVオープンデータ化し、アプリにしました。

「イベント福井」
どの語彙を使うか迷うところですが、政府CIOポータルの「標準ガイドライン群」にある「行政サービス・データ連携モデル　イベントデータモデル（β版）」と「共通語彙基盤」をベースに日本語で設定しました。
「event_fukui.csv」

ひとまずシンプルに並べて表示するこのアプリ、CSSとJavaScriptが中心のHTML1ファイル

- CSSのflexレイアウトを使用して、タイル状に並べています
- 横幅に合わせてレスポンシブに横に並べる数を変えるmedia queryを書きました
- 画像のアスペクト比を固定する aspect-ratio: 16 / 9 と、いい感じにクロップしてくれる object-fit: cover が便利です
- キーカラーにCSS変数を使っているので、イメチェンも簡単です

forkしていろいろ遊んでみてください。イベント情報の追加プルリクもOKです！
(code4fukui / event_fukui src on GitHub)

HTMLをスクレイピングしてCSVデータ化するJavaScript/Denoコードと共にGitHub Pagesでオープンデータ公開しているリポジトリはこちら。
(code4fukui / event_fukui_data - src on GitHub)