Android用のハイブリッドアプリを構築してみる。。。～開発環境の整備～

はじめに

Androidで動作するハイブリッドアプリを構築してみたいと思います。 「Androidで動作する」としたのは、小生がAndroidユーザで、iOSのPCを持っていないためです。
今回は、必要となるプロダクトのインストールを記載します。

構築するAndroidアプリの条件

• ハイブリッドアプリとする
• Android向けのみで、iOS版は無視
• ハイブリッドアプリのフレームワークとしてCordovaを使用する
• ハイブリッドアプリ内部のHTMLの見た目の部分は、SemanticUIを使用する
• ハイブリッドアプリ内部のHTMLのJavaScript部分は、Vue.jsを使用する

こんな感じで考えています。

Node.jsのインストール

Node.jsをインストールすることで、 npmコマンドが使用できるようになり、
Node.jsの様々なライブラリやツールをインストールすることでができます。
今回構築しようとしているアプリでは、Cordovaを使いたいのですが、
npmコマンドを使用して、Cordovaのコマンドラインツールが使用できるようになります。

Node.jsのダウンロード

Node.jsのページから、Node.js本体をダウンロードできます。

Node.jsのmsiファイル

Node.jsのインストール

• ダウンロードしたmsiファイルをダブルクリックで実行
• Windowsの警告が表示されるけど、無視して「インストール」ボタンをクリック
  
• Node.jsのセットアップ画面で、「Next」ボタンをクリック
  
• Agreementを選択して、「Next」ボタンをクリック
• インストール先を選択して、「Next」ボタンをクリック
  
• インストールのカスタム設定の画面は、そのまま「Next」ボタンをクリック
  
• オプション指定はせずに「Next」ボタンをクリック
  
• ようやく「Install」ボタンをクリック
  
• インストール完了

Node.jsのインストール確認

• 正しくインストールされているかnodeコマンド・npmコマンドでバージョンを見て確認します。

C:\Users>node -v
v12.16.3

C:\Users>npm -v
6.14.4

Android Studioのインストール

Android Studioのダウンロード

こちらからAndroid Studioをダウンロードします。

Android Studioのインストール

• ダウンロードしたインストーラーを実行
• Windowsの警告が表示されるけど、無視して「インストール」ボタンをクリック
• Welcome画面が表示されるので、「Next」ボタンをクリック
• コンポーネントの選択画面が表示されるので、そのまま「Next」ボタンをクリック
• インストール先の画面が表示されるので、こちらもそのまま「Next」ボタンをクリック
• メニューフォルダの設定が表示されるので、やはりそのままで「Install」ボタンをクリック
• インストールが開始されます。
• コンプリート画面が出れば完了

パスを設定する

• システム環境変数のPathに以下を追加する
  • C:\Users\username\AppData\Local\Android\Sdk\platform-tools\
  • C:\Users\username\AppData\Local\Android\Sdk\tools\

Cordovaコマンドラインツールのインストール

npmでCordovaコマンドラインツールをインストールする

npm install cordova -g

• 「-g」を付与することでグローバルな領域へのインストールとなる
• インストールには、そこそこ時間がかかります。

Cordovaコマンドラインツールのインストール確認

cordovaコマンドを実行して、インストールされてているか確認する

C:\androidApp>cordova -v
9.0.0 (cordova-lib@9.0.1)

Gradleのインストール

Gradleのダウンロード

こちらのComleteからGradleをダウンロードする。

Gradleの展開

• C:\Program Files\Android\Android Studio配下にGradleフォルダを作成する。
• ダウンロードしたZIPファイルをGradleフォルダに展開する

パスの設定を行う

• システム環境変数にGRADLE_HOMEを追加
  • 変数値は、C:\Program Files\Android\Android Studio\Gradle\gradle-6.3を設定
• システム環境変数のPathに以下を追加する
  • %GRADLE_HOME%\bin\

プロジェクトの作成

プロジェクトの作成

以下のcordovaコマンドを実行し、プロジェクトを作成します

C:\>cordova create ./androidApp/notfunny com.notfunny NotFunny -d
Using detached cordova-create
Creating a new cordova project.
Copying assets.

• cordova create フォルダ 識別子 アプリ名 オプション
• フォルダ：プロジェクトを作成するフォルダを指定する
• 識別子：アプリの識別子を設定する
• アプリ名：アプリ名を指定する
• オプション：-dを指定すると、実行中の途中経過を表示する

作成されたプロジェクトの確認

cordova createで指定したフォルダにプロジェクトが作成されています

プラットフォームの追加

プラットフォームの追加をすることで、AndroidやiOSのプロジェクトファイルが追加される

C:\>cd C:\androidApp\notfunny
C:\androidApp\notfunny>cordova platform add android
Using cordova-fetch for cordova-android@^8.0.0
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.notfunny
        Name: NotFunny
        Activity: MainActivity
        Android target: android-28
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@8.1.0
Plugin 'cordova-plugin-whitelist' found in config.xml... Migrating it to package.json
Discovered saved plugin "cordova-plugin-whitelist". Adding it to the project
Installing "cordova-plugin-whitelist" for android
Adding cordova-plugin-whitelist to package.json

プラットフォームの確認

以下のコマンドでどのようなプラットフォームに向けて開発されているのかを知ることができます。

C:\androidApp\notfunny>cordova platform ls
Installed platforms:
  android 8.1.0
Available platforms:
  browser ^6.0.0
  electron ^1.0.0
  ios ^5.0.0
  osx ^5.0.0
  windows ^7.0.0

• installedに「Android」があるので、Android向けであるとわかります。

エミュレータの起動

• コマンドの実行
  以下のコマンドでAndroidエミュレータを起動します。

C:\androidApp\notfunny>cordova emulate android -d

• エミュレータ起動
  

• ハイブリッドアプリの実行

  • すべてのアプリを表示
    
  • インストールされているnotFunnyをクリックする
    
    C:\androidApp\notfunny\www\index.htmlの内容が、ブラウザでなく、アプリっぽく表示されています。

はまった点

エミュレータの起動時にGradleのエラー

cordova emulate android -dを実行してエミュレータを起動した際、下記のエラーが発生した。

Could not find an installed version of Gradle either in Android Studio…

上記のGradelのインストールを行うことで解消した。

エミュレータの起動時にBuild failed with an exception.のエラー

Android SDKのパスを通す際、
*C:\Users\username\AppData\Local\Android\Sdk\tools*にもパスを通す必要があります。 こちらを忘れるとエミュレータ起動時にエラーが発生します。

エミュレータの起動時にCordovaError: No emulator images (avds) found.のエラー

要するにAndroid Virtual Deviceのイメージがないと言っています。
Android Studioから[AVD Manager]から、どのようなサイズのAndroid端末でエミュレートするかを作成します。

まとめ

Node.jsインストール時にWindowsの警告が表示されるのは、お初な現象でしたが、
こちらで記載されている方法で警告が表示されないようにできるようです。

また、Gradleが必要になったり、参照している本の内容だけでは一筋縄ではいかない感じです。

今後は、Cordovaのプラグインを使いながら、ハイブリッドアプリを構築し、
最終的にはPlayStoreで公開するところまで、できたらと思います。

今回は、これくらいで・・・