マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

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

インストール

Visual Studio Code

Cordova Tools Extension

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

Cordova 開発環境

Cordova

  • Node.js
    npm(Node.js のパッケージ管理ツール)が必要なため。
  • Cordova CLI
    npm install cordova –g
    cordova –v

Android Studio

Visual Studioのエミュレータは、
Android Studioのインストールで代替できる。
Android Virtual Device (AVD)を使用するため。

Xcode

開発

プロジェクト作成

作成

  • cordova createコマンドを使用する。
    cordova create [プロジェクト用ルート・フォルダ名] [Javaパッケージ命名規約に沿ったパッケージ名] [プロジェクト名] -d
  • cordova create CordovaApp com.example.CordovaApp CordovaApplication -d

※ -dは途中経過を表示するスイッチ

プラットフォームの追加

ターゲットとなるプラットフォーム用のファイルを追加する。

  • ターゲットごとに以下のコマンドを実行する。
    • 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 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

ロード

以下何れかの方法で、Visual Studio Codeにプロジェクトをロードさせる。

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

Cordova CLIコマンド

検索

Visual Studio Codeの機能

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

準備

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

ビルド

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

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のサポートが追加されている。

参考

Visual Studio Code

Cordova (PhoneGap)

ニュースリリース

ダウンロード

使い方

iOS


Tags: :.NET開発, :モバイル系開発


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-02-21 (金) 19:38:56 (46d)