健次アシアル株式会社TweetMonacaで作るアニメーションアプリ前回はボタンをタップしたら反応するだけの単純なアプリを作成しました。今回は簡単なアニメーションを行うサンプルとして、時計アプリを作成したいと思います。作成するアプリは、現在の時間と日付を表示するものです。数枚の画像で構成されており、1秒ごとに画像を切替えて時刻を表示します。完成したアプリのスクリーンショットを画面1に掲載します。HTMLとJavaScriptの知識だけで、iPhoneとAndroid向けネイティブアプリが簡単に開発できることがMonacaの特徴です。このサンプルでは、JavaScriptについて少し踏み込んで解説を行います。事前準備Monacaの会員登録が済んでいない方はMonacaのWebサイトからサインアップを行なってください。現在Monacaは無料で提供されており、ブラウザーとスマートフォン端末さえあれば、誰でもアプリ開発を始められます。会員登録が完了したら、ダッシュボード画面から新しいプロジェクトを作成します。スケルトンは「最小限のプロジェクト」を選択してください。Monacaを利用する方は、実機上で動作を確認するための「Monacaデバッガー」をインストールしてください。Storeから無料でダウンロードすることができます。手順1:画像パーツをアップロードする今回の時計アプリでは、画面の背景や数字などに画像を利用しています。これは、端末に内蔵されたフォントだけでデザインを組み立てると、どうしても表現力が限られるためです。この例のように、見栄えが重要な部分には画像を使うと効果的です。利用する画像は、下記のリンクからダウンロードし、デスクトップ上で解凍してください。ダウンロード:プロジェクトで利用する画像ファイル一式Monacaでは、すべてのファイルはクラウド上に管理されます。そのため、まずは画像ファイルをアップロードする手順を説明します。最初に、画像ファイルを格納するフォルダーを作成します。IDEの左側に目をやると、エクスプローラのようにファイルの一覧が表示されています。wwwフォルダーを右クリックし「新規フォルダー」をクリックしてください。作成するフォルダー名として”images”と入力し、新しいフォルダーを作成します。作成された「images」フォルダーを再度右クリックし、「アップロード...」をクリックします。画面の中央に、アップロードダイアログが表示されると思います。アップロード先が「images」フォルダーになっていることを確認し、先ほどダウンロードした画像ファイル一式をドラッグ&ドロップで転送してください。【画面2:ファイルのアップロードダイアログ】すべてのファイルアップロードが終了したら、ファイルのツリーは下記のような画面のようになるはずです。この著者の記事一覧1980年生まれ。大学時代の専攻は、ドイツ語(ドイツに半年ほど留学)と映像制作(ドキュメンタリー)。独学でWebデザインを学び、大学卒業後は制作会社やコンテンツポータル会社で、主にWebデザイナー/HTML・CSSコーダーとして勤務。2010年から、アシアルにてWebディレクター/Webデザイナーとして、日々精進している。この著者の記事一覧PHPとモバイルの開発を得意としたテクノロジーベンチャー。システムの開発に留まらずさまざまなサービスを展開している。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。