Cordova Tools Extension のバックアップ差分(No.9)

[ トップ ]   [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

• バックアップ一覧
• 現在との差分 を表示
• ソース を表示
• バックアップ を表示
• Cordova Tools Extension へ行く。
  • 1 (2018-03-26 (月) 11:18:22)
  • 2 (2018-03-26 (月) 14:18:29)
  • 3 (2018-03-26 (月) 15:24:49)
  • 4 (2018-03-26 (月) 21:09:26)
  • 5 (2018-03-26 (月) 22:19:39)
  • 6 (2018-03-27 (火) 13:34:24)
  • 7 (2018-03-27 (火) 15:00:21)
  • 8 (2018-03-28 (水) 12:29:17)
  • 9 (2018-03-28 (水) 14:38:15)
  • 10 (2018-04-13 (金) 13:54:23)
  • 11 (2018-05-14 (月) 17:55:21)
  • 12 (2020-02-21 (金) 19:38:56)
  • 13 (2022-01-14 (金) 17:23:26)

---

• 追加された行はこの色です。
• 削除された行はこの色です。

「[[マイクロソフト系技術情報 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;
 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]
**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

***ビルド [#j08d699d]
-[F1] キーを押下すると画面上部にコンボボックスが表示される。
-cordova と入力し、表示された入力候補からCordova: Build を選択。

-iOS 用のアプリについては、
--.\platforms\ios フォルダに Xcode 用のプロジェクトが格納されている。
--これを Mac OS 上の Xcode でビルドする。

***デバック設定 [#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開発]], [[:モバイル系開発]]

     

Site admin: dotNetDevelopmentInfrastructure

PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.
Based on "PukiWiki" 1.3 by yu-ji. Powered by PHP 5.3.3. HTML convert time: 0.009 sec.