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

手順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：スタイル適用後の画面】