26. Vue.jsを使用した時計

Vue.jsを使ってブラウザで表示する時計を作ってみた。
意外と簡単に出来てしまったので、付加機能として、祝日と六曜の表示と室内と屋外の温湿度も表示するようにした。

機能概要：

  1. 年月日と曜日の表示
  2. 曜日で土曜日は青色、日曜日は赤色で表示
  3. 六曜の表示
  4. 祝日を赤色で表示
  5. 時分秒を1秒毎に更新表示
  6. 室内温湿度気圧の定期的に更新表示
  7. 屋外温湿度気圧と風情報の定期的に更新表示
  8. radiko再生(2020/04/15追加)

●表示用html
vue.jsを利用して、定期的に表示情報を更新している。六曜、祝日と温湿度情報はサーバ(raspi)側PHPより得る。

{{ item1 }}

●サーバ(raspi)側情報収集php
祝日は内閣府の情報を利用するので、令和元年や東京オリンピック年(2020)のように祝日が変動しても対応できる。
六曜は、旧暦の月日で簡単に算出できることが分かったが、旧暦の計算方法を調べたら、かなり複雑で精度が求められるようなので、webサイトから出来合いのデータを探して、'かわうそ'さんの「こよみのページ」から10年分のデータをcsvファイルで作成し使用。
室内の温湿度は既に作成したプログラム('comfort')からデータ取得し、屋外はWeatherNewsのデータを利用している。

{{ item2 }}

●radiko機能
radikoの選局後、ラジオ画像ボタンを押すとraspi側でradikoが再生され、ボタンがcssを利用したアニメーションで動き出すように作成した。

{{ item3 }}

【参考】

  1. 「国民の祝日」について
  2. こよみのページ
  3. 旧暦から求める六曜
  4. 応用69.要素の移動、回転、変形（transform）
  5. CSS3 アニメーション
このページは"Vue.js"を利用してみました。
2020/04/15(2020/03/26)