HTML・CSS・JSだけで作ったシンプルなデジタル時計アプリ

デジタル時計HTML・CSS・Javascriptさえ知っていればAndroidやiOS用のアプリが作れるサービス「Monaca」を利用して、シンプルなデジタル時計アプリを作りました。

Monacaの練習用に作ったのでなんの変哲もないただのデジタル時計ですが、秒表示がやけにでかいという無駄な特徴があります。

1.アプリのダウンロード

現在はAndroid版のみですが、以下のリンクからダウンロードできます。
「デジタル時計」 Google Play版

2.必要だった知識

HTML

divとspanタグしか使っていません。

CSS

特に変わったプロパティは使っていないのですが、少し工夫したのは「@font-face」でデジタルな書体の読み込みと、「media query」でスマホでもタブレットでも最適なサイズになるように調整したところでしょうか。

Javascript (jQuery)

この時計アプリを作るために「jquery.clock.js」というjqueryプラグインを用意しました。このプラグインを使えば簡単に現在時刻を表示することができます。

jquery.clock.js

3.利用したツール

Monaca

コーディングを終えたアプリをビルドするために使いました。表示チェック用に「Monacaデバッガー」というアプリも用意されており、このアプリを通して制作した自作アプリの表示チェックもできます。

Monaca – HTML5ハイブリッドアプリ開発プラットフォーム

Dreamweaver

いつものようにDreamweaverでコーディングを行いました。Monacaで空のプロジェクトを作成し、一度全プロジェクトファイルをエクスポートしてローカル上で開発しています。

大まかな形になるまではローカル上で制作しChromeで表示チェックを行い、最後にMonacaへアップロードして端末での表示チェックをし完成させました。

Photoshop

アプリのアイコンやスプラッシュ画面、Google Playにアップロードする際に必要なスクリーンショットやプロモーション画像などの作成に使いました。結構面倒くさいです。

Birdfont (フォント編集ツール)

ちょうどいいデジタル風のフォントが見当たらなかったので、「Birdfont」というフォント編集ツールを用いてフリーフォントに手を加えました。今回の開発ではここに一番時間を取られました(^_^;)

Birdfontはツールの動きがとてももっさりしていて全くお勧めできないソフトなのですが、他のソフトではうまくいかず結局このソフトにたどり着きました。自分のWindows環境では「FontForge」「Fontlab」「Glyphr Studio」などでうまくいきませんでした。

Birdfont