Cordovaがインストールできたら、実際にプロジェクトを作って動かしてみよう。2015を立ち上げ、メニューバーの[ファイル]−[新規作成]−[プロジェクト]を選ぶと、[新しいプロジェクト]ダイアログが開く。Cordovaのプロジェクトテンプレートが見つかるので、JavaScriptの[空のアプリ]を選び、プロジェクトの名前などを適切に設定して[OK]ボタンをクリックする。日本語の名前を使うとトラブルに遭うことがある。プロジェクト名にも、プロジェクトのパスにも、日本語は使わないようにしよう。Cordovaのインストールが上手くできていない)。その中から、JavaScriptの[空のアプリ]を選択し(中央上部、青色に反転している部分)、プロジェクトの名前/場所/ソリューション名を適切に設定し、[OK]ボタンをクリックする。2015の画面は次の画像のようになっているはずだ。メニューバー直下にある緑色の三角をクリックして、ビルド/デバッグ実行してみよう。(Galaxy)]と表示されている(状況によっては異なるかもしれない)。(Galaxy)」をエミュレーションするという意味だ(後ほど詳述する)。2015メニューバー直下にある緑色の三角(赤丸内)をクリックすると、プロジェクトがビルドされてデバッグ実行が始まる。Rippleエミュレータを初めて実行する場合には、次の画像のようなダイアログが出るはずだ(グーグル製Androidエミュレータでも同様)。そのまま[アクセスを許可する]ボタンをクリックして進めよう。Chromeが立ち上がり、その上のRippleエミュレータでアプリが実行される。Chrome上のRippleエミュレータで実行している。中央にエミュレートしているデバイスが表示され、その中でアプリが動いている(赤枠内)。左右には、さまざまな設定を変更するための項目が並んでいる。Chromeを閉じてデバッグ実行を終了する。Cordovaのプロジェクトはちょっと複雑な構造になっている。一度に全てを理解するのは大変なので、連載の中でそのときに必要な部分だけを紹介していこう。プロジェクトをソリューションエクスプローラーで見ると、次の画像のようになっている。Cordovaのプロジェクト構成wwwフォルダ(赤丸内)の配下が、アプリから直接見える部分だ。アプリ起動時に表示される画面は、index.html/.css/.jsの3ファイル(赤枠内)で構成されている。今回、理解しておきたいのは次の2点だ。wwwフォルダindex.html/.css/.jsファイルwwwフォルダは、Webアプリのルートフォルダに相当する。この中に配置したHTMLファイルなどがアプリとして表示されるのである。アプリからwwwフォルダの上の階層にはアクセスできない。アプリ起動時に表示されるHTMLファイルが、wwwフォルダにあるindex.htmlファイルだ。index.htmlファイルに連携してその見栄えを設定するのが、www\cssフォルダにあるindex.cssファイル。index.htmlファイルに連携してその動作をプログラミングするのが、www\scriptsフォルダにあるindex.jsファイルである。1画面のアプリ(画面遷移しないアプリ)で簡単なものならば、このindex.html/.css/.jsの3つのファイルだけをプログラミングすればよいのである。Cordovaでは他にもさまざまなデバイスでアプリを(デバッグ)実行できる。次ページではどんなデバイスが用意されているかを紹介する。メールマガジンをご購読ください。申し込みページへITmediaはアイティメディア株式会社の登録商標です。