「[[マイクロソフト系技術情報 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]]などは別途行う必要がある。 ***Java SDK [#u933fafa] -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~ 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 -PATH~ ツール類のインストールされているパス Android\android-sdk\platform-tools;Android\android-sdk\tools; *開発 [#e0cc4df8] **プロジェクト [#l3937b16] ***作成 [#k3552d88] -cordova createコマンドを使用する。 cordova create [プロジェクト用ルート・フォルダ名] [Javaパッケージ命名規約に沿ったパッケージ名] [プロジェクト名] -d -例 cordova create CordovaApp com.example.CordovaApp CordovaApplication -d ※ -dは途中経過を表示するスイッチ ***ターゲット・プラットフォームの追加 [#s44658d9] ターゲットとなるプラットフォーム用のファイルを追加する。 -cdコマンドで、プロジェクトを用に作成したフォルダにcdする。 -ターゲットごとに以下のコマンドを実行する。 --Android 用 : cordova platform add android --iOS 用 : cordova platform add ios --Windows 用: cordova platform add windows -基本的には、ios と android を追加すればイイ。 cordova platform add android cordova platform add ios -確認コマンド cordova platform ls -削除コマンド cordova platform rm android cordova platform rm ios ***ロード [#v5801ba6] Visual Studio Codeにプロジェクトをロードさせる。 -作業ディレクトリをプロジェクトフォルダとし、「code.」とコマンドを入力する。 -手動で起動してメニュー [File] – [Open Folder] でプロジェクトフォルダをオープン。 **デバッグ実行 [#tc2070c6] ***コンパイル [#j08d699d] -[F1] キーを押下すると画面上部にコンボボックスが表示される。 -cordova と入力し、表示された入力候補からCordova: Build を選択。 -iOS 用のアプリについては、 --.\platforms\ios フォルダに Xcode 用のプロジェクトが格納されている。 --これを Mac OS 上の Xcode でビルドする。 ***デバック設定 [#qe912051] -画面左のデバッグメニューを選択し、ネジマークのアイコンをクリック。 -現在開いているプロジェクトのデバッグ環境が選択できるので「Cordova」を選択。 -設定したデバッグ環境の情報は、「/.vscode/launch.json」に記述される。 -この選択肢に「Cordova」が出てこない場合、~ 拡張機能が --インストールされていない場合や、 --有効になっていない場合が >考えられる。 ***デプロイして実行 [#we181360] -[F1] キーを押下すると画面上部にコンボボックスが表示される。 -cordova と入力し、表示された入力候補からCordova: Run を選択。 **プラグイン追加 [#k2cc5249] *参考 [#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開発]], [[:モバイル系開発]]