Cordovaとは
Cordova（旧PhoneGap）は、HTML5/CSS/JavaScriptといったWebのクライアントサイド技術でモバイルアプリを制作するためのフレームワークです。
通常、iOSやAndroidのアプリ開発には以下のように異なるネイティブ言語と開発環境を利用しなければなりません。
| OS | ネイティブ言語 | 開発環境 |
|---|---|---|
| iOS | Objective-CまたはSwift | Mac OSとXcode |
| Android | Java | Android Studio |
そこで、プラットフォームに依存しないアプリを制作するための手法として、最近注目を浴びているのがCordovaです。
Cordovaでは、HTML5で作成したソースコードをWebView上で実行する仕組みにより、 ワンソースでマルチプラットフォームに対応したアプリを制作することができます。
また、ネイティブコードからしか実行することができない、 カメラやコンパスなどの端末固有の機能へのインターフェイスも提供されています。 これにより開発者はネイティブコードを意識せずに、 Web技術だけでネイティブアプリと同等の機能を実装することができます。
標準的なWebの技術を利用するので、Webアプリを開発する感覚で手軽にモバイルアプリを開発できます。 jQueryやBackbone、Angular、ReactなどのWebエンジニアの方にとって使い慣れたJSフレームワークを組み合わせることができるのも魅力の一つです。
Monacaとは
Cordovaアプリを開発するために特化した統合開発環境です。 クラウド/ローカルのどちらでも開発を行うことが可能で、アプリ開発のための強力なデバッグツールが用意されています。 日本語のドキュメントも充実しています。
Monacaで作成できるアプリの特徴
- iOS/Androidの両方に対応
- ストアへの公開
- 端末へのインストール
- カメラ、コンパスなどのネイティブ機能の実行
- ただし、提供されているのは標準的な機能を実行するAPIのみ
- プッシュ通知やアプリ内課金などの機能を利用するには別途プラグインが必要
Monacaによるアプリ開発
今回は、最も簡単に開発をはじめることができるクラウドIDEの利用方法を紹介します。
Monaca公式サイトにアクセスし、アカウント登録をします。
初回チュートリアルとして用意されている「Hello Worldアプリ」というプロジェクトを開くと以下のような画面が表示されます。
画面右側にプレビューが表示されていますが、より精度の高い動作検証を行うために、 実機上でアプリをシミュレートすることが可能な「Monacaデバッガー」アプリが用意されています。
App StoreまたはGoogle Playで「monaca」で検索し、検証端末にインストールを行ってください。
Monacaのアカウントでログインすると、クラウド上のソースコードがダウンロードされ、実機上でのシミュレートが開始されます。
Monacaデバッガーを起動した状態でソースコードを編集すると、リアルタイムに同期が行われます。
index.html 20行目を以下のように変更
変更前
<h1>Welcome to Monaca!</h1>
変更後
<h1>Welcome to ギャップロ!</h1>
実行結果
このように、クラウドIDEで編集した結果をMonacaデバッガーで確認しながら開発を進めて行きます。
ネイティブ機能の利用
アプリ内でネイティブ機能を利用するには、JavaScriptでCordovaのAPIをコールします。
Monacaデバッガー上で「Start Demo」ボタンをタップすると、 Cordovaから標準で提供されているネイティブAPIの一覧を確認することができます。
たとえば、「Get a Picture」ボタンをタップすると、端末にインストールされているカメラアプリが起動します。 カメラ起動処理は、phonegap-demo/main.js 92～112行目に記述されています。
function dump_pic(data) {
var viewport = document.getElementById('viewport');
viewport.style.display = "";
viewport.style.position = "absolute";
viewport.style.top = "10px";
viewport.style.left = "10px";
document.getElementById("test_img").src = "data:image/jpeg;base64," + data;
}
function fail(msg) {
alert(msg);
}
function show_pic() {
navigator.camera.getPicture(dump_pic, fail, {
quality : 50,
destinationType: Camera.DestinationType.DATA_URL,
targetWidth: 100,
targetHeight: 100
});
}
関数dump_pic()は撮影完了後の処理、関数fail()は撮影終了後の処理です。
カメラを呼び出しているAPIは、関数show_pic()内の navigator.camera.getPicture() です。
画質やデータの取得方法などをオプション値としてAPIを実行すると、 CordovaがOSに合わせたネイティブコードに処理を置き換えたうえでカメラの起動を実行します。
まとめ
今回はMonacaの基本的な機能を紹介しました。 Monacaを使うと非常に手軽にアプリ開発を行うことができるので、 モバイルアプリ開発をこれからはじめようと思っている方も、是非トライしてみてください。
