福野泰介の一日一創

「越前市 国高地区 地域安全マップ」
印刷レイアウトにも対応！ 2021年度版のデータも追記、完了。場所ごとのデータ、アイコンデータはいつでも差し替え可能です。 位置情報を表すGeo3x3は、緯度経度地図で調べて、CSVに記載します。 分かりやすいインターフェイスを作れるともっと便利になりますね。

「越前市 国高地区 地域安全マップ」(src on GitHub)
地域の安全マップ、みなさんのまちにもいかがでしょう？

今回のJavaScript開発、3つのポイント。

1. qr-codeタグ
HTML内に <qr-code></qr-code> と入れるだけでそのサイトのURLを表示できます。new QRCode()でエレメント追加でもOK!

2. fetchImage
awaitを使って画像の読み込みを同期的に処理できます。コールバックを使わないのでネストが深くならずシンプルにかけて便利です。

3. CSSの @media print
印刷時のレイアウトをCSSで指定できます。

求む、中高生、高先生、社会人 Code for FUKUI デベロッパー！
気になるリポジトリのIssuesへの書き込み、プルリク、お気軽にどうぞ！
2021-07-30金18:30-22:00開催「サイバーフライデー」はオフライン活動の日です。