福井県観光連盟によるイベント情報と、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)

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