Cordova Tools Extension
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicros...
-戻る
--[[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アプリの開発に対応
-今後、[[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 Exten...
-インストール後、[[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://dotnetdevelopmentinfrastructu...
[[Visual Studioのエミュレータ>https://dotnetdevelopmentin...
[[Android Studio>https://dotnetdevelopmentinfrastructure....
※ [[Android Virtual Device (AVD)>https://dotnetdevelopmen...
-インストール
--[[Java SDK>https://dotnetdevelopmentinfrastructure.ossc...
--[[Android Studio と SDK>https://dotnetdevelopmentinfras...
-設定
--[[初期設定>https://dotnetdevelopmentinfrastructure.ossc...
--[[PATH設定>https://dotnetdevelopmentinfrastructure.ossc...
***[[Xcode>https://dotnetdevelopmentinfrastructure.osscon...
*開発 [#e0cc4df8]
**プロジェクト作成 [#l3937b16]
***作成 [#k3552d88]
-cordova createコマンドを使用する。
cordova create [プロジェクト用ルート・フォルダ名] [Java...
-例
cordova create CordovaApp com.example.CordovaApp Cordova...
※ -dは途中経過を表示するスイッチ
***プラットフォームの追加 [#s44658d9]
ターゲットとなるプラットフォーム用のファイルを追加する。
-cdコマンドで、[[プロジェクトを用に作成したフォルダ>#k355...
-ターゲットごとに以下のコマンドを実行する。
--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\Ap...
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\gr...
Requirements check results for browser:
Some of requirements check failed
-以下を実施
--[[Cordova 開発環境のインストール>#q8c036dc]]
--[[プラットフォーム毎の前提環境の構築>https://dotnetdeve...
***ロード [#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://dotnetdevelopmen...
***ビルド [#j08d699d]
-iOS以外のアプリについては、
--[[Visual Studio Code]]から実行する場合、
---表示された入力候補からCordova: Build を選択。
--[[Cordova CLIから実行する場合、>https://dotnetdevelopme...
-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にデプロイしてデバッグ実行する。
-この選択肢が出てこない場合、~
拡張機能が
--インストールされていない場合や、
--有効になっていない場合が
>考えられる。
**Cordovaプラグインの追加 [#k2cc5249]
-[[Visual Studio Tools for Apache CordovaのようにGUIが使...
-[[コチラにある手順>https://dotnetdevelopmentinfrastructu...
**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://dotnetdevelopmentinfrastru...
**ニュースリリース [#i2ecb416]
-米Microsoft、VS Code向けのCordova拡張「Cordova Tools」を...
https://mag.osdn.jp/16/02/03/170000
-無償のVisual Studio CodeがCordovaに対応。HTML5/JavaScrip...
http://www.publickey1.jp/blog/16/visual_studio_code_cordo...
-Microsoft Releases Cordova Tools Extension for Visual St...
http://www.eweek.com/development/microsoft-releases-cordo...
-Visual Studio Code で Apache Cordova を使った開発が可能...
https://blogs.msdn.microsoft.com/visualstudio_jpn/2016/01...
**ダウンロード [#yeb4776e]
-Cordova Tools - Visual Studio Marketplace~
https://marketplace.visualstudio.com/items?itemName=vsmob...
**使い方 [#zf7e8404]
-MacでもLinuxでも使える! 無償の Visual Studio Code を使用...
https://blogs.msdn.microsoft.com/osamum/2016/02/01/maclin...
-[VSCode] Cordovaの開発環境構築 │ Web備忘録~
https://webbibouroku.com/Blog/Article/vscode-cordova
-Visual Studio CodeとCordovaで作るハイブリッドアプリ開発...
https://qiita.com/yama-take/items/8c6434efbcd4bece6310
-Cordova - iPhone, iOSと Android 両方で動くアプリ開発環境...
http://nikami.org/cordova-iphone-ios-android-%E4%B8%A1%E6...
-ベーコン婆男のテックノート
--Visual Studio CodeでのIonicアプリ(Android)のデバッグ~
https://www.smagai.com/visual-studio-code%E3%81%A7%E3%81%...
---AndroidでWebRTCアプリ開発(開発環境準備編)~
https://www.smagai.com/android%E3%81%A7webrtc%E3%82%A2%E3...
***iOS [#o3d136e3]
-Apache CordovaをVisual Studio Codeで開発するための道のり...
http://blog.aqutras.com/entry/2016/04/25/210000
-VSCode-Cordova開発環境 - Chipstar Lightのメモ~
http://seesaawiki.jp/w/chipstar_light/d/VSCode-Cordova%B3...
-Cordova開発環境をつくる | cozy attic~
https://cozyattic.wordpress.com/2016/12/26/cordova%E9%96%...
----
Tags: [[:.NET開発]], [[:モバイル系開発]], [[:プログラミン...
終了行:
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicros...
-戻る
--[[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アプリの開発に対応
-今後、[[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 Exten...
-インストール後、[[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://dotnetdevelopmentinfrastructu...
[[Visual Studioのエミュレータ>https://dotnetdevelopmentin...
[[Android Studio>https://dotnetdevelopmentinfrastructure....
※ [[Android Virtual Device (AVD)>https://dotnetdevelopmen...
-インストール
--[[Java SDK>https://dotnetdevelopmentinfrastructure.ossc...
--[[Android Studio と SDK>https://dotnetdevelopmentinfras...
-設定
--[[初期設定>https://dotnetdevelopmentinfrastructure.ossc...
--[[PATH設定>https://dotnetdevelopmentinfrastructure.ossc...
***[[Xcode>https://dotnetdevelopmentinfrastructure.osscon...
*開発 [#e0cc4df8]
**プロジェクト作成 [#l3937b16]
***作成 [#k3552d88]
-cordova createコマンドを使用する。
cordova create [プロジェクト用ルート・フォルダ名] [Java...
-例
cordova create CordovaApp com.example.CordovaApp Cordova...
※ -dは途中経過を表示するスイッチ
***プラットフォームの追加 [#s44658d9]
ターゲットとなるプラットフォーム用のファイルを追加する。
-cdコマンドで、[[プロジェクトを用に作成したフォルダ>#k355...
-ターゲットごとに以下のコマンドを実行する。
--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\Ap...
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\gr...
Requirements check results for browser:
Some of requirements check failed
-以下を実施
--[[Cordova 開発環境のインストール>#q8c036dc]]
--[[プラットフォーム毎の前提環境の構築>https://dotnetdeve...
***ロード [#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://dotnetdevelopmen...
***ビルド [#j08d699d]
-iOS以外のアプリについては、
--[[Visual Studio Code]]から実行する場合、
---表示された入力候補からCordova: Build を選択。
--[[Cordova CLIから実行する場合、>https://dotnetdevelopme...
-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にデプロイしてデバッグ実行する。
-この選択肢が出てこない場合、~
拡張機能が
--インストールされていない場合や、
--有効になっていない場合が
>考えられる。
**Cordovaプラグインの追加 [#k2cc5249]
-[[Visual Studio Tools for Apache CordovaのようにGUIが使...
-[[コチラにある手順>https://dotnetdevelopmentinfrastructu...
**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://dotnetdevelopmentinfrastru...
**ニュースリリース [#i2ecb416]
-米Microsoft、VS Code向けのCordova拡張「Cordova Tools」を...
https://mag.osdn.jp/16/02/03/170000
-無償のVisual Studio CodeがCordovaに対応。HTML5/JavaScrip...
http://www.publickey1.jp/blog/16/visual_studio_code_cordo...
-Microsoft Releases Cordova Tools Extension for Visual St...
http://www.eweek.com/development/microsoft-releases-cordo...
-Visual Studio Code で Apache Cordova を使った開発が可能...
https://blogs.msdn.microsoft.com/visualstudio_jpn/2016/01...
**ダウンロード [#yeb4776e]
-Cordova Tools - Visual Studio Marketplace~
https://marketplace.visualstudio.com/items?itemName=vsmob...
**使い方 [#zf7e8404]
-MacでもLinuxでも使える! 無償の Visual Studio Code を使用...
https://blogs.msdn.microsoft.com/osamum/2016/02/01/maclin...
-[VSCode] Cordovaの開発環境構築 │ Web備忘録~
https://webbibouroku.com/Blog/Article/vscode-cordova
-Visual Studio CodeとCordovaで作るハイブリッドアプリ開発...
https://qiita.com/yama-take/items/8c6434efbcd4bece6310
-Cordova - iPhone, iOSと Android 両方で動くアプリ開発環境...
http://nikami.org/cordova-iphone-ios-android-%E4%B8%A1%E6...
-ベーコン婆男のテックノート
--Visual Studio CodeでのIonicアプリ(Android)のデバッグ~
https://www.smagai.com/visual-studio-code%E3%81%A7%E3%81%...
---AndroidでWebRTCアプリ開発(開発環境準備編)~
https://www.smagai.com/android%E3%81%A7webrtc%E3%82%A2%E3...
***iOS [#o3d136e3]
-Apache CordovaをVisual Studio Codeで開発するための道のり...
http://blog.aqutras.com/entry/2016/04/25/210000
-VSCode-Cordova開発環境 - Chipstar Lightのメモ~
http://seesaawiki.jp/w/chipstar_light/d/VSCode-Cordova%B3...
-Cordova開発環境をつくる | cozy attic~
https://cozyattic.wordpress.com/2016/12/26/cordova%E9%96%...
----
Tags: [[:.NET開発]], [[:モバイル系開発]], [[:プログラミン...
ページ名: