JavaScriptを活用して現在時刻を表示する時計アプリを作ろう！

Monacaで作るアニメーションアプリ

前回はボタンをタップしたら反応するだけの単純なアプリを作成しました。今回は簡単なアニメーションを行うサンプルとして、時計アプリを作成したいと思います。

作成するアプリは、現在の時間と日付を表示するものです。数枚の画像で構成されており、1秒ごとに画像を切替えて時刻を表示します。完成したアプリのスクリーンショットを画面1に掲載します。

HTMLとJavaScriptの知識だけで、iPhoneとAndroid向けネイティブアプリが簡単に開発できることがMonacaの特徴です。このサンプルでは、JavaScriptについて少し踏み込んで解説を行います。

【画面1：完成した時計アプリ（iPhoneでの実行結果）】

事前準備

Monacaの会員登録が済んでいない方はMonacaのWebサイトからサインアップを行なってください。現在Monacaは無料で提供されており、ブラウザーとスマートフォン端末さえあれば、誰でもアプリ開発を始められます。

会員登録が完了したら、ダッシュボード画面から新しいプロジェクトを作成します。スケルトンは「最小限のプロジェクト」を選択してください。名前（「時計アプリ」など）と説明文を入力しプロジェクトが作成できたら、「IDEを起動」でMonaca IDEを起動します。

また初めてMonacaを利用する方は、実機上で動作を確認するための「Monacaデバッガー」をインストールしてください。Google PlayやApp Storeから無料でダウンロードすることができます。

手順1：画像パーツをアップロードする

今回の時計アプリでは、画面の背景や数字などに画像を利用しています。これは、端末に内蔵されたフォントだけでデザインを組み立てると、どうしても表現力が限られるためです。この例のように、見栄えが重要な部分には画像を使うと効果的です。

利用する画像は、下記のリンクからダウンロードし、デスクトップ上で解凍してください。

ダウンロード：プロジェクトで利用する画像ファイル一式

Monacaでは、すべてのファイルはクラウド上に管理されます。そのため、まずは画像ファイルをアップロードする手順を説明します。

最初に、画像ファイルを格納するフォルダーを作成します。Monaca IDEの左側に目をやると、エクスプローラのようにファイルの一覧が表示されています。wwwフォルダーを右クリックし「新規フォルダー」をクリックしてください。作成するフォルダー名として”images”と入力し、新しいフォルダーを作成します。

作成された「images」フォルダーを再度右クリックし、「アップロード...」をクリックします。画面の中央に、アップロードダイアログが表示されると思います。アップロード先が「images」フォルダーになっていることを確認し、先ほどダウンロードした画像ファイル一式をドラッグ＆ドロップで転送してください。

【画面2：ファイルのアップロードダイアログ】

すべてのファイルアップロードが終了したら、ファイルのツリーは下記のような画面のようになるはずです。

【画面3：ファイルアップロード後のファイル一覧】

手順2：アップロードした画像を表示してみる

では早速、取り込んだ画像を表示するHTMLを書いてみましょう。ファイル一覧からindex.htmlを開き、下記の通り書き換えてください。

今回、もとのファイルに対して2箇所の変更を加えています。変更した場所は、それぞれ①と②という風にコメントで記載しました。

まだJavaScriptやCSSの記述が残っていますが、先ほどのアップロードの確認も含めて、一度実行しておきましょう。IDE上部のメニューから「プレビュー」をクリックすると、ブラウザー上にプレビュー画面が開き、HTMLをシミュレーション表示することができます。ただ、あくまで簡易的な表示となりますので、正確に動作を再現したい場合は「実行 ▷ デバッガーで実行」をクリックしてください。なお、実行機能を利用するには、先述のMonacaデバッガーをインストール（最新版が必要です）し、同じアカウントでログインしておく必要があります。

【画面4：開発段階の画面（プレビュー）】

さて、index.htmlに加えた修正の説明を行います。①ではJavaScriptのコードを、②ではHTMLに新しいコードを追加しています。

①では、monaca.viewportという関数を用いてビューポート指定を行います。ビューポートとはアプリの仮想的な画面のことです。今回の例では、端末の実際の解像度に関係なく、アプリの横幅を960ピクセルと計算して表示するように定義しています。こうすることで、様々な解像度や画面サイズの端末があったとしても常に横幅が統一され、デザインを統一することが簡単になります。使い方の詳細についてはMonacaビューポート制御のマニュアルを参照してください。

②では、時・分・秒・そして今日の日付を表示するためのHTMLタグを作成しています。これらの数字や日付はcontainerというIDを持つdivタグの中に記述されています。これとは別に、Monacaのロゴをimgタグで張り付けています。ロゴはimgタグとstyle属性を用いて、画面の左上から40ピクセルの位置に表示しています。

数字はすべて０が読み込まれており、figureというクラスがセットされています。数字は2桁ずつ並びながら、コロンで区切られます。後ほどJavaScriptを用いて、これらの数字を現在の時刻に置き換えていきます。

手順3：スタイルシートを適用する

まずはデザインを調整してみましょう。そのために、index.htmlにスタイルシートを追記します。

スタイルシートは、

追記したら、再度プレビューやデバッガー上で画面を確認してみましょう。やはりスタイルが適用されたら、ぐんとアプリらしくなりますね。

スタイルシートについては説明の解説を省略します。利用しているプロパティはどれも一般的なものなので、ぜひ理解しておくと良いでしょう。

【画面5：スタイル適用後の画面】

手順4：プログラムコードを記述する

総仕上げとして、現在時刻を表示するプログラムを作成します。下記のscriptタグを、headタグの中に記述してください。

記述が終わったら、早速動かしてみましょう。横長の時計ですので、端末を横画面にして確認すると良いでしょう。プレビュー画面上でも、デバッガー上でも、問題なく動いたでしょうか？

もしエラーが出る場合は、その内容から原因を調査します。慣れないうちは難しいかもしれませんが、JavaScriptのエラーはMonaca IDE下側「Console」という箇所に出力されます。エラーメッセージを手がかりに、スペルミスや半角・全角の間違い、クォテーションのつけ忘れなどを確認してください。

【画面6：実行結果（Android）】

プログラムコードの解説

今回のプログラムの重要なポイントは、setIntervalという関数を用いて1秒毎に同じ関数を呼び出す仕組みにあります。具体的には、プログラム最後の①と記述された箇所となります。実は、この箇所を除く部分はすべて関数定義となっており、プログラムの実行時はsetInterval関数だけが呼び出されます。setInterval関数では引数を2つ取り、それぞれ定期的に呼び出す関数と、その間隔をミリ秒で指定します。そのため、本例ではclock関数が、1秒間隔で呼び出されることになります。

次にclock関数（②と記述された部分）を見ていきます。まず③で、先ほどHTML内に指定したfigureというクラス名を持つ、すべてのDOM要素を取得します。DOM要素とは、DOM Elementオブジェクトとも呼ばれているもので、簡単に説明するとHTML内の各タグ（要素と言います）をJavaScriptで扱うための仕組みです。

今回の例では、document.getElementsByClassNameという組み込みのJavaScript関数を実行することで、引数とマッチしたクラス名を持つすべての要素をHTML内から検索してくれます。先ほどのHTMLと見比べてみると分かりますが、figureというクラス名を持つのは、数字を表示するために用意された８つのimgタグです。これらが配列形式として取得され、figuresという名前の変数にセットされます。

同様に④ではdocument.getElementById関数を用いて、指定したIDを持つHTML要素（今回の例ではdate）を取得します。HTMLでは同じIDを持つ要素を複数持つことは許されませんので、こちらは配列ではなく1つのDOM要素がdate変数にセットされることになります。

⑤では現在時刻を得るためにDateオブジェクトを作成し、now変数にセットしています。Dateオブジェクトには日付に関する様々な組み込みの関数が用意されています。⑥から⑧では、それらを駆使して時刻を取得し、画像や文字列に変換しています。Date関数の詳細についてはMDNのDateオブジェクトの解説を参考にすると良いでしょう。

最後に

今回のサンプルは、HTMLとJavaScriptそしてCSSを組み合わせて時計アプリを構成しています。どれも難しいテクニックは使っていませんが、その書き方は人により癖があるものです。自分が読みやすいようにソースコードを書き換えたり、コメントを追加したりしながら、テクニックを学んでいただけると幸いです。

次回もMonacaを用いた簡単なアプリの作成と解説を行います。お楽しみに！