One IT Thing

IT業界を楽しむ為の学習系雑記

ionic

ionic-cli 5からcordovaを使ったハイブリッドアプリプロジェクトの作成方法が変わった

投稿日:2019年7月17日 更新日:

久しぶりにハイブリッドアプリを作ろう、ついでにionicとcordovaも最新にしよう。と作業を開始したら今までの手順と違って若干困惑した話です。

プロジェクト新規作成時にcordovaを使うか聞かれなくなり、プロジェクト作成後にcordova関連資源を追加インストールするようになったようです。

そろそろCordovaも卒業?

環境

  • Windows 10
  • Node.js 10.16.0
  • ionic 5.2.2
  • cordova 9.0.0
  • Android Studio 3.4.2

作業開始

ionic、cordovaをインストール

ionicとcordovaを最新にします。ionic 5.2.2、cordova 9.0.0が入りました。

C:\src\ionic>npm install -g ionic cordova
C:\Program Files\nodejs\cordova -> C:\Program Files\nodejs\node_modules\cordova\bin\cordova
C:\Program Files\nodejs\ionic -> C:\Program Files\nodejs\node_modules\ionic\bin\ionic
+ cordova@9.0.0
+ ionic@5.2.2
added 677 packages from 391 contributors in 116.707s

ionicプロジェクトを作成

いつも通りionicのblankプロジェクトを作ると・・・

C:\src\ionic>ionic start ocr-sample

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: blank
√ Preparing directory .\ocr-sample - done!
√ Downloading and extracting blank starter - done!

Installing dependencies may take several minutes.

  ──────────────────────────────────────────────────────────────────────

      Ionic Enterprise, platform and solutions for teams by Ionic

                  Powerful library of native APIs
                 A supercharged platform for teams
       Bring your company's designs to life with Design Systems

         Learn more: https://ion.link/enterprise

  ──────────────────────────────────────────────────────────────────────


> npm.cmd i

> node-sass@4.12.0 install C:\src\ionic\ocr-sample\node_modules\node-sass

    (snip)

 create mode 100644 tsconfig.json
 create mode 100644 tslint.json

[INFO] Next Steps:

       - Go to your newly created project: cd .\ocr-sample
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://ion.link/scaffolding-docs
       - Get Ionic DevApp for easy device testing: https://ion.link/devapp

お・・・?

今までは聞かれていた「cordovaを使うかどうか」の質問が無くなっています。

(こういうやつ)

? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes

最近ハイブリッドアプリ開発用途でionicを使っていなかったので今まで気にしていませんでした。Cordovaが入っていないので現状ではWebプロジェクトの構成になっています。

実機転送しようとしてみる

試しにこのまま実機転送しようとするとどうなるのかとやってみると、「native-run」モジュールを入れてね、とのメッセージ。

C:\src\ionic\ocr-sample>ionic cordova run android
[ERROR] native-run was not found on your PATH. Please install it globally:

        npm i -g native-run

native-runを入れてみます。

C:\src\ionic\ocr-sample>npm i -g native-run
C:\Program Files\nodejs\native-run -> C:\Program Files\nodejs\node_modules\native-run\bin\native-run
+ native-run@0.2.8
added 30 packages from 33 contributors in 4.654s

ionic infoしてみるとnative-runの項目が追加されています。今後ハイブリッドアプリを作る際はこれはインストール必須になるようです。

C:\src\ionic\ocr-sample>ionic info

Ionic:

   Ionic CLI                     : 5.2.2 (C:\Users\naka\AppData\Roaming\nvm\v10.16.0\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   Android SDK Tools : 25.2.5 (C:\Users\naka\AppData\Local\Android\Sdk)
   NodeJS            : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

再度、実機転送を実行してみるとAndroid SDK Build-Tools 28(Android 9:Pie)のライセンスに同意してないよ、とエラー。

C:\src\ionic\ocr-sample>ionic cordova run android
> ionic integrations enable cordova
[INFO] Downloading integration cordova
[INFO] Copying integrations files to project
CREATE resources
CREATE resources\splash.png

    (snip)

Warning: License for package Android SDK Build-Tools 28.0.3 not accepted.
Checking the license for package Android SDK Platform 28 in C:\Users\naka\AppData\Local\Android\Sdk\licenses

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> Failed to install the following Android SDK packages as some licences have not been accepted.
     build-tools;28.0.3 Android SDK Build-Tools 28.0.3
     platforms;android-28 Android SDK Platform 28
  To build this project, accept the SDK license agreements and install the missing components using the Android Studio SDK Manager.
  Alternatively, to transfer the license agreements from one workstation to another, see http://d.android.com/r/studio-ui/export-licenses.html

  Using Android SDK: C:\Users\naka\AppData\Local\Android\Sdk

    (snip)

このPCにはそもそもAndroid7(SDK ver25)用のSDKしか入れていませんでした。ionic5ではAndroid SDKも新しいものが要求されるようです。

Android SDK 28をインストールしてライセンスに同意する

Windowsなので手っ取り早くAndroid Studioからアップデートします。

Android StudioからSDK Managerを起動。

SDK Manager画面からAndroid 9を選択してApply。

Android 9(SDK ver28)のライセンスをAcceptします。

実機転送成功

再度、実機転送を試すと成功。

C:\src\ionic\ocr-sample>ionic cordova run android
[INFO] Hardware device(s) found for android. Using --device.
> ng.cmd run app:ionic-cordova-build --platform=android

Date: 2019-07-13T16:27:21.785Z
Hash: 8fa95b4069598d45feee
Time: 12742ms
chunk {0} 0.js, 0.js.map () 20 kB  [rendered]
chunk {1} 1.js, 1.js.map () 14 kB  [rendered]
chunk {2} 2.js, 2.js.map () 41.9 kB  [rendered]

    (snip)

> Task :app:processDebugJavaRes NO-SOURCE
> Task :app:transformResourcesWithMergeJavaResForDebug
> Task :app:packageDebug
> Task :app:assembleDebug
> Task :app:cdvBuildDebug

BUILD SUCCESSFUL in 51s
42 actionable tasks: 42 executed
Built the following apk(s):
        C:\src\ionic\ocr-sample\platforms\android\app\build\outputs\apk\debug\app-debug.apk
> native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-debug.apk --device
[native-run] Selected hardware device FA7761800334
[native-run] Installing platforms\android\app\build\outputs\apk\debug\app-debug.apk...
[native-run] Starting application activity io.ionic.starter/io.ionic.starter.MainActivity... [native-run] Run Successful

まとめ

最終的にはconfig.xmlが作られて今まで通り実機転送は出来ましたが、ionic5ではプロジェクト作成時、cordovaを使用するかどうかの選択肢はデフォルトで出ないことが分かりました。

ionicがCapacitorを投入したことで、ハイブリッドアプリを作る際の標準はcordovaでは無くなったんだよ、というdrifty corporationからの意思表示でしょうかねぇ。

-ionic
-, ,

執筆者:

関連記事

キャッシュされているはずのServiceWorker資源にオフラインアクセス出来ない(Workbox + ionicons)

そのHTTPリクエストしたファイル資源、ひょっとしてURLパラメータついてたりしませんか? 目次1 事象2 原因3 対処 事象 ionic3(SPA)でWorkboxを使ったServiceWorker …

History APIを使ってIonic(3以前のSPA)でブラウザの戻るボタンやAndroidバックキーを押すと前サイトに戻ってしまう件に対応する

Ionic2や3ではまだAngular Routerを採用していなかったので、ページ遷移をしてもブラウザ履歴が積まれず、Androidのバックキーやブラウザの戻るボタンを押すとサイトに入ってくる前のペ …

ionicアプリ全体のフォントサイズを変更

設定画面でフォントサイズを変更する、こういうのをionicで作ります。HTML、CSSレベルの概念だけで実現出来ます。 フォント小フォント大 目次1 実装1.1 環境1.2 画面HTML 1.3 ロジ …

ionic3(SPA)のServiceWorkerライブラリをsw-toolboxからWorkboxに切り替える

昨今は閲覧速度向上やオフラインでも使える利便性が求められ、Webアプリ開発とPWAはセットで考えられるようになってきましたね。 PWAは「ServiceWorker API」を使ってキャッシュする資源 …

ionicアプリを多言語化する

目次1 目的2 環境3 手順1.インストール4 手順2.src/assets/i18nに翻訳ファイルを作成する5 手順3.app.module.tsにngx-translate関連のモジュールを登録す …


shingo nakanishi。東京で消耗中の職歴20年越え中年ITエンジニアです。「生涯現役プログラマを楽しむ」ことができる働き方探しをライフワークにしています。

19歳(1996年)から書き始めた個人日記が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。