Monacaでアプリを作ってみよう(登録編)

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

今日は、Monaca(モナカ)の開発環境を設定する手順を書きます。

Monacaは会員登録をして、デバッガーを行うアプリをインストールするだけで、開発環境を構築することが出来ます。

f:id:sasa-red:20140520020437j:plain

従来のiPhoneやAndroidアプリはエミュレーターをインストールして起動する必要がありました。
エミュレーターはとても起動が遅く、PCのスペックを必要としました。

Monacaはスマホ1台で実機を使ったデバッグが可能です。
同期しながら作業できるので、とってもお手軽です。
(アプリの容量が大きい場合は、Wifi環境の方がいいかもしれません。)

Monacaに登録します

まずは、Monacaをサービス提供しているサイトへ移動します。

http://monaca.mobi/ja/

f:id:sasa-red:20140520020420j:plain

[今すぐ試す(無料)]ボタンをクリックします。

アカウント作成のポップアップが表示されます。

f:id:sasa-red:20140520020421j:plain

[メールアドレス][パスワード]を入力します。
[Monacanの利用規約に同意する]にチェックを入れて、[今すぐ試す]ボタンをクリックします。

メールが送られてきます。

f:id:sasa-red:20140520020422j:plain

入力したメールアドレスにメールが届きます。
届いていない場合は、迷惑フォルダをチェックしましょう。
メールに書かれているURLをクリックして、表示します。

アカウント登録が表示されます。

f:id:sasa-red:20140520020424j:plain

[お名前]を入力して、[登録する]ボタンをクリックします。

ダッシュボードが表示されます。

f:id:sasa-red:20140520020425j:plain

これで、登録作業は完了となります。簡単にスタートすることが出来ます。
ダッシュボードには、既に「はじめてのMonacaアプリ」というサンプルプロジェクトがあります。

続いては実際に、実機のデバッガーで動かしてみましょう。

スマホでデバッガを使う

まず、Google ストアを表示します。

f:id:sasa-red:20140520020427j:plain

検索に「Monacaデバッガー」と入力します。

検索結果一覧が表示されます。

f:id:sasa-red:20140520020428j:plain

一番上に出てくる[Monacaデバッガー]をタップします。

Monacaデバッガーのアプリ詳細画面が表示されます。

f:id:sasa-red:20140520020430j:plain

[インストール]ボタンをタップします。

アプリ権限の確認画面が表示されます。

f:id:sasa-red:20140520020431j:plain

[同意する]をタップします。(タップしないとインストールできません。)

インストールが開始されます。

f:id:sasa-red:20140520020433j:plain

インストールが完了すると[開く]ボタンが押せるようになります。
ボタンをタップします。

Monacaデバッガーが起動します。

f:id:sasa-red:20140520020434j:plain

最初に[メールアドレス]と[パスワード]を入力します。
[ログイン]ボタンをクリックします。
(このログイン画面は、初期起動の時にのみでます。)

プロジェクト一覧が表示されます。

f:id:sasa-red:20140520020436j:plain

[はじめてのMonacaアプリ]をクリックします。
(プロジェクトが変更されると自動で同期します。)

アプリが起動します。

f:id:sasa-red:20140520020437j:plain

これで開発環境が整いました。簡単に設定出来あました。
このお手軽さがMonacaでアプリ開発するメリットの一つです。

次回はアプリ開発に進んでいきましょう。

Related post