「[[マイクロソフト系技術情報 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]] [#q8c036dc] [[Android Studio>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio]]のインストールで代替できる。~ ※ AVD Managerで作成したEmulatorを使用するため。 -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 [#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] ***作成 [#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] ***検索 [#t940233d] [[Visual Studio Code]]の機能 -[F1] キーを押下すると画面上部にコンボボックスが表示される。 -cordova と入力し、表示された入力候補からCordova: XXXX を選択。 ***準備 [#lcafec26] -[[Visual Studio Code]]から実行する場合、 --表示された入力候補からCordova: Prepare を選択。 -[[Cordova CLIから実行する場合、>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29#w30149d6]] ***ビルド [#j08d699d] -iOS以外のアプリについては、 --[[Visual Studio Code]]から実行する場合、 ---表示された入力候補からCordova: Build を選択。 --[[Cordova CLIから実行する場合、>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29#o519a937]] -iOSのアプリについては、 --.\platforms\ios フォルダに Xcode 用のプロジェクトが格納されている。 --これを Mac OS 上の Xcode でビルドする。 **デバッグ実行 [#tc2070c6] -ブラウザでAndroid・iOSをシミュレートする~ 2つの追加のターゲットが含まれているらしいが使用しない。 -以下のような機能も含まれるもよう。 --主要なコアプラグインのサポート --live reload --event firing --device screen resizing (while debugging only) --Cordova Simulate ***デバック設定 [#qe912051] -デバッグモードを(デバッグ・アイコン か Ctrl + Shift + Dで)開き、 -歯車マークを押下し「Cordova」を選択する。 -この設定は「/.vscode/launch.json」に記述される。 -[メニュー] -> [デバッグ] -> [構成を開く]で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 -Visual Studio Code で Apache Cordova を使った開発が可能に – Visual Studio 日本チーム Blog~ https://blogs.msdn.microsoft.com/visualstudio_jpn/2016/01/27/visual-studio-code-apache-cordova/ **ダウンロード [#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 -Cordova - iPhone, iOSと Android 両方で動くアプリ開発環境 - DEblog~ http://nikami.org/cordova-iphone-ios-android-%E4%B8%A1%E6%96%B9%E3%81%A7%E5%8B%95%E3%81%8F%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83/ -ベーコン婆男のテックノート --Visual Studio CodeでのIonicアプリ(Android)のデバッグ~ https://www.smagai.com/visual-studio-code%E3%81%A7%E3%81%AEionic%E3%82%A2%E3%83%97%E3%83%AAandroid%E3%81%AE%E3%83%87%E3%83%90%E3%83%83%E3%82%B0/ ---AndroidでWebRTCアプリ開発(開発環境準備編)~ https://www.smagai.com/android%E3%81%A7webrtc%E3%82%A2%E3%83%97%E3%83%AA%E9%96%8B%E7%99%BA%EF%BC%88%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E6%BA%96%E5%82%99%E7%B7%A8%EF%BC%89/ ***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開発]], [[:モバイル系開発]]