背景
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のクロスプラットフォームアプリを作ろう
以上
この系統の投稿を拡充させてほしいかたは「いいね」をお願いします。
(反応の多いニーズのある話から記載するため)