Cordova Tools Extension のバックアップ(No.2) - マイクロソフト系技術情報 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る

目次 †

概要 †

Android、iOSそしてWindowsアプリの開発に対応
今後、Visual Studio Tools for Apache Cordovaに替わって、
Visual Studio Code + Cordova Tools Extensionが主流になっていく可能性がある。

インストール †

Visual Studio Tools for Apache Cordovaのインストールでインストールされる。

Visual Studio Code †

Cordova Tools Extension †

Cordova 開発環境 †

Visual Studio Tools for Apache Cordovaのインストールでインストールされている。
ただし、ユーザー環境変数の設定などは別途行う必要がある。

Java SDK †

Java SE - Downloads | Oracle Technology Network | Oracle
http://www.oracle.com/technetwork/java/javase/downloads/index.html

Android SDK †

Android Studio と SDK ツールをダウンロードする | Android Studio
http://developer.android.com/intl/ja/sdk/index.html

Cordova †

Node.js

Node.js
https://nodejs.org/en/

Cordova CLI
```
npm install cordova –g
cordova –v
```

環境変数 †

ユーザー環境変数の設定

ANDROID_HOME
Android SDK がインストールされているパス
```
xxxx\Android\android-sdk
```

PATH
ツール類のインストールされているパス

Android\android-sdk\platform-tools;Android\android-sdk\tools;

開発 †

プロジェクト †

作成 †

cordova createコマンドを使用する。

cordova create [プロジェクト用ルート・フォルダ名] [Javaパッケージ命名規約に沿ったパッケージ名] [プロジェクト名] -d

例

cordova create CordovaApplication com.example.CordovaApplication CordovaApplication -d

※ -dは途中経過を表示するスイッチ

ターゲット・プラットフォームの追加 †

ターゲットとなるプラットフォーム用のファイルを追加する。
cdコマンドで、プロジェクトを用に作成したフォルダにcdする。
ターゲットごとに以下のコマンドを実行する。
- Android 用 :
```
cordova platform add android
```
- iOS 用 :
```
cordova platform add ios
```
- Windows 用:
```
cordova platform add windows
```

ロード †

Visual Studio Codeにプロジェクトをロードさせる。

作業ディレクトリをプロジェクトフォルダとし、「code.」とコマンドを入力する。
手動で起動してメニュー [File] – [Open Folder] でプロジェクトフォルダをオープン。

デバッグ実行 †

コンパイル †

[F1] キーを押下すると画面上部にコンボボックスが表示される。
cordova と入力し、表示された入力候補からCordova: Build を選択。

iOS 用のアプリについては、
- .\platforms\ios フォルダに Xcode 用のプロジェクトが格納されている。
- これを Mac OS 上の Xcode でビルドする。

デプロイして実行 †

[F1] キーを押下すると画面上部にコンボボックスが表示される。
cordova と入力し、表示された入力候補からCordova: Run を選択。

プラグイン追加 †

参考 †

Visual Studio Code †

ニュースリリース †

米Microsoft、VS Code向けのCordova拡張「Cordova Tools」を公開 | OSDN Magazine
https://mag.osdn.jp/16/02/03/170000
無償のVisual Studio CodeがCordovaに対応。HTML5/JavaScriptでのモバイルアプリケーション開発が可能に－ Publickey
http://www.publickey1.jp/blog/16/visual_studio_code_cordova.html
Microsoft Releases Cordova Tools Extension for Visual Studio Code
http://www.eweek.com/development/microsoft-releases-cordova-tools-extension-for-visual-studio-code

使い方 †

Visual Studio CodeとCordovaで作るハイブリッドアプリ開発環境 - Qiita
https://qiita.com/yama-take/items/8c6434efbcd4bece6310
[VSCode] Cordovaの開発環境構築 │ Web備忘録
https://webbibouroku.com/Blog/Article/vscode-cordova
Apache CordovaをVisual Studio Codeで開発するための道のり - Aqutras Members' Blog
http://blog.aqutras.com/entry/2016/04/25/210000
MacでもLinuxでも使える! 無償の Visual Studio Code を使用した Cordova 開発 – monoe's blog
https://blogs.msdn.microsoft.com/osamum/2016/02/01/maclinux-visual-studio-code-cordova/

ダウンロード †

Cordova Tools - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools

Tags: :.NET開発, :モバイル系開発