iPhoneアプリやAndoroidアプリを簡単に開発できるサービス＆ツール「Monaca」をご紹介します。
単発の記事ではご紹介しきれないため、初回である今回は「Monaca入門編・初心者向け」として、アカウント作成からアプリを実機で確認するまでの流れを見ていきます。
アプリを取り巻く開発環境
まずはアプリの開発環境について簡単に触れておきます。
通常、iPhoneやiPadなどのiOSアプリを開発するためにはSwiftというプログラミング言語が使われます。また、Androidアプリ開発ではJava言語が利用されています。ということは、iPhoneアプリとAndroidアプリを両方同時に作成する場合、SwiftとJavaという別々の開発言語を使って、2回プログラミングしなければいけないのか？という疑問が浮かびますが、実際そういうことになります。
しかし、それではアプリ開発に掛かる負担が大きくなるので、1つのプログラムでiOSにもAndroidにも対応させることができる仕組み（クロスプラットフォーム）が生まれました。主にHTML＋CSS＋JavaScriptといったWebの技術を使ってプログラミングを行い、最終的なビルド（アプリの形式に出力する時）だけiOS向け・Android向けと分ける方法です。一般的に「ハイブリッドアプリ」と呼ばれるこの作り方は、Monacaを始めIonicなど様々なアプリ開発サービスで浸透しています。
Monacaとは
Monacaの公式サイトは下記になります。
アシアル株式会社という日本の企業が運営しているサービスですので、サイトやマニュアルも日本語に対応しています。開発関連はどうしても英語のマニュアルが多いので、日本語のマニュアルがあるのは助かります！
…と、前振りが長くなりましたが、それでは実際にMonacaにどのような機能やサービスがあり、何ができるのか？をご紹介していきたいと思います。
Monacaクラウド
Monacaクラウドとは、アプリの開発環境をクラウド上に置き、ブラウザ上でアプリ開発ができるWebサービスのことです。
アプリの開発環境を構築するのは大変なイメージがありますが、ブラウザ一つあれば始めることができるので、Webサイト作成（HTML＋CSS＋JavaScript）の知識さえあればOKです。そのため、入門者や初心者が最初にハイブリットアプリの開発を行うには、まさに最適のサービスです。
また、Cordovaなどの各種プラグインや、JavaScriptのフレームワークなども管理画面（ブラウザ上）から簡単に組み込めるので、コマンドライン（黒い画面）が苦手…という方にもおすすめです！
※今回の記事ではこのMonacaクラウドで実機を動かすところまでをご紹介します（後述）
Monaca for Visual Studio
Monaca for Visual Studioとは、その名の通り、MonacaとVisual Studioを統合した機能です。
Visual Studioは、Microsoftが提供しているソフトウェア開発ツールのことで、業務用アプリ、デスクトップアプリ、モバイル用アプリ…など様々なアプリの開発に利用されています。このVisual Studioを利用してコードを書くことができ、Monaca側がクラウドサービスとしてビルド環境などを提供するイメージになります。
既存のVisual Studio利用者にとってはMonacaクラウド（前述のブラウザベースの開発環境）を利用するよりも、早く便利にアプリ開発を行うことができます。
Monaca Localkit
Monaca Localkitとは、普段使い慣れたエディタ（例えばSublime TextやEclipseやDreamweaver）を使って、ローカル環境でアプリを開発するためのツールです。Monacaクラウドで言う「ブラウザ」を、普段利用している「エディタ」に置き換えて開発できるため、非常に快適な環境環境を構築できます。
更にファイルをGitHubなどのバージョン管理ツールと連携させたり、GruntやGulpと言ったタスクランナーを併用することもできるため、ほとんど普段の開発環境のまま！という感じです。
一番最初はMonacaクラウドを利用して「Monacaとはどのようなものか？」をブラウザでテストしてみて、「これは利用できる！」と判断したら、Monaca Localkitに切り替えることをお勧めします。
Monacaデバッガー
Monacaデバッガーとは、ソースの変更をすぐに実機上で確認できるツール（アプリ）です。もちろん実機特有の機能であるカメラやGPSなど、Cordovaプラグインも動作させることができます。
通常の開発フローですと、変更の確認を行うためには、
- ソースを変更
- ファイルを保存
- アプリ用にビルド
- ビルドしたファイルを実機にインストール
- 実機でアプリを起動して確認
という流れになるのですが、Monacaデバッガーを実機（iPhoneやAndroid）にインストールして、Monacaのアカウントでログインしておくと、
- ソースを変更
- ファイルを保存
- 変更が実機にリアルタイムに反映
というように、自動でライブリロードしてくれるのです！これは超便利です！
Monacaデバッガー（アプリ）はAppStoreやGoogle Playで無料で配布されているので、下記からインストールできます。
その他、モバイルアプリのUIフレームワークとして人気のあるOnsen UIなども、Monacaのツールになります。（今回は長くなるので省略しますが、Onsen UIについてもまた記事を書きたいと思います。）
これらハイブリッドアプリを開発するために提供されている様々なサービスやツールを総称して「Monaca」と呼ばれています。
さて、ここからは実際に「Monacaクラウド」を使ってアプリを作成していく流れ（実機での確認まで）をご紹介していきます。
Monacaのアカウント作成
Monacaにアクセスし、右上の「サインアップ」から新規アカウントの登録を行います。GitHubのアカウントを使ってログインすることもできますし、メールアドレスで新規にアカウントを作成することもできます。
アカウントを作成し、ログインすると、下記のダッシュボードの画面になります。
ダッシュボードでは左側にプロジェクト（作成しているアプリ）のリストが表示されます。新規アカウントを作成した状態では、プロジェクトのリストに「Hello Worldアプリ」というアプリがあるだけです（これはサンプルとして用意されているものです）。
また、ダッシュボードの右側にはMonacaからのお知らせ（ブログやTwitter）が表示されます。
新規プロジェクトの作成
それでは新規プロジェクト（新規アプリ）の作り方を見ていきましょう。まずダッシュボードの左上にある「新規プロジェクトの作成」というボタンをクリックすると、下記のテンプレート選択画面になります。
テンプレート選択画面の上部には、
- サンプルアプリ
- Onsen UI
- Angular 1
- Angular 2
- React
- Ionic
- No Framework
というメニューがあり、まずここで利用するフレームワークを選びます。
上記のキャプチャ画像はMonacaが提供している「Onsen UI」を選んだ状態です。リストにはOnsen UIを利用したテンプレートがいくつか表示されています。
今回は「Onsen UI V2 JS Tabbar」というテンプレートを使ってアプリの開発手順を見ていきましょう。
ブラウザ上でファイルを編集
上記が「Onsen UI V2 JS Tabbar」というテンプレートを追加した状態です。アプリを作成・編集するためには、まず「Onsen UI V2 JS Tabbar」の横にある「開く」というボタンでソースコードを編集する画面を開きます（下記）。
「開く」をクリックすると、ファイルなどの読み込みが始まり、上記の編集画面に移動します。これがMonacaクラウドのベースとなるブラウザ上での編集画面です。左にファイルのフォルダツリーがあり、中央にソースコードを表示するエディタがあります。一番右はアプリのプレビュー画面になっています。
今回はTabbar用のテンプレートを選んだので、プレビュー画面の下に「Tab 1」「Tab 2」というタブが表示されています。このタブをタップ（クリック）すると、ページが切り替わるのが分かると思います。
フォルダツリーの構造
ファイルを編集する前に、フォルダツリーの構造を少し見てみましょう。
最初はフォルダやファイルが多すぎて何がなんだか分からないかもしれませんが、基本的にアプリのベースとなるのが/www/の中にあるファイルです。Webサイト作成時に/www/がルートディレクトリになるイメージと言えば分かるでしょうか。まずアプリを開いた時に、Webサイトと同じように/www/index.htmlが読み込まれます。
この/www/index.htmlを開いてみると（最初から開かれてますが）、プロジェクトのソースがHTML+CSS＋JavaScriptで作成されているのが分かると思います。
ソースコードを編集
それでは/www/index.htmlを編集して、実際にアプリのプレビューに反映されるかどうか確認してみましょう。
「Onsen UI」を利用しているので、最初はタグが何を意味するか分からないと思いますが、とりあえずそれは無視して、下記画像のようにテキスト部分を編集して、保存し、プレビューを確認してみてください。
変更した部分
- 赤枠：
My app - Page 1→My app - Setting - 青枠：
label="Tab 1"→label="Setting" - 緑枠：
This is the first page.→This is the Setting page.
変更した部分が右のプレビュー画面でも変更されれば成功です。これでどのタグがどの部分を表しているかが、何となく分かると思います。
実機（iPhone, Android）にアプリを同期させてデバッグ
Monacaデバッガーをインストール
次に実機（iPhone, Android）でも確認してみましょう。実機で確認するための準備として、まずはiPhoneやAndroidにMonacaデバッガーというアプリをインストールします。
下記はAppStoreにあるMonacaデバッガーです。「Monaca」と検索すると出てきます。
Monacaアカウントでログインし同期させる
Monacaデバッガーアプリをインストールして起動すると、ログイン画面が表示されますので、最初に作成したMonacaのアカウントでログインしましょう。正常にログインして同期できると、下記のようにプロジェクトのリストが表示されます。
ここで「Onsen UI V2 JS Tabbar」をタップするか、PCのブラウザ上にある「実機デバッグ」をクリックすると、実機にプロジェクトファイルが同期され、開発中のアプリが表示されます。
先程編集した「Onsen UI V2 JS Tabbar」をMonacaデバッガーで確認した画面が下記です。ブラウザ上で編集したテキストがちゃんと反映されているのが分かると思います。
※右下にある黒丸は設定用のボタンで、自由に移動できます。ボタンをタップすると設定画面が開きます。
以上、簡単ではありますが、Monacaのアカウント作成から、実機でのアプリ確認までの流れを見てきましたが、いかがだったでしょうか？
iOSアプリやAndroidアプリの開発は確かに難しいですが、Monacaのようにハイブリッドアプリを作成できる環境が整ってきているので、昔に比べると遥かに速く簡単に開発することができるようになりました！
もちろん、その分マーケットに出るアプリの数も増えてますので、ライバルも多いのが実情ですが…
ハイブリッドアプリの作り方や、Monacaによるアプリ開発方法については、今回の記事だけではご紹介しきれませんので、これからも定期的にブログでご紹介していきます！