CodeZine(コードジン)

特集ページ一覧

Visual Studio“だけ”でiOSとAndroidアプリが作れる「Monaca for Visual Studio」

さらに使いやすく便利になった「Visual Studio」を始めよう! 第5回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

Hello Worldアプリの修正

 実際の開発プロセスを体験するために、index.htmlに簡単な修正を行ってみましょう。まずはソリューションエクスプローラからindex.htmlを開きます。

 index.htmlにはアプリケーションの起動画面が記述されています(リスト1)。JavaScriptは最小限のものしかなく、ドキュメントにイベントリスナーを追加するためのdocument.addEventListener()関数を呼び出す部分と、その際に呼ばれるonDeviceReady()関数の定義が存在します。ここで使われているdevicereadyというイベントは、アプリの初期化が完了した際に呼ばれるイベントです。

リスト1:index.htmlの内容
<!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)。

図17:デバッグパネル
図17:デバッグパネル

 デバッガーがプロジェクトを実行すると、デバッグパネルにデバイス名が表示されます。その状態で「Elements」をクリックすると、現在のページのDOMツリーが表示され、内容を編集したりCSSのプロパティを変更したりすることができます。「Console」をクリックすると、コンソール情報が表示されます。

 残念ながら、Visual Studioの画面からブレークポイントをセットしたり、ステップ実行などの操作には対応していません。これらの高度なデバッグを使用するには、USBデバッグを有効にする必要があります。USBデバッグについての詳細は、「Monacaアプリのデバッグ」を参照してください。

ビルド

 作成したアプリをストアに掲載したり、配布を行ったりするには、ビルドを行います。ビルドにはデバッグビルドやリリースビルドなど、いくつかの種類があります。また、iOSでは実機に転送するためにiOS Developer Programに加入する必要があります。ここでは簡単にビルドができるAndroid向けデバッグビルドを紹介します。

 ビルドを行うには、「ビルド」から「Hello Worldアプリのビルド」を選択します。すると「プロジェクトのビルド」ダイアログが表示されますので、「Android」を選択してください(図18)。

図18:Androidアプリのビルド画面
図18:Androidアプリのビルド画面

 「Androidアプリケーションのビルド」画面では、「デバッグビルド」を選択します。「次へ」をクリックすると、クラウド側でビルドが開始されます。ビルドが完了するまで、数分がかかります。完了したら「ビルドが成功しました」画面が表示されますので、画面の指示に従いビルドされたパッケージを保存します(図19)。詳しくはドキュメントを参考にすると良いでしょう。

図19: ビルド成功画面
図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 クロス プラットフォーム開発の最新情報はこちら

 Visual Studio クロス プラットフォーム開発では、Monaca for Visual Studio をはじめ、Visual Studio 自体のクロス プラットフォーム開発機能やXamarin、利用ユーザーの声等をご紹介しており皆様のクロス プラットフォーム開発の参考になるでしょう。



  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 田中 正裕(アシアル株式会社)(タナカ マサヒロ)

    アシアル株式会社&nbsp;代表取締役社長。 ユーザーインタフェース設計からインフラストラクチャー構築まで、最先端の技術を駆使したシステム構築を手がける。特にPHPをはじめとするOSSや、HTML5やJavaScriptといったオープンなアーキテクチャーを用いたシステムの構築に尽力している。モバイ...

バックナンバー

連載:さらに使いやすく便利になった「Visual Studio」を始めよう!
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5