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

目次

概要

  • 機能
    • 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を使用するため。

Cordova

  • Node.js
    npm(Node.js のパッケージ管理ツール)が必要なため。
  • 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は途中経過を表示するスイッチ

ターゲット・プラットフォームの追加

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

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

ビルド

  • 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にデプロイしてデバッグ実行する。
  • この選択肢が出てこない場合、
    拡張機能が
    • インストールされていない場合や、
    • 有効になっていない場合が

考えられる。

プラグインの追加

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

ニュースリリース

ダウンロード

使い方

iOS


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


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2018-05-14 (月) 17:55:21 (191d)