⌚
おしゃれな時計のwebアプリを作った
新しく作ったWebアプリの紹介です。
自己紹介
はじめまして、SHIROです。
特技は「車のナンバーを見て四則演算で10を作る」ことです。特技を生かし(?)、10を作る迷路パズルを考案して公開しています。
アプリの紹介
以前見かけた、時間の表示が計算式になっている時計が面白かったので、webサイトとして実装しました。
ググったら、アインシュタインの名前を冠してAlbert Clockという名前で販売しているようです。
本家は計算の難易度が分かれているようですが、とりあえず表示するところまではササっと実装できたので公開してます。
開発メモ
工夫したこと
- デジタル感を出すために、薄い888の上に文字を重ねた。
- デバイスによるフォントサイズ最適化のため、横幅vw と縦幅vh でそれぞれフォントサイズを計算し、はみ出ないように小さいほうを採用するようにした。
- パフォーマンス向上のため、最初に全パターンの計算式を列挙して答えの値ごとに格納しておいて、リフレッシュ毎にランダムに選ぶようにした。
今後やりたこと
- ライトモード（背景白、文字黒など）を実装する。
- 計算式の難易度を選べるようにする。
- 画面の回転の制御を追加する。
← iOSだとうまくいかないっぽい？？ JavaScriptでなんとかできるならしたい。 - スマホのウィジェットとして追加できるようにする。
← webアプリはそんなことできるの？？を調べるところから。
参考にした記事たち
ライブラリ
7セグメント表示のために、けしかんさんが公開しているフォントを利用しました。ありがとうございます！
結局使わなかったけど、最初はこのプラグインを利用しようとしてました。文字色を変えるのはこちらの記事を参考にしました。
デザイン
cssの設定ボタンのデザインはこちらの記事をそのまま利用させていただきました。
最後に
最後まで読んでいただきありがとうございます。
個人的な備忘録ですが、誰か（または未来の自分）の参考になれば幸いです。
アプリもよければ使ってみてください！
Discussion