Monacaー無料でスマホアプリをWeb上の開発環境で作成できるツール

「コワーキングスペース八王子 8Beat」を発足するときに知り合ったアシアルの岡本さんに紹介されて、スマートフォン用のアプリが簡単にできるMonacaというサービスを知りました。Macの開発環境を準備するのも面倒だし、ちょうどいいなぁと思いつつなかなか実際に試すところまではいっていませんでしたが、ある日WebでMonacaを使ってアプリを開発して、MacBookProを買った話というのを見て俄然やる気が出て来ました。
ということでMonacaがどんなに簡単に始められるかということなどについて書きたいと思います。

子持ちの働く主婦が2年の間に70のアプリを開発して得た収入でMacBook Proを購入した話

俄然やる気になった記事がこちらです。

“子持ちの働く主婦が2年の間に70のアプリを開発して得た収入でMacBook Proを購入した話”

記事を読むと

Androidアプリを量産し、その広告収入でMacBook Proを購入

アプリ開発に費やす時間は、勉強する時間を含め1日のうちせいぜい1~2時間程度

「初期投資ゼロで始める」…古いパソコンでも開発できる環境を探し、「Monaca」にたどり着いた

など、おおっ!と気になるキーワードがたくさんあります。

Monacaの始め方

Monaca

このサイトでサインアップします。サインアップをクリック

メールアドレスとパスワードを入力して、いますぐ登録(無料) をクリック



確認メールを送信しました
という画面になります。メールを確認します。

リンクのURLにアクセスします。

アカウントの登録が完了しました と表示されます。これでMonacaを使えるようになりました。

Monacaの開発画面

アカウントの登録が完了しました という画面から自動的にダッシュボードに移動します。

全てのプロジェクトというところに Hello Worldアプリ というサンプルのプログラムが入っています。

開く をクリックします

このような画面になります。左の赤枠にはファイルの構造が表示されています。真ん中の青枠エディター画面で、ここでコードを修正することができます。右の緑枠はこのコードが実行されたときのプレビュー画面となっています。

iPhoneでのデモ環境を準備する

iPhoneでのデモ環境も用意されています。Androidでも同じようにアプリがあるようです。

App Store

このアプリをインストールします。

メールアドレスとパスワードを入力して ログイン をタップします

PCで見たサンプルプログラムが表示されています。この Hello Worldアプリ をタップします

アプリが起動して、先ほどプレビューで見たものと同じ表示になりました。

ちょっとコードを修正して、修正結果を見てみる

このままだと最初から準備されているものなので、本当に自分の開発環境が表示されているのかな(^_^;?と思ってしまいそうです。

ということでちょっと表示を変えてみます。PCの開発環境のエディターで、

ボタンの名前が Start Demo となっているところを



デモを開始
 として

左上の ファイル>保存 をクリックします。



プレビュー画面
はもちろん変わっていましたが、自動的にiPhoneのMonacaが再読込されて、

このようにボタンの名前が変わったものが表示されました。これで…ちゃんと自分のプログラムが読み込まれていることが分かりますね(^_^;。

この自動的に再読込してくれる機能はなかなか便利で実際にいろいろコードをいじっているときにすぐに再読込してくれるのでかなり開発効率が上がります。

JavaScriptで現在位置を表示するサンプルを入れてみた

せっかくなのでなにかiPhoneらしいアプリを試してみたいと思って、Googleのgeolocationを利用した現在位置を取得するプログラムのサンプルを動かしてみました。

JavaScriptで位置情報を取得する方法(Geolocation API)

こちらにあるコードをMonaca上にコピーしてみました。


こんな感じで、経度緯度も取得でき

地図も表示されました(^^)/。こういう感じのスマホらしいアプリを今後作っていきたいなぁと思います

まとめ:無料の範囲や勉強方法など

Monacaは無料で利用することができ、最初に記事を紹介した方も無料の範囲でアプリを開発して収益を得ているようでした。

ただし、もちろん無料バージョンには制限があります。

料金プラン

一番めだつのが無料だとプロジェクトが3つまでしか保存できないことです。エクスポート機能を使ってローカルに保存するなど工夫すればなんとかなるかな?と思いますが本格的に始めるなら有料プランがいいかもしれません。

書籍は公式ガイドブックが出ています(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る