- 追加された行はこの色です。
- 削除された行はこの色です。
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>Visual Studio+Apache Cordova]]
* 目次 [#k1371724]
#contents
*概要 [#c5bd91da]
-Android、iOSそしてWindowsアプリの開発に対応
-今後、[[Visual Studio Tools for Apache Cordova]]に替わって、~
[[Visual Studio Code]] + [[Cordova Tools Extension]]が主流になっていく可能性がある。
-機能
--Apache Cordova の入力補完機能
--エミュレーター/シミュレーターによるデバッグ実行
--ビルド等のコマンド実行
--Ionicフレームワークのサポート他
*インストール [#ue55eb1f]
**[[Visual Studio Code]] [#if2d09a4]
**Cordova Tools Extension [#m9cdd74b]
-VSCodeを起動し、画面左のメニューから拡張機能のメニューを選択。
-検索欄に"cordova"と入力、表示された「Cordova Tools Extension」をインストール。
-インストール後、[[Visual Studio Code]]を再起動
**Cordova 開発環境 [#q5eb6c3c]
***[[VS Tools4Cordova>Visual Studio Tools for Apache Cordova]]でのインストールの問題 [#p5be2555]
[[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.
-[[ユーザー環境変数の設定>#h88368b2]]などは別途行う必要がある。
エミュレーターが動かなくなったりしたので、結局、[[Android Studio>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio]]からの再インストールを行った。
***[[Android Studio>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio]] [#q8c036dc]
[[Android Studio>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio]]のインストールで代替できる。~
※ AVD Managerで作成したEmulatorを使用するため。
***Java SDK [#u933fafa]
-Java SE - Downloads | Oracle Technology Network | Oracle~
-Java SDK
--Java SE - Downloads | Oracle Technology Network | Oracle~
http://www.oracle.com/technetwork/java/javase/downloads/index.html
***Android SDK [#t2d03bff]
-Android Studio と SDK ツールをダウンロードする | Android Studio~
-Android SDK
--Android Studio と SDK ツールをダウンロードする | Android Studio~
http://developer.android.com/intl/ja/sdk/index.html
***Cordova [#h3cb6788]
-Node.js~
npm(Node.js のパッケージ管理ツール)が必要なため。
--Node.js~
https://nodejs.org/en/
node -v
npm -v
-Cordova CLI
npm install cordova –g
cordova –v
***環境変数 [#h88368b2]
ユーザー環境変数の設定
-ANDROID_HOME~
Android SDK がインストールされているパス
xxxx\Android\android-sdk
>これを設定したら、AVDが動かなくなったので、やっぱり削除した。
-PATH~
ツール類のインストールされているパス
Android\android-sdk\platform-tools;Android\android-sdk\tools;
*開発 [#e0cc4df8]
**プロジェクト [#l3937b16]
**プロジェクト作成 [#l3937b16]
***作成 [#k3552d88]
-cordova createコマンドを使用する。
cordova create [プロジェクト用ルート・フォルダ名] [Javaパッケージ命名規約に沿ったパッケージ名] [プロジェクト名] -d
-例
cordova create CordovaApp com.example.CordovaApp CordovaApplication -d
※ -dは途中経過を表示するスイッチ
***ターゲット・プラットフォームの追加 [#s44658d9]
ターゲットとなるプラットフォーム用のファイルを追加する。
-cdコマンドで、[[プロジェクトを用に作成したフォルダ>#k3552d88]]にcdする。
-ターゲットごとに以下のコマンドを実行する。
--Android 用 :
cordova platform add android
--iOS 用 :
cordova platform add ios
--Windows 用:
cordova platform add windows
-確認コマンド
以下でターゲット・プラットフォームを確認できる。
cordova platform ls
Installed platforms:
・・・
Available platforms:
・・・
-追加コマンド~
基本的には、ios と android を追加すればイイ。
cordova platform add android
cordova platform add ios
-削除コマンド
不要なターゲット・プラットフォームは以下で削除できる。
cordova platform rm android
cordova platform rm ios
***ロード [#v5801ba6]
Visual Studio Codeにプロジェクトをロードさせる。
-作業ディレクトリをプロジェクトフォルダとし、「code.」とコマンドを入力する。
-手動で起動してメニュー [File] – [Open Folder] でプロジェクトフォルダをオープン。
**Cordova CLIコマンドの検索 [#c958062c]
-[F1] キーを押下すると画面上部にコンボボックスが表示される。
-cordova と入力し、表示された入力候補からCordova: XXXX を選択。
**デバッグ実行 [#tc2070c6]
-ブラウザでAndroid・iOSをシミュレートする~
2つの追加のターゲットが含まれているらしいが使用しない。
-以下のような機能も含まれるもよう。
--主要なコアプラグインのサポート
--live reload
--event firing
--device screen resizing (while debugging only)
--Cordova Simulate
***ビルド [#j08d699d]
-[F1] キーを押下すると画面上部にコンボボックスが表示される。
-cordova と入力し、表示された入力候補からCordova: Build を選択。
-iOS 用のアプリについては、
--.\platforms\ios フォルダに Xcode 用のプロジェクトが格納されている。
--これを Mac OS 上の Xcode でビルドする。
***デバック設定 [#qe912051]
-「/.vscode/launch.json」に記述される。
-[メニュー] -> [デバッグ] -> [構成を開く]でファイルが開く。
***デプロイしてデバック実行 [#we181360]
-事前に、AVD ManagerでEmulatorを作成・起動しておく。
-デバッグモードを(デバッグ・アイコン か Ctrl + Shift + Dで)開き、
--デバッグ・ボタン([▶])横の~
「Run Android on emulator」を選択し、
--デバッグ・ボタン([▶])を押下すると、
--Emulatorにデプロイしてデバッグ実行する。
-この選択肢が出てこない場合、~
拡張機能が
--インストールされていない場合や、
--有効になっていない場合が
>考えられる。
**プラグインの追加 [#k2cc5249]
-[[Visual Studio Tools for Apache CordovaのようにGUIが使えないので>Visual Studio Tools for Apache Cordova#l97edeb5]]、
-[[コチラにある手順>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29#mbb3fb8e]]で、プラグインを追加する。
**IntelliSense [#oead9409]
***プラグイン [#md243cd6]
プロジェクトに追加したプラグインを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ファイルを置く。
***JavaScript [#ndde8297]
-IntelliSenseで受け取りたいファンクション上にJSDocヘッダを作成するだけ。
-Ionic、Angular、JQueryのサポートが追加されている。
**Ionicのサポート [#ue9a7b42]
*参考 [#abba2b99]
**[[Visual Studio Code]] [#xfe93cc2]
**ニュースリリース [#i2ecb416]
-米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
**ダウンロード [#yeb4776e]
-Cordova Tools - Visual Studio Marketplace~
https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools
**使い方 [#zf7e8404]
-MacでもLinuxでも使える! 無償の Visual Studio Code を使用した Cordova 開発 – monoe's blog~
https://blogs.msdn.microsoft.com/osamum/2016/02/01/maclinux-visual-studio-code-cordova/
-[VSCode] Cordovaの開発環境構築 │ Web備忘録~
https://webbibouroku.com/Blog/Article/vscode-cordova
-Visual Studio CodeとCordovaで作るハイブリッドアプリ開発環境 - Qiita~
https://qiita.com/yama-take/items/8c6434efbcd4bece6310
***iOS [#o3d136e3]
-Apache CordovaをVisual Studio Codeで開発するための道のり - Aqutras Members' Blog~
http://blog.aqutras.com/entry/2016/04/25/210000
-VSCode-Cordova開発環境 - Chipstar Lightのメモ~
http://seesaawiki.jp/w/chipstar_light/d/VSCode-Cordova%B3%AB%C8%AF%B4%C4%B6%AD
-Cordova開発環境をつくる | cozy attic~
https://cozyattic.wordpress.com/2016/12/26/cordova%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8B/
----
Tags: [[:.NET開発]], [[:モバイル系開発]]