LoginSignup
7
7

More than 5 years have passed since last update.

[Monaca] 2分で出来るAndroid×iOSマルチプラットフォーム開発環境

Last updated at Posted at 2017-07-27

背景

Monaca (HTMLハイブリッドアプリエンジン)を使えば、
AndroidとiOSの両方に対応したアプリがHTML5+JavaScriptで簡単に作れます。

Electronを利用することによって、
そのアプリをWIndows&Macに移植することも容易です。
参照:[Electron] 5分でWin&Macのクロスプラットフォームアプリを作ろう

本投稿の内容

本投稿では、Monacaでの開発の準備フェーズとして、
AndroidとiOSの両方に対応したテンプレートアプリを動かせるように、
環境構築&アプリ実行までをチュートリアル形式で示します。

Monaca/OnsenUI開発ノウハウ投稿の際の環境構築部分の参照用として投稿。
本投稿自体は、準備のみの簡単なものです。
Monacaはクラウド開発環境としてブラウザ上での利用が有名ですが、
複数人でGit等を利用して開発する場合、Localkitの方が開発しやすいと思われます。(私見)

① Monacaユーザ登録と開発環境のダウンロード

1. ユーザ登録

下記のURLからMonacaのユーザ登録を行います。

2. Monaca Localkitのダウンロード

下記のURLから、環境に合わせたMonaca Localkitをダウンロードします。
(執筆時点のバージョンは2.2.2です。)

② OnsenUIのテンプレートプロジェクトの作成

MonacaLocalkitにログイン後、
画面左上「プロジェクト一覧」の横の「+」を押下します。

新しいプロジェクトのダイアログボックスで、
以下のようにテンプレートを選択して作成します。
カテゴリを選択  : Onsen UI
テンプレートを選択: Onsen UI V2 JS Navigation

③ 実行

MonacaLocatki上で、作成したプロジェクトを選択し、
「プレビュー」ボタンを押下してください。

アプリを変更する場合は、作業ディレクトリ下に置かれている、
www/index.html
を修正してください。

OnsenUIを使ったスマートフォンアプリの実行環境が整いました!

今回作成したテンプレートアプリを、実はElectronでも動かすことが出来る
(OnsenUI使ったデスクトップアプリが作れる、windowsやmacで動かせる)ので、
ぜひ下記の記事も継続して試してみてください。

参照:Android&iOS&Win&Macが同じコードで動く!超マルチアプリを作ろう[Monaca × Electron]

参照:[Electron] 5分でWin&Macのクロスプラットフォームアプリを作ろう

以上


この系統の投稿を拡充させてほしいかたは「いいね」をお願いします。
(反応の多いニーズのある話から記載するため)

7
7
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
7
7