天気予報つき時計(製作途中) by ritsuka
ブラウザ上でJavascriptのみで動きます。
スマホでの全画面起動対応(アプリのように扱えます)。
設定を選択して下さい
1.[天気予報]予報地域
※ カッコ内は気温予想地点
※ 週間予報はこれより広い府県予報区単位(自動設定)
2.[画面]縦横比・天気予報の内容




3.[画面]デザイン
※ 時計の秒をタッチで切換可
(タッチで一時的に変えた設定は保存されません)
4.[時計]時刻表示の方法
※ 時計のAM/PMをタッチで切換可
5.[時計]時と分の間にあるコロンの点滅
※ 時計のコロンをタッチで切換可
6.[時計]一桁の数字の頭のゼロ
※ 分・秒には常にゼロがつきます
※ 時計の時をタッチで切換可
7.[画面]デバッグ表示
《ここに時計へのリンクが表示されます》
スマホでアプリのように全画面起動する方法
iPhone/iPadのSafari、AndroidのChromeで時計ページを表示して、ブラウザのメニューから「ホーム画面に追加」を選択して下さい。
※ ホーム画面に出来たアイコンをタッチすると、普通のスマホアプリのように全画面表示で起動されます(PWA対応)。
※ Androidでは自動的に横長表示になります。iPhone/iPadでは自分で画面の方向を変える必要があります。
※ 最上部のステータスバーは、iPhoneの横長表示では非表示になりますがiPadではおそらく消すことは出来ません。
※ ホームボタンのないiPhone/iPad(iPhone Xなど)では、画面下部にホームインジケーターが常時表示されたままになります。これを消すにはアクセスガイドを使うのがおすすめです(スワイプして何度かアプリを切り替えると消えることもあります)。
時計画面の操作方法
説明
天気予報表示つきの時計です。
※ まだ未完成のサンプルで、日々仕様が変わります。不具合がある可能性があります。
※ Raspberry Piと中古モニタを使って時計にしようと思って自分用に作り始めたもので、今のところまだ縦横比5:4の画面用のデザインしかありません。
予報データは、気象庁の予報JSONファイルを1時間に1回更新チェックして表示します。
※ 時計画面の「気象庁データ」部分をクリック(タッチ)することで強制再取得できます(前回の取得から60秒以上経過している場合に限る)。
※ 毎時0分[0-59]秒にチェックします。負荷がある一瞬に集中することを防ぐため、秒部分はランダムな値をとります。
※ 表示に使うブラウザの実装によりますが、前回取得したキャッシュがある場合にはその更新日時をつけて気象庁のサーバに問い合わせます。データが未変更の場合、サーバは更新されていないという返答のみをし実データを送り返しませんので、負荷はある程度軽くすみます。
※ ネットワークに接続されているにもかかわらず気象庁のJSONファイル取得に24回連続で失敗した場合、安全のためそれ以降データ取得を停止します(データ配布元URLや形式が変わった後に未修正のまま使い続けられたようなケースを想定しています。リロードで一旦解除されます)。
表示される時刻の正確性は表示に使うPCやスマホの時刻に依存します。
※ 時計部分の日時は表示するデバイスに設定されている地方時(日本で使っているPCやスマホの場合、通常は日本時間)です。
※ 天気予報の日時は日本時間に基づいた表示です。
この時計には以下のフォントをWebフォントとして使用しています。
JavascriptとCSSだけでこの時計をデザインすることは、これらのフォントの存在なしにはできませんでした。
DSEG(けしかん様制作):LEDセグメント風の英数字・天気マーク部分に使っています
Licensed under SIL Open Font License 1.1 © 2020 keshikan
機械彫刻用標準書体フォント(Kim様制作):機械彫刻風の白色文字部分に使っています
※ 不足している字種を追加する改変を加えています。( 時高温降象最週●○《》℃ ) (added 12 glyphs by ritsuka)
© 2020 kim
KHドットフォント小伝馬町16(Font Silo 平木敬太郎様制作):ドット式電光掲示風部分に使っています
Licensed under SIL Open Font License 1.1 © 1990-2015 Keitarou Hiraki, Font Silo
履歴
2021-11-04 週間予報の地域細分の季節変動に対応
2021-07-07 12時制表示で0時表記だけでなく12時表記を選択可能になりました
2021-06-28 カラーセット切換のためのタッチエリアを曜日から秒に変更
2021-06-28 時計デザインの修正
2021-06-18 時計デザインの追加・修正
2021-06-18 予報データを強制再取得出来るようになりました
2021-06-16 時計画面をタッチして設定切換が出来るようになりました
2021-06-16 カラーセット切換対応(カラーLED風以外に液晶風・蛍光表示管風などの表示が出来るようになりました)
2021-06-15 PWA対応(スマホでホーム画面に追加することでアプリのように起動できるようになりました)
2021-06-07 ブラウザ画面サイズにあわせ縦横比率を保ったまま拡大縮小表示されるように変更
2021-05-26 公開

INDEX

twitter: @ritsukaPya