More than 5 years have passed since last update.

Cordovaのチュートリアルをやってみる第二回

Last updated at 2018-02-23Posted at 2018-02-11

使用したもの(環境)

cordova
visualStudioCode
windows10
Android

チュートリアルを訳しながらやってみる

チュートリアルのページは下記。

Module 2: Building a Cordova Project

Module 3: Setting Up the Workshop Files

前回のチュートリアル。

Cordovaのチュートリアルをやってみる第一回

環境構築については別途まとめてあるので下記参照。

cordova&VSCodeで環境を構築するまでの右往左往メモ。

Module 2: Building a Cordova Project

ここではAndroidのビルド方法だけ確認しています。

以下翻訳。

Building for Android

以下の手順でAndroidバージョンのアプリケーションをビルドするには、コンピュータにAndroid SDKがインストールされている必要があります。

workshop / platforms / androidフォルダにプロジェクトをビルドし、USBケーブルを使用してコンピュータに接続されたAndroidデバイスで実行するには、次のように入力します。

cordova run android

workshop / platforms / androidフォルダにプロジェクトをビルドしてAndroidエミュレータで実行するには、次のように入力します。

cordova emulate android

VSCodeでデバッグ環境を整えたのでパス。

Module 3: Setting Up the Workshop Files

1. プロジェクトのwwwフォルダの中身を削除する。
(なんとなく不安なので別途バックアップをとっておく)

2. リンクからチュートリアル用ファイルをダウンロードするか、git clone でダウンロードすること。
ここではworkshopフォルダで下記コマンドを実行。

git clone https://github.com/ccoenraets/cordova-tutorial

3. zipでダウンロードした場合は何処かに解凍しておいてね。

4. wwwフォルダの中にダウンロードしてきたファイル(解凍したファイル)のうち、starter-wwwの中身を入れてね。

ここまででファイル配置はこのようになってます。

www
├─assets
│  ├─css
│  │  └─images
│  ├─pics
│  └─ratchet
│      ├─css
│      └─fonts
├─js
│  └─services
│      ├─json
│      ├─localstorage
│      ├─memory
│      └─websql
└─lib

5. ビルドしてアプリケーションをテストしてみましょう。
チュートリアルの2章で確認した実行の仕方、もしくはwww/index.htmlをブラウザで開いてみてください。

今回はworkshopフォルダにて下記コマンドを実行。