Skip to content

MS_CordovaToolsExtension

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 2 revisions

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 -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プラグインの追加

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コンソーシアム 開発基盤部会」によって運営されています。

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally