Cordova Tools Extension のバックアップ(No.4)

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

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 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」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る

目次 †

概要 †

• Android、iOSそしてWindowsアプリの開発に対応
• 今後、Visual Studio Tools for Apache Cordovaに替わって、
  Visual Studio Code + Cordova Tools Extensionが主流になっていく可能性がある。

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

インストール †

Visual Studio Code †

Cordova Tools Extension †

• VSCodeを起動し、画面左のメニューから拡張機能のメニューを選択。
• 検索欄に"cordova"と入力、表示された「Cordova Tools Extension」をインストール。
• インストール後、Visual Studio Codeを再起動

Cordova 開発環境 †

VS Tools4Cordovaでのインストールの問題 †

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.

• ユーザー環境変数の設定などは別途行う必要がある。

エミュレーターが動かなくなったりしたので、結局、Android Studioからの再インストールを行った。

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 †

• Node.js
  npm(Node.js のパッケージ管理ツール)が必要なため。
  • Node.js
    https://nodejs.org/en/

    node -v
    npm -v

• Cordova CLI

  npm install cordova –g
  cordova –v

環境変数 †

ユーザー環境変数の設定

• ANDROID_HOME
  Android SDK がインストールされているパス

  xxxx\Android\android-sdk

これを設定したら、AVDが動かなくなったので、やっぱり削除した。

• PATH
  ツール類のインストールされているパス

  Android\android-sdk\platform-tools;Android\android-sdk\tools;

開発 †

プロジェクト †

作成 †

• 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

• 確認コマンド 以下でターゲット・プラットフォームを確認できる。

  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

ロード †

Visual Studio Codeにプロジェクトをロードさせる。

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

デバッグ実行 †

コンパイル †

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

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

デバック設定 †

• 「/.vscode/launch.json」に記述される。
• [メニュー] -> [デバッグ] -> [構成を開く]でファイルが開く。

デプロイして実行 †

• デバッグモード(Ctrl + Shift + D)を開き、
• 歯車アイコンを選択して「Run Android on emulator」を選択
• デバッグ・ボタン（[▶]）を押下する。

• この選択肢が出てこない場合、
  拡張機能が
  • インストールされていない場合や、
  • 有効になっていない場合が

考えられる。

プラグイン追加 †

参考 †

Visual Studio Code †

ニュースリリース †

• 米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

ダウンロード †

• Cordova Tools - Visual Studio Marketplace
  https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools

使い方 †

• 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

iOS †

• 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.029 sec.