PCのディスプレイを大型にするメリットとデメリット
のえる
Web技術で開発！アプリ開発のCordovaをインストールしてみた
のえる
スマホアプリの開発にはSwiftやObjective-C、JavaやKotlinなどの言語を覚える必要があります。
そしてプラットフォームごとに覚える言語やビジネスロジックなどが異なるため、学習コストは2倍以上・・・。
そんな悩みを解決するのがオープンソースの Cordova です。
Cordova は HTML や CSS、Javascript などのWeb技術を使ってクロスプラットフォームの開発ができる便利なツールです。
今回はCordovaをMacにインストールしてみましたので備忘録として記録していきます。
目次
はじめに
まず Cordova ですが、単品では起動しません。
iOSアプリ開発には Xcode、Androidアプリ開発には Android Studio と Android SDK が必要です。
それぞれダウンロードとインストールを行っておきましょう。
Homebrewをインストール
前提条件
Mac のパッケージ管理システムである Homebrew をインストールしましょう。
brew コマンドはXcodeが必要となります。
AppStore から Xcode をインストールしておきましょう。
HomeBrewのインストール
Homebrew をインストールをしていきます。
公式サイト に記載されているインストールコマンドを実行します。
|
1 2 3 |
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)" |
インストール後は状態を確認します。
|
1 2 3 |
$ brew doctor |
Your system is ready to brew. と表示されればOKです。
nodebrew, Node.JSのインストール
Cordova は Node.js で実行されているので、Nodeをインストールしていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
# nodebrewのインストール(Catalinaの場合) $ curl -L git.io/nodebrew | perl - setup # Node.jsのインストール(installの後は好きなバージョンを指定) $ nodebrew install v14.4.0 # インストールされているNode.jsのバージョン一覧を表示 $ nodebrew ls # 使用するバージョンを設定 $ nodebrew use v14.4.0 |
もし
nodebrew が使用できない場合
brew install nodebrew の実行後に表示される説明に、パスを設定するコマンドが出ます。
そのコマンドを実行してからやってみてください。
Cordovaのインストール
では本命の Cordova をインストールします。
|
1 2 3 |
$ npm install -g cordova |
ここまで来ればインストールが完了します。
記事執筆時点の私の環境は下記のとおりです。
- Homebrew: 2.4.0
- nodebrew: 1.0.1
- node: v14.4.0
- npm: 6.14.5
- Cordova: 9.0.0 (cordova-lib@9.0.1)
Cordova プロジェクトを作る
Cordovaがインストールできたら、プロジェクトを作成していきましょう。
プロジェクト作成コマンドは下記のとおりです。
|
1 2 3 4 5 6 7 |
# プロジェクト作成 $ cordova create [プロジェクト名] # プロジェクトの中に移動 $ cd [プロジェクト名] |
プロジェクトが出来たら中に入り、プラットフォームを指定します。
|
1 2 3 |
$ cordova platform add ios android browser |
これで各プラットフォーム用のディレクトリの中身ができました。
Cordovaを実行
では早速Cordovaを実行しましょう。
|
1 2 3 4 5 6 7 8 9 10 |
# iOSの場合(** BUILD SUCCEEDED ** が出れば成功) $ cordova build ios # Androidの場合(BUILD SUCCESSFUL in が出れば成功) $ cordova build android # Webの場合 $ cordova build browser |
ファイルを操作する場所は プロジェクト > www の中です。
(platformsの各プラットフォーム内にあるファイルは、ビルドすると消されてしまいます)
ブラウザやエミュレータが起動して、Cordovaのマークのページが表示されれば成功です。
補足
実行可能なデバイスの一覧と指定は下記のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 |
# デバイス一覧を表示 $ cordova run --list # デバイスを指定して実行(live-reloadと併用可能) $ cordova run ios --target=<対象のID> $ cordova run ios --target=iPhone-11,\ 13.5 # 実機をつないで実行(live-reloadと併用可能) $ cordova run ios --device |
また、iOSの実機実行時に証明書エラーが出る場合、Xcodeプロジェクトが中にありますので、Xcodeで開いて証明書を設定しましょう。
文字化けする場合
もし実機にインストールして日本語が文字化けする場合、HTMLファイルに下記のテキストを追加すると治ります。
|
1 2 3 |
<meta charset="UTF-8"> |
Androidのビルドが通らない時
Android Studioをインストールしても、Androidのビルド時に 「Could not find an installed version of Gradle either in Android Studio, or on your system to install the gralde wrapper. Please include gradle in your path, or install Android Studio」 が出る場合、Gradleまでのパスが通っていない事に起因します。
その場合、下記の処理で対応できます。
|
1 2 3 4 5 6 7 8 9 10 |
# Bashプロファイルを開く open ~/.bash_profile # 一番下に追記して保存(Gradleのバージョンはインストールさ入れているものを選んでください) export PATH=/Users/[ユーザー名]/.gradle/wrapper/dists/gradle-5.6.4-all/[ランダム文字列]/gradle-5.6.4/bin:$PATH # 設定を判定 source ~/.bash_profile |
Androidアプリのリリース
Androidアプリのリリース版を作成する場合は下記のコマンドになります。
|
1 2 3 |
$ cordova build android --release |
リアルタイムで改修できるようにする
プログラムを改修してから再度ビルドするのはとても手間です。
そのため、ソースの変更を監視して随時反映するプラグインが Cordova には用意されていますので、それをインストールしましょう。
|
1 2 3 |
$ cordova plugin add cordova-plugin-browsersync-gen2 |
インストールが終わったら、アプリを実行していきましょう。
|
1 2 3 4 5 6 7 8 9 10 |
# iOSの場合 $ cordova run ios --live-reload # Androidの場合 $ cordova run android --live-reload # Webの場合 $ cordova run browser --live-reload |
ブラウザや各エミュレータが起動したら、画面に表示された LOCAL か EXTERNAL を選択すれば、画面が表示されます。
補足
プラグインはプロジェクトごとにインストールが必要のようですので、プロジェクト作成時にプラグインをインストールするようにしましょう。
iOSのWKWebView対応
iOSは昔から UIWebView を使用していましたが、WKWebView への変更が義務化されました。
WKWebViewを使用するためのプラグインも用意されています。
|
1 2 3 4 5 6 7 8 9 10 |
# WKWebViewを使用するプラグイン $ cordova plugin add cordova-plugin-wkwebview-engine # アプリからブラウザを利用するプラグイン $ cordova-plugin-inappbrowser # CROSオリジン対策プラグイン $ cordova plugin add cordova-plugin-wkwebview-file-xhr |
そして config.xml に追記をしましょう。
|
1 2 3 4 5 6 7 8 9 10 |
<platform name="ios"> <preference name="WKWebViewOnly" value="true" /> <feature name="CDVWKWebViewEngine"> <param name="ios-package" value="CDVWKWebViewEngine" /> </feature> <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" /> </platform> |
UIWebViewを使っているかどうか
ビルドした結果からUIWebViewを使用しているかを確認できます。
|
1 2 3 4 |
# Cordovaのプロジェクト内で実行 nm ./platforms/ios/build/emulator/[アプリ名].app/[アプリ名のファイル] | grep UIWebView |
これで一覧が表示されれば、UIWebViewを使用しています。
Javascriptが動かな場合
HTMLとCSS、Javascriptで作成できるCordovaですが、最初に作成した時点ではJavascriptが動かない場合があります。
その場合は、下記のテキストをHTMLファイルに記載すると動くようになります。
|
1 2 3 |
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *; img-src 'self' data: content:;"> |
さいごに
これで Cordova で開発する環境が用意できました。
Web技術だけでアプリが開発できるのは素晴らしいですね。
プラグインも豊富なので一度作成してみるのはいかがでしょうか？
POPULAR
-
エンタメ
2021.11.16 のえる
-
ノウハウ
非同期で呼び出したPHPで重い処理をしてもタイムアウトさせない方法
2021.11.02 のえる
のえる
Full-stack Developer
人気記事
