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

サウナタイマーについて
サウナタイマー12分計 Webアプリ
FlutterサンプルからWebアプリ作成

サウナタイマーについて

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

リンク

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

サウナで役立つ!?資格のおすすめ5選

先日、好きなお笑いコンビ「さらば青春の光」のYoutubeで、【転職ダーツ】時間が出来たブクロに資格取得のススメ【○○転職で高給ゲット】という回がありました。その中で「熱波師検定」の紹介もあったことで、ふとサウナ関連の資格の記事を書き...

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

http://blog.aqutpas.com/2016/11/post-b7b6.html

↑コチラの記事を読むことで、なぜサウナタイマーが12分なのかの謎も解けました。複合的な要因でそうなっているんですね。

サウナタイマー、、調べれば調べるほど、より欲しくなってくる。しかし、サウナの高温に耐えられる設計になっているだけあって、少し値段がお高い。普通の時計を改造してサウナタイマーを作れないかなあ、とも考えましたが難易度が高そう。ならばソフトウェア、もしかしてWebアプリでサウナタイマーがあるのでは？と思い調べてみたものの、私が探したところでは見つからず。うーん、だったら自分で作っちゃえ！！！

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

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

スマホだとこんな感じ。

PCだとこんな感じ。

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

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

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

GitHub - conghaonet/flutter_analog_clock: A simple, highly customizable analog clock widget. This widget enables you to customize the clock's background, dial, markings, and hands.

A simple, highly customizable analog clock widget. This widget enables you to customize the clock's background, dial, markings, and hands. - GitHub - congha...

とりあえず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);//時針のコードを参考に変更

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

本記事の続編↓