- 追加された行はこの色です。
- 削除された行はこの色です。
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>Visual Studio+Apache Cordova]]
-戻る
--[[Visual Studio+Apache Cordova]]
--[[Visual Studio Code]]
---[[CSharp for Visual Studio Code]]
---[[Python for Visual Studio Code]]
---Cordova Tools Extension
---[[Visual Studio CodeによるSPA開発]]
* 目次 [#k1371724]
#contents
*概要 [#c5bd91da]
-Android、iOSそしてWindowsアプリの開発に対応
-[[Cordova Tools Extension]]が主流になっていく可能性がある。
-今後、[[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]
***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
***[[Android Studio>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio]] [#q8c036dc]
[[Visual Studioのエミュレータ>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%E3%81%AE%E3%83%87%E3%83%90%E3%83%83%E3%82%B0#h8757303]]は、~
[[Android Studio>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio#a4e75be5]]のインストールで代替できる。~
※ [[Android Virtual Device (AVD)>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%E3%81%AE%E3%83%87%E3%83%90%E3%83%83%E3%82%B0#s4012251]]を使用するため。
-インストール
--[[Java SDK>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio#dca3ac11]]
--[[Android Studio と SDK>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio#wdbf4040]]
-設定
--[[初期設定>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio#yfcbb29e]]
--[[PATH設定>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Android%20Studio#f38ea058]]
***[[Xcode>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Xcode]] [#vedc0dda]
*開発 [#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
-追加コマンド~
基本的には、ios, android, browserなどを追加。
cordova platform add android
cordova platform add ios
cordova platform add browser
-確認コマンド~
以下でターゲット・プラットフォームを確認できる。
cordova platform ls
Installed platforms:
・・・
Available platforms:
・・・
-削除コマンド~
不要なターゲット・プラットフォームは以下で削除できる。
cordova platform rm android
cordova platform rm ios
cordova platform rm browser
***前提環境の構築環境 [#wd8c654e]
-以下のコマンドを使用して確認して構築。
>cordova requirements
Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: not installed
Please install Android target / API level: "android-28".
Hint: Open the SDK manager by running: "C:\Users\xxxx\AppData\Local\Android\Sdk\tools\android.bat"
You will require:
1. "SDK Platform" for API level android-28
2. "Android SDK Platform-tools (latest)
3. "Android SDK Build-tools" (latest)
Gradle: installed C:\Users\xxxx\.gradle\wrapper\dists\gradle-5.4.1-all\3221gyojl5jsh0helicew7rwx\gradle-5.4.1\bin\gradle
Requirements check results for browser:
Some of requirements check failed
-以下を実施
--[[Cordova 開発環境のインストール>#q8c036dc]]
--[[プラットフォーム毎の前提環境の構築>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29#qbaa343a]]
***ロード [#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つの追加のターゲットが含まれているらしいが使用しない。
**プラグイン追加 [#k2cc5249]
-以下のような機能も含まれるもよう。
--主要なコアプラグインのサポート
--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にデプロイしてデバッグ実行する。
-この選択肢が出てこない場合、~
拡張機能が
--インストールされていない場合や、
--有効になっていない場合が
>考えられる。
**Cordovaプラグインの追加 [#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]]で、プラグインを追加する(CLIで手動インストール)。
**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のサポートが追加されている。
*参考 [#abba2b99]
**[[Visual Studio Code]] [#xfe93cc2]
**[[Cordova (PhoneGap)>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29]] [#p4807690]
**ニュースリリース [#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開発]], [[:モバイル系開発]]
Tags: [[:.NET開発]], [[:モバイル系開発]], [[:プログラミング]], [[:ツール類]]