「コワーキングスペース八王子 8Beat」を発足するときに知り合ったアシアルの岡本さんに紹介されて、スマートフォン用のアプリが簡単にできるMonacaというサービスを知りました。Macの開発環境を準備するのも面倒だし、ちょうどいいなぁと思いつつなかなか実際に試すところまではいっていませんでしたが、ある日WebでMonacaを使ってアプリを開発して、MacBookProを買った話というのを見て俄然やる気が出て来ました。
ということでMonacaがどんなに簡単に始められるかということなどについて書きたいと思います。
子持ちの働く主婦が2年の間に70のアプリを開発して得た収入でMacBook Proを購入した話
俄然やる気になった記事がこちらです。
“子持ちの働く主婦が2年の間に70のアプリを開発して得た収入でMacBook Proを購入した話”
記事を読むと
Androidアプリを量産し、その広告収入でMacBook Proを購入
アプリ開発に費やす時間は、勉強する時間を含め1日のうちせいぜい1～2時間程度
「初期投資ゼロで始める」…古いパソコンでも開発できる環境を探し、「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つまでしか保存できないことです。エクスポート機能を使ってローカルに保存するなど工夫すればなんとかなるかな？と思いますが本格的に始めるなら有料プランがいいかもしれません。
書籍は公式ガイドブックが出ています(^^)/
コメント