「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
目次 †
概要 †
- 機能
- Apache Cordova の入力補完機能
- エミュレーター/シミュレーターによるデバッグ実行
- ビルド等のコマンド実行
- Ionicフレームワークのサポート他
インストール †
Cordova Tools Extension †
- VSCodeを起動し、画面左のメニューから拡張機能のメニューを選択。
- 検索欄に"cordova"と入力、表示された「Cordova Tools Extension」をインストール。
- インストール後、Visual Studio Codeを再起動
Cordova 開発環境 †
Visual Studio Tools for Apache Cordovaで幾つかのプロダクトはインストールされるが、以下の問題がある。
- バージョンが古い
C:\Users\xxxx>node -v
v0.12.2
C:\Users\xxxx>npm -v
2.7.4
- エラーが起きる
C:\Users\xxxx>cordova -v
C:\Users\xxxx\AppData\Roaming\npm\node_modules\cordova\node_modules\cordova-lib\node_modules\init-package-json\node_modules\read-package-json\node_modules\json-parse-better-errors\index.js:9
SyntaxError: Use of const in strict mode.
Android Studioのインストールで代替できる。
※ AVD Managerで作成したEmulatorを使用するため。
Cordova †
- Node.js
npm(Node.js のパッケージ管理ツール)が必要なため。
環境変数 †
ユーザー環境変数の設定
- ANDROID_HOME
Android SDK がインストールされているパス
xxxx\Android\android-sdk
これを設定したら、AVDが動かなくなったので、やっぱり削除した。
開発 †
プロジェクト作成 †
作成 †
※ -dは途中経過を表示するスイッチ
ターゲット・プラットフォームの追加 †
ターゲットとなるプラットフォーム用のファイルを追加する。
ロード †
Visual Studio Codeにプロジェクトをロードさせる。
- 作業ディレクトリをプロジェクトフォルダとし、「code.」とコマンドを入力する。
- 手動で起動してメニュー [File] – [Open Folder] でプロジェクトフォルダをオープン。
Cordova CLIコマンド †
検索 †
Visual Studio Codeの機能
- [F1] キーを押下すると画面上部にコンボボックスが表示される。
- cordova と入力し、表示された入力候補からCordova: XXXX を選択。
準備 †
ビルド †
- iOSのアプリについては、
- .\platforms\ios フォルダに Xcode 用のプロジェクトが格納されている。
- これを Mac OS 上の Xcode でビルドする。
デバッグ実行 †
- ブラウザでAndroid・iOSをシミュレートする
2つの追加のターゲットが含まれているらしいが使用しない。
- 以下のような機能も含まれるもよう。
- 主要なコアプラグインのサポート
- live reload
- event firing
- device screen resizing (while debugging only)
- Cordova Simulate
デバック設定 †
- デバッグモードを(デバッグ・アイコン か Ctrl + Shift + Dで)開き、
- 歯車マークを押下し「Cordova」を選択する。
- この設定は「/.vscode/launch.json」に記述される。
- [メニュー] -> [デバッグ] -> [構成を開く]でlaunch.jsonファイルが開く。
デプロイしてデバック実行 †
- 事前に、AVD ManagerでEmulatorを作成・起動しておく。
- デバッグモードを(デバッグ・アイコン か Ctrl + Shift + Dで)開き、
- デバッグ・ボタン([▶])横の
「Run Android on emulator」を選択し、
- この選択肢が出てこない場合、
拡張機能が
- インストールされていない場合や、
- 有効になっていない場合が
考えられる。
プラグインの追加 †
IntelliSense? †
プラグイン †
プロジェクトに追加したプラグインをIntelliSense?が受け取る。
- 既定のサポート
- cordova-plugin-battery-status
- cordova-plugin-camera
- cordova-plugin-contacts
- cordova-plugin-device
- cordova-plugin-device-motion
- cordova-plugin-device-orientation
- cordova-plugin-dialogs
- cordova-plugin-file
- cordova-plugin-file-transfer
- cordova-plugin-globalization
- cordova-plugin-inappbrowser
- cordova-plugin-media
- cordova-plugin-media-capture
- cordova-plugin-network-information
- cordova-plugin-splashscreen
- cordova-plugin-statusbar
- cordova-plugin-vibration
- cordova-plugin-websql
- cordova-plugin-x-toast
- ionic-plugin-keyboard
- phonegap-plugin-barcodescanner
- phonegap-plugin-push
- 追加のサポート
\.vscode\typingsフォルダに適切な.dtsファイルを置く。
- IntelliSense?で受け取りたいファンクション上にJSDocヘッダを作成するだけ。
- Ionic、Angular、JQueryのサポートが追加されている。
Ionicのサポート †
参考 †
ニュースリリース †
ダウンロード †
使い方 †
iOS †
Tags: :.NET開発, :モバイル系開発