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

ハイブリッドプロジェクト開発(三)Cordovaプロジェクトを作ってXCode上に動かします

More than 1 year has passed since last update.

Cordovaの特徴

Cordova(コルドバ)とは、オープンソースのハイブリッドアプリ開発フレームワークです。複数のプラットフォームで動作するモバイルアプリをワンソースで開発できます。
Cordovaは、Web標準技術(HTML5+CSS+JavaScript)を使って、iPhone/Androidなどの複数のモバイルOSに対応したクロスプラットフォームなアプリを開発することができるフレームワークです。
複数のOSに対してそれぞれネイティブアプリを開発する作業と比較すると、1つのソースコードで複数OSに対応できるため、大幅に開発コストを削減できます。Webアプリと同様の技術で開発するため学習コストも削減できます。

Cordova CLIのインストール

Cordova CLIとは、Cordovaのコマンドラインインターフェイスです。
Cordova CLIのインストーラは、前章で述べたnpmパッケージにありますので、以下でnpmからCordovaのCLIをインストールしましよう。

npm install -g cordova
#以下の結果が表示
added 438 packages from 349 contributors in 20.705s
╭───────────────────────────────────────────────────────────────╮
│       New minor version of npm available! 6.7.0 → 6.9.0       │
│   Changelog: https://github.com/npm/cli/releases/tag/v6.9.0   │
│               Run npm install -g npm to update!               │
╰───────────────────────────────────────────────────────────────╯

インストール完了後、バージョンを確認しておきます。
🌾アプリはiOSエミュレータで確認すれば、[ios-sim]がインストールされていないと「cordova run」できないようです。[ios-sim]がインストールすれば「npm install -g ios-sim」を実行します。

cordova -v
9.0.0

Cordovaプロジェクトの作成

Cordova CLIを使って、プロジェクトの作成を行います。今回は“Hello Cordova!”が表示されるCordovaプロジェクトを作ります。
ちなみに、このプロジェクトはiOSまたはAndroid全部使える対象とします。

#プロジェクト作成コマンドの構造: cordova create ディレクトリ名 識別子 アプリ名
cordova create HelloCordova com.demo hellocordova
#以下が表示された
Creating a new cordova project.

プロジェクトの構築は以下の様子です。
スクリーンショット 2019-04-02 22.00.07.png
HelloCordovaというディレクトリが作成されたので、次の処理を行う前にHelloCordovaに移動は必要です。

プラットフォームの作成

wwwフォルダにかかれた内容はbuildをすると、platformsの中にデバイスごとに生成されます。
アプリはplatformsに作られた内容を参照します。
そのため、platformsには各デバイス用のディレクトリを用意してあげなくてはいけません。

デバイス別に、コマンドを以下の通りです。
iosデバイス: cordova platform add ios
iosシミュレーター: cordova platform add ios-sim
androidデバイス: cordova platform add android

今回は、iosなので、以下を実行します。

cd HelloCordova
cordova platform add ios
#以下が表示
iOS project created with cordova-ios@5.0.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

プラットフォームの配下は以下の様子です。
スクリーンショット 2019-04-02 22.00.39.png
追加したらプラットフォームの確認をしておきましょう。

cordova platform ls
#以下が表示
Installed platforms:
  ios 5.0.0
Available platforms: 
  android ^8.0.0
  browser ^6.0.0
  electron ^1.0.0
  osx ^5.0.0
  windows ^7.0.0

🌾削除コマンドは次の通りです。
cordova platform rm ios
あとはビルドやデバッグをVSCodeの拡張機能を使って実行できるようにします。

Cordovaプロジェクトのビルド

Cordovaプロジェクトを作った際にwww下にあるファイルはcordovaのサンプル用ファイルです。
Cordovaプロジェクトをビルドすると、wwwフォルダのものによってplatformsの中にデバイスごとに生成されます。
アプリ実行する時には、platformsに作られた内容を参照します。

デバイス別に、コマンドを以下の通りです。
iosデバイス: cordova build ios
iosシミュレーター: cordova build ios-sim
androidデバイス: cordova build android

今回は、iosなので、以下を実行します。

cd HelloCordova
cordova build ios
#ビルドの最後に以下が表示された
** BUILD SUCCEEDED **

iosデバイスでプロジェクトを実行

実機に入れての確認については、androidはすぐに確認できますが、iosはXCodeに登録されていないと実機に登録できない仕組みになっています。

iPhone実機で確認手順は以下の通りです。
1. iPhoneをUSBで繋げます。
ここで、run実行してみても構いませんが、実機をつなげていても、エミュレータがたち上がります。

cordova run ios
#以下のメッセージが出た
No target specified for emulator. Deploying to undefined simulator

XCode設定

iosの実機でアプリを実行したい場合は、Appleに収めるものを収めて、メンバーになっているならばxcodeに設定をします。
下図のように、platforms/ios/hellocordova.xcodeprojをXCodeで開きます。
スクリーンショット 2019-04-02 22.28.19.png
下図のように、アプリを実行します。
スクリーンショット 2019-04-02 22.42.41.png
実行結果は以下です。
スクリーンショット 2019-04-02 22.39.39.png
「hellocordova」をダブルクリックすると、アプリが実行されました。画面の以下の様子です。
スクリーンショット 2019-04-02 22.44.41.png


✨✨✨次の文章: ハイブリッドプロジェクト開発(四)VSCodeでJavaScriptプロジェクトを開発します

Why not register and get more from Qiita?
  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
No 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
ユーザーは見つかりませんでした