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

手順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を用いた簡単なアプリの作成と解説を行います。お楽しみに！