カテゴリー: Development

https://kozawa.tokyo/apps/4/

温度センサーを移動して日本地図を追加した。妥協の産物だけどしばらくこれでー

備忘：

Simple Custom CSS and JS
https://ja.wordpress.org/plugins/custom-css-js/

そろそろブラウザ上でコードを書くのがしんどくなってきたので今どきのフレームワークを使ってビルド＆デプロイする方法を検討中… WordPress本体に手を入れずにサイドバーを修正しているからメンドクサイことなる。素直にWordPressのウィジェットとして作成するか、別のページにWebアプリ作るかになると思われる。

残課題：
SVGファイルをobjectタグで読み込むとクリックイベントが拾えない。

<style>
	object {
		pointer-events: none;
	}
</style>

https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events

ググってセレクタを変更したり、pointer-eventsの値を変更してみたけれど object > #document > svg > path のイベントが拾えない。イベントリスナーを追加する時点で外部ファイルの読み込みが完了しておらずイベントの発火に失敗していると思われる。

ソースにSVGファイルをベタ書きした。別途継続調査案件。

予報区等GISデータの一覧
https://www.data.jma.go.jp/developer/gis.html

QGISプロジェクトへようこそ!
https://qgis.org/ja/site/

日本の白地図
https://www.kabipan.com/geography/whitemap/

備忘：

予報区等のデータが、シェープファイルで公開されています。
－全国・地方予報区 [ zip形式：481 MB ]
－府県予報区等 [ zip形式：97 MB ]
・・・
府県予報区等のzipを展開すると.dbf、.shp、.shxの3ファイルが現れます。
報区等.dbf：4KB
報区等.shp：155.8MB
報区等.shx：612B
これらの拡張子のファイルは何かという情報を検索して調べました。これらのファイルは、地図データであるシェープファイルということで、シェープファイルを扱えるQGISをインストールしました。QGISは以前、国土地理院の地図を調べたときに使用していましたが、地図ブーム終わった後にアンインストールしてしまいました。
QGISを使用して日本地図を確認しました。この地図を利用しようとして試行錯誤しましたが、うまくいきませんでした。

これはQGISで.shpファイルを表示したときの画面のスクリーンショットです。少し歪んでいるように思います。また、岩手県、瀬戸内海、長崎県の地形が複雑であることが分かると思います。.shpファイルを.svgファイルにエクスポートすると、記憶では27MBほどのサイズでした。しかし、ウェブサイトに公開する際には致命的なサイズであるため、QGISのジオメトリツールを使用して試行錯誤しました。
・「ベクタ」メニュー – 「ジオメトリの簡素化」
・「レイアウト」の「SVGファイルオプション」で「ジオメトリを簡素化してファイルを縮小」
しかし、ウェブコンテンツとして利用できるほどの効果はありませんでした。そのため、QGISで表示している日本地図を画面キャプチャ（上記のPNGファイル）をSVGファイルに変換して、ファイルサイズを圧縮する方法を試しました。
・GIMPの「選択」 – 「選択範囲をパスに」
・Inkspaceの「パス」 – 「ビットマップのトレース」
パラメタを変更してみました。それでも約7MBのファイルサイズとなり、見た目も悪く、県境に空白が生じる結果となりました。
結論としては、岩手県、瀬戸内海、長崎県の海岸周辺は手動で最適化しなければ、全体的なバランスが取れず、ソフトウェアの機能だけでは意図した結果が得られないことが分かりました。
また、QGISで.shpファイルから.svgファイルをエクスポートする場合、属性データ（エリアコード）が.svgファイルに反映されず、.svgファイルを手作業で修正する必要があることも分かりました。これはQt SVGライブラリのバグなのか、QGISの仕様なのかは不明です。

結局、妥協せざるを得ませんでした。

グーグル検索で日本地図のSVGファイルを見つけ、クリエイティブ・コモンズ・ライセンスに基づいて使用することにしました。このSVGファイルは日本の県境が分割されていますが、気象庁の気象データや予報区等とは若干異なるものです。全体的には同様ですが、北海道の分割が明示されている点などが異なります。日本地図、エリアコード、気象データの対応を再確認して修正する必要がありました。

本来、クリックイベントを使用してSVG画像から地域を選択し、気象データを取得して画面に反映するだけのはずが、なぜこんなに複雑になってしまったのか、理解できません。

ChatGPT添削おつおつ

デカすぎてサイドバーに入らん… 縦長ダメやん。

時に関する用語
https://www.jma.go.jp/jma/kishou/know/yougo_hp/toki.html

「朝の最低気温」と用いるときは０時から９時。

JSON
https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json

「朝の最低」バグってる。

9時前に「朝の最低」に「日中の最高」の値が入ってくる。__φ(. . )ﾒﾓﾒﾓ

気象庁の公式API公開して欲しいなー 河野さんはよー