CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

Visual Studioでのプロジェクト作成

 前述の手順で見たように、Monacaはクラウド上にプロジェクトを管理します。そのプロジェクトをVisual Studio上で扱えるようにするためには「インポート」という手順を踏むことになります。

 「ファイル」→「新規作成」→「プロジェクト」を選択します。「新しいプロジェクト」のダイアログで、左のペインより「Monaca」→「Multi-Device Hybrid App」を選択します。作成するプロジェクトの種類として「Import Monaca Project from monaca.io」を選択し、適当な名前を入力したあと、「OK」ボタンをクリックしてください(図10)。今回は「名前」に「HelloWorld」と指定しました。

図10:Monacaのプロジェクトを作成する
図10:Monacaのプロジェクトを作成する

 Monaca for Visual Studioを使用するには、Monacaへのログインが必要です。ログインダイアログ(図11)が表示されたら、Monacaのアカウント情報を入力して「ログイン」をクリックします。

図11:Monacaサービスにログインする
図11:Monacaサービスにログインする

 「プロジェクトの一覧」ダイアログが表示され、クラウド上にあるプロジェクトの一覧が表示されます。今回は「Hello Worldアプリ」を選択し、「インポート」をクリックします(図12)。

図12:「インポート」ダイアログ
図12:「インポート」ダイアログ

 インポートには少し時間がかかります。完了したら、図13のような画面です。

図13:Visual Studioメイン画面
図13:Visual Studioメイン画面

Monaca for Visual Studioの使い方

 Monaca for Visual Studioの使い方を見ていきましょう。まずは、Monaca for Visual Studioが持つ機能について大きく見ていきます。

ソリューションエクスプローラ

 ソリューションエクスプローラには、プロジェクト内のファイルが表示されます。android、chrome、iosフォルダーにはそれぞれOSに依存したファイルが、wwwフォルダーにはアプリケーションの本体ファイルを設置します。wwwフォルダーを展開すると、アプリケーションのスタートポイントであるindex.htmlが存在します(図14)。index.htmlをクリックするとその内容が表示されます。

図14:ソリューションエクスプローラ
図14:ソリューションエクスプローラ

プレビュー

 メニュー「Monaca」→「プレビュー」を選択すると、プレビューペインが表示されます。プレビューを使うと、プロジェクトの内容を簡易的に表示することができます(図15)。

図15:アプリのプレビュー
図15:アプリのプレビュー

アプリ設定とビルド設定

 AndroidやiOSをビルドする時に必要な設定を行います。アプリケーション名の指定や、アイコンやスプラッシュ画像の登録、Cordovaの設定などを指定できます。

 またビルド設定では、ビルドの際に必要となる証明書や暗号化キーの管理を行えます。具体的には、Androidのキーストアの作成や管理、iOSの証明書やプライベートキーの管理を行うことができます。

図16:Androidアプリ設定画面
図16:Androidアプリ設定画面

JS/CSSコンポーネント

 Monacaにはbowerというパッケージマネージャーが組み込まれています。jQueryなどのJavaScriptライブラリーの組み込みは、JS/CSSコンポーネントの機能を使用すると良いでしょう。ただし現時点では既知の問題があり、インストール後にいったんプロジェクトを読み込み直す必要があります。

ドキュメントとチュートリアル

 Monacaは日本語のマニュアルやサンプルアプリが充実しています。「Monaca」→「ドキュメント」でアクセスしてください。


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

著者プロフィール

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

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

バックナンバー

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