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

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

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 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開発基盤部会」によって運営されています。

• 戻る
  • Visual Studio＋Apache Cordova
  • Visual Studio CodeによるSPA開発

目次 †

概要 †

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

Android Studioのインストールで代替できる。
※ 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 †

• 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] でプロジェクトフォルダをオープン。

Cordova CLIコマンド †

検索 †

Visual Studio Codeの機能

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

準備 †

• Visual Studio Codeから実行する場合、
  • 表示された入力候補からCordova: Prepare を選択。

• Cordova CLIから実行する場合、

ビルド †

• iOS以外のアプリについては、
  • Visual Studio Codeから実行する場合、
    • 表示された入力候補からCordova: Build を選択。
  • Cordova CLIから実行する場合、

• 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にデプロイしてデバッグ実行する。

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

考えられる。

プラグインの追加 †

• Visual Studio Tools for Apache CordovaのようにGUIが使えないので、
• コチラにある手順で、プラグインを追加する。

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フォルダに適切な.dtsファイルを置く。

JavaScript †

• IntelliSense?で受け取りたいファンクション上にJSDocヘッダを作成するだけ。
• Ionic、Angular、JQueryのサポートが追加されている。

Ionicのサポート †

参考 †

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
• Visual Studio Code で Apache Cordova を使った開発が可能に – Visual Studio 日本チーム Blog
  https://blogs.msdn.microsoft.com/visualstudio_jpn/2016/01/27/visual-studio-code-apache-cordova/

ダウンロード †

• 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

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

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