Help us understand the problem. What is going on with this article?

Visual Studio CodeとCordovaで作るハイブリッドアプリ開発環境

More than 1 year has passed since last update.

背景

Windows端末でiOSアプリの開発を行うための下調べです。
うちらが作るシステムはiOSアプリをハイブリッド前提としたWeb部分のみ、作業端末はWindowsだけだったらどこまでできるのか?という疑問から、実際に環境構築からサンプル作成までを行い、開発を進めて問題ないかの検証です。

前提

  • OS:Windows 10
  • IDE:Visual Studio Codeインストール済み (1.10.2) (以降VSCode)
  • アプリの申請系については触れないです

手順

1.環境準備

Cordova Tools 拡張機能インストール

VSCのコマンドパレットを起動(Ctrl + P)し、「ext install cordova」を入力し、「Cordova Tools」をインストールします。

Node.jsインストール

cmd
>nodist -v
(x64)
> 6.11.3  (global: 6.11.3)
  7.2.1

2. Cordovaアプリベース生成

Cordoava を npm install でインストール

cmd
>npm install -g cordova 

Cordovaプロジェクト作成

コマンドプロンプトを起動し、任意の箇所にフォルダを作成し移動します。

cmd
>mkdir c:\Users\[hoge]\cordova
>cd c:\Users\[hoge]\cordova

Cordovaプロジェクトのベースを作成します。

cmd
>cordova create hello com.example.hello HelloWorld
第1引数(hello):プロジェクトディレクトリ名
第2引数(com.example.hello):逆引きドメイン スタイル識別子と、プロジェクトを提供。
第3引数(HelloWorld):アプリケーションの表示タイトル 

実行するとCreating a new cordova project.を出力。

プラットフォームを追加する

helloに移動します。

cmd
>cd hello

今回はiosのアプリケーションを想定しているのでiosのみの追加です。androidやwindowsPhoneの場合は適宜変更必要です。また、WARNINGでてますね。iosで作ったけどビルドはできないとの事。(やっぱりMacが必要なんだね)

cmd
>cordova platform add ios
WARNING: Applications for platform ios can not be built on this OS - win32.
Using cordova-fetch for cordova-ios@~4.4.0
Adding ios project...
Creating Cordova project for the iOS platform:
        Path: platforms\ios
        Package: com.example.hello
        Name: HelloWorld
iOS project created with cordova-ios@4.4.0
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for ios
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
--save flag or autosave detected
Saving ios@~4.4.0 into config.xml file ...

現在のプラットフォームのセットを確認します。
iosがあればOKです。

cmd
>cordova platforms ls
Installed platforms:
  ios 4.4.0
Available platforms:
  android ~6.2.2
  blackberry10 ~3.8.0 (deprecated)
  browser ~4.1.0
  webos ~3.7.0
  windows ~5.0.0

3. VSCode で起動する

CordovaプロジェクトフォルダをVSCodeで開く。
image.png

デバッグモード(Ctrl + Shift + D)を開き、歯車アイコンを選択して「Cordova」を選択します。
image.png

デバッグ右のプルダウンから選択。
Simulate iOS in browser
image.png

(補足)
Run iOS on device
Run iOS on simulator は以下エラーで実行できず。

Launching for ios (This may take a while)...
Unable to launch iOS on non-mac machines

以下のように実行起動します。
image.png

ハイブリッドの実装方法は別途確認する。

以上。

開発に向けて...
Apache Cordovaで本格スマホアプリに挑戦しよう

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away