Monacaデバッカーがスゴイ!! Monaca x PhoneGapでスマホアプリを開発してみた!!

こんにちわ。
デザイナーから、フロント系エンジニアに昇華中のおすぎこと杉山です。

最近ではHTML5,CSS3,JavaScriptを使って、あらゆるものが作れるようになってきましたよね!!
スマートフォンアプリも例外じゃなく、WEBの技術を使って簡単に作れる時代になってきました。

スマホアプリ開発合宿っていうイベントをたまにやるんですが、
PhoneGapを使ってHTMLとJavaScriptでアプリを作ってます。

んで、最近見つけたんです!
それがMonacaであり、Monacaデバッカー!

『Monacaデバッカーがスゴイ!! Monaca x PhoneGapでアプリ開発してみた!!』

・ PhoneGapとは何か。

簡単にいうと、”WEBの技術で簡単にスマホアプリが作れちゃうフレームワーク”です!

公式的にいうとこんな感じです。

PhoneGap は、iOS、Android、Windows Phone、Blackberry など主要モバイルOSをサポートするオープンソースのモバイルアプリケーション開発フレームワークです。
Web制作者にとって馴染み深い HTML、CSS、JavaScript を使って、複数のモバイルOS上で動作するアプリケーションを開発することができます。
ユーザーインターフェイス(UI)をHTML、CSSで構成できるため、Titaniumなどの同様のフレームワークに比べて、Web制作者にとっては比較的導入しやすいと言われています。

PhoneGap ディベロッパーセンターより参照
http://www.adobe.com/jp/devnet/phonegap.html

phpnegap

adobe社から出ています!

そして、今回のタイトルにもなってる

・ Monacaって何か。

簡単に言うと、”WEBの技術で簡単にアプリを開発するための、環境やツールやAPIなど用意した統合的な・・・”
簡単に言えてないっ!!!

公式サイトでは、

「Monacaは、HTML5をベースとしたモバイルアプリ開発プラットフォームです。」

って言ってます。

アシアル社から出ています!
http://www.asial.co.jp/

PhoneGapでのアプリ開発をサポートしてくれる便利屋さん!って認識で良いと思います。
うん、ホント便利なんです。

・ 何が便利なのか!!

 (1) ブラウザ上で開発できちゃう!
 (2) デバッカーで確認できちゃう!
 (3) アプリをマーケット用にビルドできちゃう!

詳しくは、公式ホームページを見てください。
http://monaca.mobi/

monaca

ドキュメントやブログも充実していて、ホント開発しやすいです。
・ ドキュメント
http://docs.monaca.mobi/ja/
・ ブログ
http://blog.asial.co.jp/category/21

ってことで、いろいろ便利だってことは分かっていただけたと思うんですが、
その中で一番便利だと思った機能をご紹介します。

それが、

「Monacaデバッカー」

そう!開発中のアプリが実機でデバックできちゃうんです!!!!
しかも、アプリをビルドして実機にインストールしないでもOKなんです。

Monacaデバッガーアプリをスマホ端末にインストールして、
ログインして、開発中のプロジェクトを開くだけ!

そう、デバック用のアプリを通してアプリの挙動やデザインを実機で確認できるわけなんですね♪

・ Android版デバッガー
https://play.google.com/store/apps/details?id=mobi.monaca.debugger

・ iOS版デバッガー
https://itunes.apple.com/jp/app/monaca/id550941371

・ Windows 8版デバッガー
http://docs.monaca.mobi/ja/manual/debugger/install/#windows-8-monaca-debugger-installation

・ やってみる。

実際に、Monacaを使って開発合宿でつくった「お出かけむしコレクション」を例にします!!

(1) まず、アプリを立ち上げてMonacaに登録したアカウントでログインする。

(2) MonacaのIDEで作成したプロジェクトの一覧がでてくるので、今回つくった「お出かけむしコレクション」を選ぶ。

(3) 実機で起動しました!

(4) MonacaのIDEを起動して、ソースを修正して。
保存を押すと・・・・・・
アプリがローディング中になってる!

(5) アプリが更新されている!

今回は分かりやすく、テキストの文章を変えてみましたが、
JSの処理を変更して保存すると、修正した処理の挙動を確認できるようになります。

ちょっと感動しますね。

こんな感じで、ChromeでIDE立ち上げて修正しながら、リアルタイムでその修正を実機で確認できるのです!
ほかにも、Monacaデバッカーでは、アプリログを確認できたり便利な機能があります。

あと、これはちょっとしたTipsですが、アプリ修正しても変更しない!というケースは
結構な確立でキャッシュが利いちゃってるので、そんなときはMonacaデバッカー上のメニューから、
「同期データの削除」をやると直ることが多いです。
http://docs.monaca.mobi/ja/faq/debugger/#the-application-using-the-monaca-debugger-doesn-t-seem-to-be-running-properly

強いて使いにくいところがあるとすれば、複数人での開発がしにくいことです。
IDEから、WebDav上にソースをアップするんですが、みんなでソース修正すると更新するたびにMonacaデバッカーに更新がかかっちゃったり、ソースのバージョン管理ができなかったりするのがちょっとだけおしいところです。

が、公式サイト上では、今後の予定で複数人での開発をサポートって書いてあるので、
そのうち何とかしてくれるはずです!!!

ほかにもMonacaを使うと便利なことがありますが、今回は一番わくわくした機能をご紹介しました。
是非、みなさんもMonaca x PhoneGapでスマホアプリを開発してみてはいかがでしょうか!?

Monacaの宣伝をしてるわけではないっすw

Monacaで作った、「お出かけむしコレクション」も是非やってみてください!
https://play.google.com/store/apps/details?id=jp.co.headwaters.android.mushi.collection

■ まとめ

・ Monacaを使うと、HTML5,CSS,JavaScript(PhoneGap)を使って簡単にスマホアプリが作れる。
・ Monacaデバッカーで、開発中に実機で楽しくデバックできる!
・ 「お出かけむしコレクション」をみなさんにDLしてほしい!!!

以上です!!
素敵なスマホアプリ開発ライフを!!

 

コメントを残す

メールアドレスが公開されることはありません。