3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Monacaでモバイルアプリ開発環境を準備しよう!

Last updated at Posted at 2017-05-12

※本ドキュメントは新入社員向けのトレーニング資料です。
#1.はじめに
Monacaとは
Monacaはアシアル社が提供しているスマートフォン向けアプリの開発環境の呼称です。
アプリの開発はMonacaクラウドIDE(Web経由)を使用して行います。
開発環境の提供だけではなく、誰でも簡単にスマートフォン向けのアプリ開発ができるように、その仕組みとサポートを提供しています。

monaca-ide.png

OnsenUIとは
OnsenUIは同じくアシアル社が提供しているフロントエンド開発用のツールです。
OnsenUIが提供するUIを使用すると、PhoneGap/Cordovaアプリを非常に簡単に綺麗で見映えの良い、使いやすいUIを実現できます。
ハイブリッドアプリでもネイティブ並みの外観と操作性を全てのプラットフォーム上で実現できます。Monacaと共に使用すればバックエンドとデバイスのサポート機能を追加でき、公開可能なアプリを簡単に作成できます。Monacaが提供するテンプレートには標準でOnsenUIが使用されています。

詳しくは…
Monaca Docsをご覧ください。

#2.開発環境の準備(IDE編)
アカウントの作成
Google Chromeにて以下のサイトにアクセスします。
https://ja.monaca.io/

「今すぐ試す(無料)」もしくは「サインアップ」をクリックします。
WS000000.JPG

メールアドレスとパスワード(確認含めて2回)を入力し、「今すぐ試す」もしくは「今すぐ登録(無料)」をクリックします。
WS000001.JPG
WS000022.JPG

確認メール送信画面が表示されます。
もしメールが届かないようなら、「確認メールを再送する」ボタンをクリックし、再度メール受信を試みてください。
WS000002.JPG

メールを確認し、本文中のリンクをクリックします。
この際、デフォルトのブラウザがChorome以外の場合はリンクをコピーしてChorome上で実行してください。
スクリーンショット 2017-04-21 12.06.12.png

アカウントの登録が完了しました。
WS000003.JPG

その後、自動的にダッシュボードに遷移します。

#3.開発環境の準備(スマホアプリ編)
Monacaデバッガーのインストール
実機で確認するためにiPhone/Androidのデバッグアプリをインストールします。
AppStoreもしくはGooglePlayにて「Monaca」で検索します。
IMG_0022.PNG

アプリの発行元がAsial Corporationであることを確認した上でインストールしてください。
IMG_0928.PNG

インストール完了後にアプリを起動します。
IMG_0023.PNG

PCにて登録したアカウントとパスワードを用いてログインします。
IMG_0024.PNG

ログインが完了すると以下のような画面になります。
IMG_0025_1.png

開発環境の準備は以上で終了です。お疲れさまでした。

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?