Hello Worldアプリの修正
実際の開発プロセスを体験するために、index.htmlに簡単な修正を行ってみましょう。まずはソリューションエクスプローラからindex.htmlを開きます。
index.htmlにはアプリケーションの起動画面が記述されています（リスト1）。JavaScriptは最小限のものしかなく、ドキュメントにイベントリスナーを追加するためのdocument.addEventListener()関数を呼び出す部分と、その際に呼ばれるonDeviceReady()関数の定義が存在します。ここで使われているdevicereadyというイベントは、アプリの初期化が完了した際に呼ばれるイベントです。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
// PhoneGap event handler
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("PhoneGap is ready");
}
</script>
</head>
<body>
<h1>HelloWorld!</h1>
<a class="button--large" href="phonegap-demo.html">Start Demo</a>
</body>
</html>
ここでは見出しの文字色を赤色に変更してみましょう。そのために、下記のように修正を加えます。
<h1>Welcome to Monaca!</h1> ↓ <h1 style="color: red">Welcome to Monaca!</h1>
デバッガー上でアプリを実行していると、保存したらすぐに再読み込みが行われます。
デバッグパネルを使う
「Monaca」→「デバッグパネル」を選択すると、デバッグパネルが表示されます。デバッグパネルには、デバッガーから送られるデバッグ情報が表示されます。デバッグパネルには、Elements、Resources、Network、Timeline、Consoleの5つのタブと、右側にデバイス選択コントロールがあります（図17）。
デバッガーがプロジェクトを実行すると、デバッグパネルにデバイス名が表示されます。その状態で「Elements」をクリックすると、現在のページのDOMツリーが表示され、内容を編集したりCSSのプロパティを変更したりすることができます。「Console」をクリックすると、コンソール情報が表示されます。
残念ながら、Visual Studioの画面からブレークポイントをセットしたり、ステップ実行などの操作には対応していません。これらの高度なデバッグを使用するには、USBデバッグを有効にする必要があります。USBデバッグについての詳細は、「Monacaアプリのデバッグ」を参照してください。
ビルド
作成したアプリをストアに掲載したり、配布を行ったりするには、ビルドを行います。ビルドにはデバッグビルドやリリースビルドなど、いくつかの種類があります。また、iOSでは実機に転送するためにiOS Developer Programに加入する必要があります。ここでは簡単にビルドができるAndroid向けデバッグビルドを紹介します。
ビルドを行うには、「ビルド」から「Hello Worldアプリのビルド」を選択します。すると「プロジェクトのビルド」ダイアログが表示されますので、「Android」を選択してください（図18）。
「Androidアプリケーションのビルド」画面では、「デバッグビルド」を選択します。「次へ」をクリックすると、クラウド側でビルドが開始されます。ビルドが完了するまで、数分がかかります。完了したら「ビルドが成功しました」画面が表示されますので、画面の指示に従いビルドされたパッケージを保存します（図19）。詳しくはドキュメントを参考にすると良いでしょう。
本格アプリを開発するために
本稿では駆け足でMonaca for Visual Studioの紹介を行いました。このツールを使うと、Visual Studioのパワフルな機能を用いて、HTML5ハイブリッドアプリの開発ができるようになります。
それでは、本格的なネイティブアプリの開発はどのように進めていくと良いのでしょうか。Webサイトと同じHTMLやJavaScriptと言えども、ネイティブアプリのルック＆フィールを持つUIを構築するためには、専用のフレームワークを使用することを推奨します。
Onsen UI
高品質なモバイルUIを作成するためのライブラリーで、オープンソースで提供されています。開発はMonaca for Visual Studioと同じ、アシアルが行っています。
Onsen UIを使うと、ネイティブアプリと同様のUIコンポーネントをアプリに組み込むことができます。提供されるコンポーネントは、ボタンなどのパーツから、ナビゲーションやスライドメニューといった画面遷移を担うようなものまで多様です。
Monaca for Visual Studioでも、新しいプロジェクトを作成する時にOnsen UIのテンプレートを使用することができます。Onsen UIに関する詳細は公式Webサイトを参考にしてください。
HTML5ハイブリッドアプリのサンプルとチュートリアル
Monacaのドキュメントでは、いろいろなサンプルアプリが掲載されています。ゲームやSNS連携、Onsen UIを用いたモバイルUIなど、モバイルアプリ開発の実践情報として参考になるでしょう。
Monaca公式ガイドブック
2月18日にMonacaの公式ガイドブックが発売となります。Monacaの使い方から実践的なアプリの開発まで、サンプルアプリの開発を通じて深く説明が行われています。
Visual Studio クロス プラットフォーム開発では、Monaca for Visual Studio をはじめ、Visual Studio 自体のクロス プラットフォーム開発機能やXamarin、利用ユーザーの声等をご紹介しており皆様のクロス プラットフォーム開発の参考になるでしょう。
