こんにちはです。あっちのそららです。
最近勉強しているTypeScriptのアウトプットとして、デジタル時計を作ってみました。
デモページ
acchinosorara.github.io
「Vue.js」というフレームワークを使用。ディスプレイの文字がリアルタイムで更新される、ありきたりな時計です。
文字のデザイン
カクカクしたデジタル時計らしさを出すため、文字はCSSでデザインしました。
参考記事
HTMLで各セグメントを生成し、A～Gの連番を振って配置しました。数字に応じて個々の表示・非表示が切り替わる仕組みです。
例えば、
- 「2」→ C、Fを非表示
- 「4」→ A、D、Eを非表示
- 「7」→ A、B、Cを表示
となります。
全ての数字のパターンを作る必要があり、実装が地味に大変でした。とはいえ、一回作ってしまえば、文字数がいくら増えても使い回せるので、あとが楽です。
多言語対応
蛇足な気もしますが、英語・日本語を切り替えられる仕様にしました。
英語
日本語
アクセシビリティ
視覚障がいの方向けに、スクリーンリーダーによる読み上げもテストしました。こちらも多言語対応です。
といっても、環境やスクリーンリーダーの種類によってはうまく動作しない可能性もあるので、あしからず。
さいごに
github.comソースコードはGitHubで公開しているので、興味のある方は覗いてみてください。実際に公開して動いているのを見ると楽しいものですね。
今後は、ぼちぼち機能拡張もしていきたい。
さて、隠れたバグもあるだろう。
