サウナタイマー12分計 Webアプリ公開(*すぐに使えます)

うちでととのうチャレンジ
スポンサーリンク

サウナタイマーについて

サウナーだったら、やっぱり家でもサウナタイマーが欲しいですよね。こちらのサウナタイマー↓は、日本初のサウナタイマーを開発した株式会社スタックの製品です。カッコいい、部屋に飾りたい。

そこで家でも設置できるか調べてみたのですが、、普通の掛け時計のように乾電池では動かず設置には電気工事士の資格が必要のようです。電気工事会社にお願いするか、自分で電気工事士の資格をゲットするしかないですね。(もし取得したい方は以下の記事↓をご参考ください)

あとサウナーなら、何でサウナタイマーって12分計なんだろう、って一度は疑問に思ったことがありますよね。

 
↑コチラの記事を読むことで、なぜサウナタイマーが12分なのかの謎も解けました。複合的な要因でそうなっているんですね。
 
サウナタイマー、、調べれば調べるほど、より欲しくなってくる。しかし、サウナの高温に耐えられる設計になっているだけあって、少し値段がお高い。普通の時計を改造してサウナタイマーを作れないかなあ、とも考えましたが難易度が高そう。ならばソフトウェア、もしかしてWebアプリでサウナタイマーがあるのでは?と思い調べてみたものの、私が探したところでは見つからず。うーん、だったら自分で作っちゃえ!!!

サウナタイマー12分計 Webアプリ

という訳で今回作成したWebアプリがコチラ。(下の画像をクリック、もしくはコチラから)

スマホだとこんな感じ。

PCだとこんな感じ。

とりあえずiPhoneのSafari、AndroidのChrome、Windows10のChromeとEdgeで動作確認しました。リセットしたい場合は、ブラウザで更新(再読み込み)してください。

FlutterサンプルからWebアプリ作成

今回、面倒くさがりの私にぴったりのFlutterというGoogleが提供している使いやすいフレームワークを利用しました。こちらはiPhoneアプリも、Androidアプリも、Webアプリも、これだけで全部作れる優れもの。しかも既にサンプルでアナログ時計アプリが公開されている!

とりあえずFlutterの使い方はググればたくさん出てくるので、今回はサンプルから変更したところを記述します。

main.dart
ここで数字の大きさ、針の表示・非表示、色なんかを変えてます。

class ClockDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterAnalogClock(
      dateTime: new DateTime.utc(2000, 12, 0),//針をどちらも12から開始
      dialPlateColor: Colors.white,
      hourHandColor: Colors.white,//時間の針を白にすることで見えないようにしている
      minuteHandColor: Colors.black,
      secondHandColor: Colors.red,//赤にすることで12分計ぽくする
      numberColor: Colors.black,
      borderColor: Colors.red,
      tickColor: Colors.white,
      centerPointColor: Colors.red,
      showBorder: true,
      showTicks: true,
      showMinuteHand: true,
      showSecondHand: true,
      showNumber: true,
      borderWidth: 12.0,
      hourNumberScale: 1.5,
      isLive: true,
      width: 200.0,
      height: 200.0,
      decoration: const BoxDecoration(),//これ使って時計の下部に「12分計」のような画像を貼りたかったが、貼ると針の動作が見えなくなった。。なぜ?背景を変えても同じ現象だった
    );
  }
}

flutter_analog_clock_painter.dart
clockのライブラリですが、面倒だったので(オーバーライドせずに)直接書き換えてます。こちらで分針の回る速度を調整してます。

 /// draw minute hand
void _paintMinuteHand(Canvas canvas, double radius, double strokeWidth) {

//double angle = _datetime.minute - 15.0;//オリジナル
double angle = _datetime.minute % 12 + _datetime.second / 60.0 - 3;//時針のコードを参考に変更

//Offset handOffset = Offset(cos(getRadians(angle * 6.0)) * radius,//オリジナル
// sin(getRadians(angle * 6.0)) * radius);//オリジナル
Offset handOffset = Offset(cos(getRadians(angle * 30)) * radius,//時針のコードを参考に変更
sin(getRadians(angle * 30)) * radius);//時針のコードを参考に変更

本当は針の長さを変えたり、時計の背景を木目にしたかったのですが、私の力では対応できなかったので、誰か詳しい方お願いします。今回も最後まで読んで頂いてありがとうございました!

本記事の続編↓

ジャンク品のサウナタイマーを家の掛時計にリメイクしてみた
以前、サウナタイマーのことを調べれば調べるほど部屋に飾りたくなる。けれど高価だし工事が必要だから、代わりにサウナタイマーのwebアプリを作ったよ、という記事↓を書きました。ただ作った本人がいうのもなんですが、あんまり気...

(宣伝)自分たちが欲しくて日常使いできるサウナグッズを企画・制作しております。よろしければどうぞ!↓

RELAX OPEN ENJOY SAUNA - 作品一覧
自分たちが欲しくて、あまり世の中になさそうなものをテーマに、ゆるくて実用的なサウナグッズを販売しております。
このエラーメッセージは WordPress の管理者にだけ表示されます
エラー: アクセストークンが無効か、有効期限が切れています。 フィードは更新されません。
うちでととのうチャレンジサウナプログラミング
スポンサーリンク
matteruをフォローする
matteru

関西在住のサウナー。サウナ施設がおうちから絶妙に遠いため、おうちでもサウナ気分を味わえる方法を模索し本ブログで公開しています。おうちでサウナ気分を高めるべく、普段使いできるようなサウナグッズを夫婦で企画・制作し RELAX OPEN ENJOY SAUNA にてオンライン販売中です 。サウナ・スパ プロフェッショナル、熱波師検定B。twitter、instagramやってます、無言フォロー歓迎!

matteruをフォローする
#うちでととのうチャレンジ

コメント

タイトルとURLをコピーしました