| Requirement | Mac | Windows |
|---|---|---|
| Python 2.x | Included | Need To Install |
| Node.js | Need To Install | Need To Install |
| Cordova | Need To Install | Need To Install |
| compiler for node-gyp | Need To Setup | Need To Install |
| phantomjs-prebuilt | Need To Install | Need To Install |
| testem | Need To Install | Need To Install |
※ phantomjs-prebuil および testem はテストに使用. -g オプションでインストールすることを想定
$ npm install -g node-gyp
$ npm install -g phantomjs-prebuilt
$ npm install -g testem
雛形生成用、CLI モジュールのインストール
$ npm install -g cdp-cli
$ cdp create mobile
質問に応答して、モバイルアプリ用雛形を作成します。
以下は対象プラットフォームを android のみにし、ほかは既定値を選択した場合の例です。
================================================================
構成情報: おすすめ
アプリ名: Cool App Name
プロジェクト名: cool-app-name
アプリID: org.cool.appname
バージョン: 0.0.1
ライセンス: プロプライエタリ(NONE)
モジュールシステム: AMD
トランスパイルターゲット: ES5
プラットフォーム: android
Cordova プラグイン:
cordova-plugin-cdp-nativebridge
追加モジュール:
hogan.js
hammerjs
jquery-hammerjs
================================================================
雛形のディレクトリ構成は以下のようになっています。
root/
app/ // モバイルアプリのソースを格納するルートディレクトリ
external/ // 3rd パーティ製スクリプトを格納 (node_modules からコピーされる)
res/ // リソースファイルのルートディレクトリ
scripts/ // .ts ファイルのルートディレクトリ
stylesheets/ // .scss ファイルのルートディレクトリ
templates/ // .html テンプレートファイルのルートディレクトリ
index.html // アプリケーションのルート index.html
docs/ // ドキュメントのルートディレクトリ
hooks/ // cordova hook scripts ディレクトリ
plugins/ // cordova plugins ディレクトリ
platforms/ // cordova platform ディレクトリ
tasks/ // タスクスクリプト用ディレクトリ
tests/ // テストスクリプト用ディレクトリ
www/ // ビルド後の配置用ディレクトリ
雛形の動作をブラウザ上で確認してみましょう。
$ cd cool-app-name
$ npm install
雛形をビルドするには、以下のコマンドを使用します。
$ npm run bulid:debug
すると、www 以下に、ビルド済みのファイル一式が生成されます。
www を localhost のルートに指定して、Chrome ブラウザで開くと、以下のようなサンプル画面が確認できます。
-
実機ビルドを行うと、以下にファイルが出力されます。
※ Windows 環境では、iOS ビルドはできないため、必ず
platformを指定します。
$ cordova build android
cool-app-name/platforms/android/assets/www/
.apkは以下に出力されます。
cool-app-name/platforms/android/build/outputs/apk/
- 実機へインストールするには、デバイスを PC に接続し、以下のコマンドを実行すると便利です。
$ cordova run android
開発時のデバッグビルドと、プロダクション用のリリースビルドに関する違いを説明します。
各ビルドコマンドは以下です。その他のタスクコマンドは、こちらを参照してください。
- デバッグビルド
$ cordova build android
- リリースビルド
$ cordova build android --release
-
[Tips] --no-minify オプション
リリースビルドでは、既定で
minifyされてしまいますが、以下のコマンドを利用すれば、minify抑止が可能です。
$ cordova build android --release --no-minify
- デバッグビルドでは、各
.tsファイルが、.jsファイルに 1:1 にコンパイルされます。
- 対して、リリースビルドでは、モジュール単位 * に concat されて、最適化されてコンパイルされます。
※ デバッグビルドは、デバッグのしやすさを考慮して設計されており、ランタイム時のパフォーマンスは低下します。プロダクション用にはリリースビルドを実行するのが良いでしょう。
※ モジュール単位: ある機能の集合を1つの JavaScript ファイルに集約した単位。
そのほかのコンポーネントの使い方や、Native 連携のサンプル実装は
cafeteria アプリケーションで確認ができます。