Clock & Alarm

概要

• サイト名：Clock & Alarm
• URL：https://clock.bigbell.dev/
• 機能：時計＆アラーム

制作経緯

私は朝寝起きがとても悪いため、これを改善するべく制作を行いました。 毎朝、スマートフォンと時計の２つのアラームを使用していますが、毎回同じアラーム音を聞いていると段々慣れてしまい、アラームがなっても無意識に止めてしまっていることがあります。 そこで、「簡単にアラーム音を変えられる」を目標にし、通常のアラーム音だけでなく、Youtubeなどの動画配信サイトをアラーム音の代わりに使用できれば、その問題を解決できるのではと考え作成を行いました。

画面構成

全体のレイアウト

Clock & Alarmは上部に今日の日付と時間、下部にアラームの設定画面を表示するレイアウトになっています。 画面の解像度や表示倍率に依存しますが、Macで開いた時は時計部分だけが表示されるようにレイアウトを工夫してあります。

時計画面

アラーム設定画面

モード選択ボタン

ここのラジオボタンで設定時刻になった時に規定のアラーム音を流すのか、ユーザーが指定したYoutubeなどの音を流すのかを設定できます。

アラーム時刻設定

ここではアラーム時刻の設定をできます。プルダウンメニューで時刻を選択できるようにし、設定しやすくしています。

アラームサイト設定

ここでは設定した時刻になった時にどこのWebサイトを開くか設定できます。

動作説明