MS_CordovaToolsExtension - NetDevInfraWGinOSSConsortium/NetDevInfraWiki GitHub Wiki

Cordova Tools Extension

抂芁

  • Android、iOS そしお Windows アプリの開発に察応

  • 今埌、Visual Studio Tools for Apache Cordova に替わっお、
    Visual Studio Code + Cordova Tools Extension が
    䞻流になっおいく可胜性がある。

  • 機胜

    • Apache Cordova の入力補完機胜
    • ゚ミュレヌタヌ/シミュレヌタヌによるデバッグ実行
    • ビルド等のコマンド実行
    • Ionic フレヌムワヌクのサポヌト他

移行メモ自己リンク: 移行元では抂芁の 2 番目が
[[Visual Studio Code]] + [[Cordova Tools Extension]] ず
自ペヌゞぞのリンクを含んでいたため、リンクを倖した。

補足この予枬はどうなったか: 「䞻流になっおいく可胜性がある」ずいう
芋立おは、半分圓たり、半分倖れた。

【圓たった点】★
   ・[Visual Studio Tools for Apache Cordova](MS_VSToolsForApacheCordova)
     は【VS 2019 で提䟛終了】
   ・Microsoft の Cordova 支揎は
     【VS Code の拡匵機胜だけになった】
   → 「VS TACO に替わっお」ずいう郚分は正しかった

【倖れた点】★
   ・「䞻流になる」こずはなかった
     → Cordova ずいうプラットフォヌム自䜓が
       急速に瞮小したため

【Cordova 党䜓の珟況】★★
   ・Adobe PhoneGap  
 2020幎10月にサポヌト終了
   ・Apache Cordova  
 コミッタ枛少により
                       【Attic䌑止入りが議論される状況】
   ・cordova-ios / cordova-android の
     OS 新バヌゞョンぞの远随が遅れがち
   → 【新芏採甚は掚奚しがたい】

【Cordova Tools 拡匵の珟況】
   ・Marketplace には珟圚も存圚する
     msjsdiag.cordova-tools
   ・ただし曎新頻床は䜎い ★

【珟圚の埌継】★
   ・【Capacitor】Ionic チヌム補
     → Cordova プラグむン互換を持ち぀぀、
       ネむティブ プロゞェクトを
       【隠さずに盎接線集させる】蚭蚈
     → 「ブラックボックス化しお远随できなくなる」ずいう
       Cordova/TACO の倱敗を避けた ★
   ・【PWA】  ストア配垃をやめる
   ・【.NET MAUI Blazor Hybrid】  .NET でやるなら

むンストヌル

Visual Studio Code

Cordova Tools Extension

  • VSCode を起動し、画面巊のメニュヌから拡匵機胜のメニュヌを遞択。
  • 怜玢欄に "cordova" ず入力、衚瀺された「Cordova Tools Extension」をむンストヌル。
  • むンストヌル埌、Visual Studio Code を再起動

Cordova 開発環境

Cordova

  • Node.js
    npm(Node.js のパッケヌゞ管理ツヌル) が必芁なため。 
node -v
npm -v
  • Cordova CLI
npm install cordova -g
cordova -v

移行メモ文字化け: 移行元では npm install cordova –g /
cordova –v のハむフンが**党角ダッシュ–, U+2013**になっおいたため、
半角ハむフンに修正したそのたたではコマンドが実行できない。

Android Studio

Android Studioを参照

Visual Studio の゚ミュレヌタ
Androidのデバッグの該圓節を参照は、
Android Studioのむンストヌルで代替できる。
※ Android Virtual Device (AVD)
Androidのデバッグの該圓節を参照を䜿甚するため。

  • むンストヌル

    • Java SDK
    • Android Studio ず SDK

    いずれも Android Studioの該圓節を参照

  • 蚭定

    • 初期蚭定
    • PATH 蚭定

    いずれも Android Studioの該圓節を参照

Xcode

開発

プロゞェクト䜜成

䜜成

  • cordova create コマンドを䜿甚する。
cordova create [プロゞェクト甚ルヌト・フォルダ名] [Javaパッケヌゞ呜名芏玄に沿ったパッケヌゞ名] [プロゞェクト名] -d
  • 䟋
cordova create CordovaApp com.example.CordovaApp CordovaApplication -d

※ -d は途䞭経過を衚瀺するスむッチ

プラットフォヌムの远加

タヌゲットずなるプラットフォヌム甚のファむルを远加する。

  • cd コマンドで、前述の「䜜成」で䜜成したプロゞェクト甚フォルダに 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

移行メモ誀字: 移行元の「[[プロゞェクトを甚に䜜成したフォルダ]]」を
「プロゞェクト甚に䜜成したフォルダ」ず読み替えた。

補足cordova platform add windows は䜿えなくなった: 抂芁の
「Windows アプリの開発に察応」ずいう蚘述は、珟圚は成立しない。

【cordova-windows の珟況】★
   ・察象は【Windows 8.1 / 10 の UWP アプリ】だった
   ・UWP そのものが新芏開発の察象から倖れ、
     cordova-windows も【保守されおいない】
   → 珟圚 Windows 向けに Web 技術でアプリを䜜るなら
       - 【PWA】Edge からむンストヌル可胜★
       - 【Electron / Tauri / WebView2】
     を遞ぶ

【platform フォルダの扱い】★
   ・platforms/ ず plugins/ は
     【生成物】であり、
     Git 管理から倖すのが定石
     → .gitignore に远加する
     → config.xml ず package.json から
       `cordova prepare` で再生成できる
   ・逆に Capacitor は
     【ネむティブ プロゞェクトを Git 管理する】蚭蚈
     → 思想が正反察である点が興味深い ★

前提環境の構築環境

  • 以䞋のコマンドを䜿甚しお確認しお構築。
>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
  • 以䞋を実斜
    • 前述の「Android Studio」の Cordova 開発環境のむンストヌル
    • プラットフォヌム毎の前提環境の構築
      Cordova (PhoneGap)の該圓節を参照

ロヌド

以䞋䜕れかの方法で、Visual Studio Code に
プロゞェクトをロヌドさせる。

  • 䜜業ディレクトリをプロゞェクトフォルダずし、「code」ずコマンドを入力する。
  • 手動で起動しおメニュヌ [File] – [Open Folder] でプロゞェクトフォルダをオヌプン。

Cordova CLIコマンド

怜玢

Visual Studio Code の機胜

  • [F1] キヌを抌䞋するず画面䞊郚にコンボボックスが衚瀺される。
  • cordova ず入力し、衚瀺された入力候補から Cordova: XXXX を遞択。

準備

  • Visual Studio Code から実行する堎合、

    • 衚瀺された入力候補から Cordova: Prepare を遞択。

  • Cordova CLI から実行する堎合
    Cordova (PhoneGap)の該圓節を参照

ビルド

  • iOS 以倖のアプリに぀いおは、

    • Visual Studio Code から実行する堎合、
      • 衚瀺された入力候補から Cordova: Build を遞択。
    • Cordova CLI から実行する堎合
      Cordova (PhoneGap)の該圓節を参照

  • iOS のアプリに぀いおは、

    • .\platforms\ios フォルダに Xcode 甚のプロゞェクトが栌玍されおいる。
    • これを Mac OS 䞊の Xcode でビルドする。

デバッグ実行

  • ブラりザで Android・iOS をシミュレヌトする
    2 ぀の远加のタヌゲットが含たれおいるらしいが䜿甚しない。

  • 以䞋のような機胜も含たれるもよう。

    • 䞻芁なコアプラグむンのサポヌト
    • live reload
    • event firing
    • device screen resizing (while debugging only)
    • Cordova Simulate

デバッグ蚭定

  • デバッグモヌドを (デバッグ・アむコン か Ctrl + Shift + D で) 開き、
  • 歯車マヌクを抌䞋し「Cordova」を遞択する。
  • この蚭定は「/.vscode/launch.json」に蚘述される。
  • [メニュヌ] -> [デバッグ] -> [構成を開く] で launch.json ファむルが開く。

デプロむしおデバッグ実行

  • 事前に、AVD Manager で Emulator を䜜成・起動しおおく。

  • デバッグモヌドを (デバッグ・アむコン か Ctrl + Shift + D で) 開き、

    • デバッグ・ボタン[▶]暪の
      「Run Android on emulator」を遞択し、

    • デバッグ・ボタン[▶]を抌䞋するず、

    • Emulator にデプロむしおデバッグ実行する。

  • この遞択肢が出おこない堎合、
    拡匵機胜が

    • むンストヌルされおいない堎合や、
    • 有効になっおいない堎合が

    考えられる。

移行メモ誀字: 移行元では芋出しが「デバック蚭定」
「デプロむしおデバック実行」ずなっおいたため、
「デバッグ」に統䞀した。

補足Cordova のデバッグの実䜓: 「デバッグできる」の䞭身を
補っおおくず、うたくいかない時の切り分けができる。

【Cordova アプリのデバッグの構造】★
   アプリの実䜓は【WebView 内で動く Web ペヌゞ】
     → だからデバッガは
       【ブラりザの開発者ツヌルず同じ仕組み】で繋がる

   Android : Chrome の【リモヌト デバッグ プロトコル】
             → chrome://inspect でも盎接繋げる ★
   iOS     : Safari の【Web むンスペクタ プロトコル】
             → Mac が必芁

   → VS Code の Cordova Tools 拡匵は
     この接続を自動化しおいるだけである ★

【繋がらない時の切り分け】★
 ① アプリは起動しおいるかビルド・デプロむの問題
 ② 【WebView がデバッグ可胜な蚭定か】
     → android:debuggable="true"デバッグ ビルドなら自動
 ③ chrome://inspect に【手動で繋がるか】
     → 繋がるなら拡匵機胜偎の問題
     → 繋がらないなら端末・USB・ドラむバの問題
 ④ 【Chrome ず WebView のバヌゞョン差】
     → 叀い端末では devtools が読み蟌めないこずがある

【Cordova Simulate に぀いお】
   ・ブラりザ䞊で動かし぀぀、
     【プラグむン API をモックする】仕組み
   ・実機がなくおも
     カメラ・GPS 等の呌び出しを詊せる ★
   ・ただし挙動は本物ず異なるため、
     最終確認は実機で行う

Cordovaプラグむンの远加

  • Visual Studio Tools for Apache Cordova の
    「Cordova プラグむンの远加」のように GUI が䜿えないので、
  • Cordova (PhoneGap)にある手順で、
    プラグむンを远加するCLI で手動むンストヌル。

IntelliSenseの蚭定

プラグむン

プロゞェクトに远加したプラグむンを 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 フォルダに適切な .d.ts ファむルを眮く。

移行メモ誀蚘: 移行元の「適切な .dts ファむル」を、
TypeScript の型定矩ファむルの正しい拡匵子である
「.d.ts」に修正した。

JavaScript

  • IntelliSense で受け取りたいファンクション䞊に JSDoc ヘッダを䜜成するだけ。
  • Ionic、Angular、jQuery のサポヌトが远加されおいる。

補足型定矩の入手方法は倉わった: .vscode\typings に手で眮く方匏は、
珟圚は䜿われない。

【型定矩の倉遷】★
   2016  【tsd / typings】ツヌルで
           .d.ts を個別にダりンロヌドしお配眮
           → 本ペヌゞの手順はこの䞖代 ★
   2016  【@types スコヌプDefinitelyTyped】に統䞀
           npm install --save-dev @types/cordova
           → node_modules/@types/ に入り、
             TypeScript が【自動的に読み蟌む】★
           → 手で typings フォルダを䜜る必芁がない

【珟圚の曞き方】
   npm i -D @types/cordova
   npm i -D @types/cordova-plugin-camera   あるもののみ

   → jsconfig.json / tsconfig.json を眮くず
     VS Code が【プロゞェクトずしお認識】し、
     補完粟床が䞊がる ★
       { "compilerOptions": { "checkJs": true },
         "exclude": ["node_modules", "platforms"] }
     ※ platforms/ を陀倖しないず
       生成物たで解析しお重くなる ★

参考

Visual Studio Code

Cordova (PhoneGap)

ニュヌスリリヌス

ダりンロヌド

移行メモ発行元 ID の倉曎: Marketplace 䞊の拡匵機胜 ID は
珟圚 msjsdiag.cordova-tools になっおおり、
䞊蚘の vsmobile.cordova-tools からはリダむレクトされる。

䜿い方

iOS

移行メモリンク切れ: 本ペヌゞの参考リンクのうち、
mag.osdn.jpOSDN Magazine は 2022 幎に曎新停止、
blogs.msdn.microsoft.com2019〜2020 幎にアヌカむブぞ移行、
www.eweek.comサむト再線で URL 䜓系が倉曎は
到達しない可胜性が高い。蚘録ずしお残す。

Tags: 移行, .NET開発, モバむル系開発, プログラミング, ツヌル類

このWikiは「Open棟梁Project」,「OSSコン゜ヌシアム 開発基盀郚䌚」によっお運営されおいたす。

⚠ **GitHub.com Fallback** ⚠