cordova+Onsen UIの開発環境構築手順
サイトからダウンロードしてインストールするやり方もあるんですが、
パッケージマネージャーのchocolateyとNode.jsを使うと捗ります。
※「コマンドプロンプトは管理者権限で実行」する必要があります。
chocolateyのインストール
まずは、Windowsソフトのパッケージマネージャー「chocolatey」をインストールします。https://chocolatey.org/
- コマンドプロンプトで以下コマンドを実行します。
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
- コマンドプロンプトを再起動します。
- 以下コマンドを実行し、正しくインストールされたか確認します。
chocolatey version
Node.jsのインストール
chocolateyを使って、Node.jsをインストールします。
Node.js 日本ユーザグループ
- コマンドプロンプトで以下コマンドを実行します。
cinst nodejs.install
- コマンドプロンプトを再起動します。
- 以下コマンドを実行し、正しくインストールされたか確認します。
node -v
cordovaのインストール
Node.jsのnpmを使って、cordovaをインストールします。
Apache Cordova
- コマンドプロンプトで以下コマンドを実行します。
npm install -g cordova
- 以下コマンドを実行し、正しくインストールされたか確認します。
cordova -v
cordovaプロジェクトの作成
- コマンドプロンプトで以下コマンドを実行します。
cordova create hello com.example.hello HelloWorld
上の例では、カレントディレクトリ下の「hello」ディレクトリに、「com.example.hello」という識別子の「HelloWorld」という名前のアプリでプロジェクトが作成されます。
android用のプロジェクトを作成します。
上で作成した「hello」ディレクトリに移動して、
- コマンドプロンプトで以下コマンドを実行します。
cordova platform add androdid
Onsen UIテンプレートの取り込み
Getting Startedガイド | Onsen UI
から、作りたい画面のテンプレートをダウンロードして解凍。
プロジェクト内のwwwディレクトリの中を全て削除して、解凍したテンプレートのwwwディレクトリ内のファイルへ入れ替え。
