JavaもSwiftも知らん素人がIonicでスマホアプリをつくる（その2 アプリリリース編）

## 背景

[JavaもSwiftも知らん素人がIonicでスマホアプリをつくる（その1 開発準備とテストアプリ作成編）](https://qiita.com/kakiuchis/items/b531af5a67397f0f5db9)の続き。
で、アプリ作りこむとか、最初はそんなん後回し。
まずはリリース。リリースが一番大事。
まずは世に出す。

## WidgetIdの変更

あんま気にしなくていいんだが、WidgetIdというのが世のリリース済アプリと同じだとリリースできないので変えて置く必要がある。

下記のように`アプリ名/config.xml`の2行目の`widget id`を適当に変更。

```アプリ名/config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starterrrrrrrrrrrrrrrr" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
```

## Androidアプリに変換する

ちまただと`ビルド`とか言われるが、そんな用語はどーでもいい。
とりあえず下記コマンドを打つと、HTML, CSS, Javascriptで書いたコードがAndroidアプリなソースコードに変換されるのだ。

```
$ ionic cordova build android --prod
```

下記のようにビャーーーって文字がでてくる。気にするな。英語は気にしない。

[![Image from Gyazo](https://i.gyazo.com/bebfaa14610ff0b5297ad7510bd2607e.png)](https://gyazo.com/bebfaa14610ff0b5297ad7510bd2607e)

## ビルド中にエラー発生

ログの下部に予期しないエラー。

```
File C:\Users\kakiuchi\.android\repositories.cfg could not be loaded.
Checking the license for package Android SDK Platform 27 in C:\Users\kakiuchi\AppData\Local\Android\sdk\licenses
Warning: License for package Android SDK Platform 27 not accepted.

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':CordovaLib'.
> You have not accepted the license agreements of the following SDK components:
  [Android SDK Platform 27].
  Before building your project, you need to accept the license agreements and complete the installation of the missing components using the Android Studio SDK Manager.
  Alternatively, to learn how to transfer the license agreements from one workstation to another, go to http://d.android.com/r/studio-ui/export-licenses.html

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

* Get more help at https://help.gradle.org

BUILD FAILED in 3m 10s
cmd: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.
```

なんやこれ。
とりあえず`Android Studio SDK Managerで「Android SDK Platform 27」をacceptすればよい`とあたりをつける。
どうやらAndroid StudioのConfigureからSDK Managerを選択できて27っぽいやつを選択して様子を見る。

[![Image from Gyazo](https://i.gyazo.com/064888c3e75a1fe8257fc5e0a493b014.png)](https://gyazo.com/064888c3e75a1fe8257fc5e0a493b014)

すると下記のようになり、Android SDK Platform 27っぽいのがダウンロードされてる。これはいけるぞ。

[![Image from Gyazo](https://i.gyazo.com/4df66be0ad7f037e13ccf7b048820d40.png)](https://gyazo.com/4df66be0ad7f037e13ccf7b048820d40)

いけた。

[![Image from Gyazo](https://i.gyazo.com/691370fd36afb81d535a3f4a65f9e631.png)](https://gyazo.com/691370fd36afb81d535a3f4a65f9e631)

よゆうやな。

すると`アプリ名/platforms/android`というディレクトリが出来上がって、その中にAndroidアプリなソースコードがジャブジャブに入っている。

[![Image from Gyazo](https://i.gyazo.com/751b5404347bb61e1e3b6642ad581bfa.png)](https://gyazo.com/751b5404347bb61e1e3b6642ad581bfa)

## AndroidStudioでの起動確認

このディレクトリ`アプリ名/platforms/android`をAndroidStudioから開きます。

[![Image from Gyazo](https://i.gyazo.com/9b087ef09c40d3074816659edfbd86be.png)](https://gyazo.com/9b087ef09c40d3074816659edfbd86be)

## AndroidStudioでの起動確認中にエラー発生

なんやまた。

[![Image from Gyazo](https://i.gyazo.com/78ce1d559804b78eea308781b4d4cb28.png)](https://gyazo.com/78ce1d559804b78eea308781b4d4cb28)

エラーメッセージはこんな感じ。

```
The minSdk version should not be declared in the android manifest file. You can move the version from the manifest to the defaultConfig in the build.gradle file.
<a href="remove.sdk.from.manifest">Move minSdkVersion to build files and sync project</a>
Affected Modules: <a href="openFile:C:/Users/kakiuchi/ionic/test04/platforms/android/CordovaLib/AndroidManifest.xml">CordovaLib</a>, <a href="openFile:C:/Users/kakiuchi/ionic/test04/platforms/android/app/src/main/AndroidManifest.xml">app</a>	
```

Google翻訳すると`minSdkのバージョンは、Androidのマニフェストファイルでではなくbuild.gradleファイルのdefaultConfigかけ`ということっぽい。

そしてAndroidのマニフェストファイルはどうやら`アプリ名/platforms/android/CordovaLib/AndroidManifest.xml`と
`アプリ名/platforms/android/app/src/main/AndroidManifest.xml`にあるっぽいな。

そしてbuild.gradleファイルは`アプリ名/platforms/android/app/buiid.grade`に発見。

ということで、まずは`アプリ名/platforms/android/CordovaLib/AndroidManifest.xml`の編集。

```【変更前】アプリ名/platforms/android/CordovaLib/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="org.apache.cordova" android:versionName="1.0" android:versionCode="1">
    <uses-sdk android:minSdkVersion="19" />
</manifest>
```

の下から2行目の`<uses-sdk android:minSdkVersion="19" />`を削除。

```【変更後】アプリ名/platforms/android/CordovaLib/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="org.apache.cordova" android:versionName="1.0" android:versionCode="1">
</manifest>
```

つぎに`アプリ名/platforms/android/app/src/main/AndroidManifest.xml`の編集。

```【変更前】アプリ名/platforms/android/app/src/main/AndroidManifest.xml
<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="io.ionic.starter" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-sdk android:minSdkVersion="19" android:targetSdkVersion="27" />
</manifest>
```

ここの下から2行目の`<uses-sdk android:minSdkVersion="19" android:targetSdkVersion="27" />`を削除。

```【変更前】アプリ名/platforms/android/app/src/main/AndroidManifest.xml
<?xml version='1.0' encoding='utf-8'?>
<manifest android:hardwareAccelerated="true" android:versionCode="1" android:versionName="0.0.1" package="io.ionic.starter" xmlns:android="http://schemas.android.com/apk/res/android">
    <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true" />
    <uses-permission android:name="android.permission.INTERNET" />
    <application android:hardwareAccelerated="true" android:icon="@mipmap/icon" android:label="@string/app_name" android:supportsRtl="true">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>
```

最後に`アプリ名/platforms/android/app/buiid.grade`の編集。


```【変更前】アプリ名/platforms/android/app/buiid.grade
# 省略
android {

    defaultConfig {
        versionCode cdvVersionCode ?: new BigInteger("" + privateHelpers.extractIntFromManifest("versionCode"))
        applicationId privateHelpers.extractStringFromManifest("package")

        if (cdvMinSdkVersion != null) {
            minSdkVersion cdvMinSdkVersion
        }
    }
  # 省略
}
# 省略
```

で`minSdkVersionが19でtargetSdkVersionが27`であると追記。

```【変更後】アプリ名/platforms/android/app/buiid.grade
# 省略
android {

    defaultConfig {
        minSdkVersion 19
        targetSdkVersion 27
        versionCode cdvVersionCode ?: new BigInteger("" + privateHelpers.extractIntFromManifest("versionCode"))
        applicationId privateHelpers.extractStringFromManifest("package")

        if (cdvMinSdkVersion != null) {
            minSdkVersion cdvMinSdkVersion
        }
    }
  # 省略
}
# 省略
```

するとこんな感じになってビルドエラーはクリア。

[![Image from Gyazo](https://i.gyazo.com/94f2c876bbeb397022cfd4de11e0892a.png)](https://gyazo.com/94f2c876bbeb397022cfd4de11e0892a)

そしてAndroid Studio画面右上の緑▽ボタン（Run app）を押す。

[![Image from Gyazo](https://i.gyazo.com/4c666c86dcbfa29de9ae3052c2c52d6a.png)](https://gyazo.com/4c666c86dcbfa29de9ae3052c2c52d6a)

しかし右下に新たなエラー発生。

```
Emulator: emulator: ERROR: x86 emulation currently requires hardware acceleration!
```

なんやまた。
とりあえずエラーメッセでググる。

じゃあ`Intel x86 Emulator Accelerator`を何やかんやせよということらしい。
参考サイト：[Androidエミュレーター(AVD)が起動せずに「Emulator: emulator: ERROR: x86 emulation currently requires hardware acceleration」とエラー表示された場合](https://www.javadrive.jp/android/emulator/index9.html)

で再度Android Studioを起動してRun app。

[![Image from Gyazo](https://i.gyazo.com/88a59d0e1f04cb41e6cb4bbb7168379c.png)](https://gyazo.com/88a59d0e1f04cb41e6cb4bbb7168379c)

するとこんな感じでスマホアプリの画面デモが表示されます。
よゆうやな。

これをちまたではエミュレーションとかいうらしいですが、そんな言葉はどうでもいいでしょう。

## APKファイルとかいうやつを作る

Androidアプリをリリースするためには、Android StudioのプロジェクトをまとめてドカンとAPKファイルというやつに変換する必要がある。
そしてそのあとAPKファイルに署名（自分のだよという証明）をする必要がある。

まずはAndroid Studioのメニューバーの`Build`から`Generate Singled APK...`というのをクリック。
下記のような画面がでてきて`Android App Bundle`を選択してNext
（Android App BundleというのはGoogle Playへアップロードするための新しい形式らしいが、あんま難しいことは気にしない）

[![Image from Gyazo](https://i.gyazo.com/4a0e5e610bca058f3a09520e3135b044.png)](https://gyazo.com/4a0e5e610bca058f3a09520e3135b044)

すると下記のようなKeyを作る画面になる。これが署名的な要素を担う。
このKeyはアプリをリリースするときやバージョンアップするときに必要な大事なものだ。
ちゃんとやろう。

[![Image from Gyazo](https://i.gyazo.com/0d059919f08febca3812390555cfc0ea.png)](https://gyazo.com/0d059919f08febca3812390555cfc0ea)

まず初作成の場合は`Create new`

[![Image from Gyazo](https://i.gyazo.com/24de4f35ca9a5b6b64de4a252a73ddb1.png)](https://gyazo.com/24de4f35ca9a5b6b64de4a252a73ddb1)

各項目は下記のようなイメージだ。

|英語|日本語|
|:--|:--|
|Key store path|Key storeとなるファイルの場所とファイル名|
|Password|Key storeのパスワード|
|Confirm|Key storeのパスワードの確認|
|Alias|Keyのニックネーム的なもの|
|Password|Keyのパスワード|
|Confirm|Keyのパスワードの確認|
|Validity|Keyの有効期間|
|First and Last Name|氏名|
|Organization Unit|組織の部門名|
|Organization|組織名|
|City or Locality|住んでる市|
|State or Province|国|
|Country Code|国番号、日本は81|

`Key Store`と`Key`は別物だ。違いは下記URLに書いてるが、眠かったので読んでも理解できなかった。
https://blog.aroundit.net/android-keystore-alias/

きにぜず、その後、デフォのまますすんで下記画面で`release`を選んでフィニッシュ

[![Image from Gyazo](https://i.gyazo.com/fe5f0f085e3b64ebcec18a6be1a2bac0.png)](https://gyazo.com/fe5f0f085e3b64ebcec18a6be1a2bac0)


## Google Playの申請

ついに申請だ。

### GooglePlayConsole登録

GooglePlayにアプリを公開するためにはGooglePlayConsoleというところへ開発者登録をしないといけない。
そして残念ながら初回のみ25$のお金が必要だ。（どんまい。きにすんな。呑み会1回分だ。がまんの時。）

下記から登録を進める。
https://play.google.com/apps/publish/signup
お金は払う以外は簡単なのでやり方は割愛する。

順調にいくと下記画面にたどり着く。

[![Image from Gyazo](https://i.gyazo.com/392151b7eb324a87df21f0c33609d4bb.png)](https://gyazo.com/392151b7eb324a87df21f0c33609d4bb)

### ストア掲載情報

`アプリの作成`をクリックすると下記画面に行く。

[![Image from Gyazo](https://i.gyazo.com/11315d81e26de529b081329d7b889d8b.png)](https://gyazo.com/11315d81e26de529b081329d7b889d8b)

てきとーに入力して保存。
これは下記のようなGooglePlayのアプリ画面の情報たちの登録にあたる。

[![Image from Gyazo](https://i.gyazo.com/26ca7d380aa69d595447fdf6b36e0e8a.png)](https://gyazo.com/26ca7d380aa69d595447fdf6b36e0e8a)

### アプリのリリース

左のカラムから`アプリのリリース`を選ぶ

[![Image from Gyazo](https://i.gyazo.com/2169f215ca49c74af0a389396b1c4394.png)](https://gyazo.com/2169f215ca49c74af0a389396b1c4394)

`追加するAndroid App BundleとAPK`で、さきほど作ったAKPファイルを入れる。
ただし拡張子はakpでない。
なんか進化しているAndroid App Bundleという形式でつくったので、拡張子はaabだ。

細かいことは気にしない。
とりあえず`アプリ名\platforms\android\app\release\app.aab`をドロップ。

その他は適当に入力でOKでしょう。

### コンテンツのレーティング

特に難しくないでしょう。割愛

### 価格と配布

特に難しくないでしょう。割愛

### もっかいアプリのリリース

全部ちゃんと回答していると`製品版として公開を開始`がクリックできる。

[![Image from Gyazo](https://i.gyazo.com/7f2b71118ce4f1ea93828e425a3311a5.png)](https://gyazo.com/7f2b71118ce4f1ea93828e425a3311a5)

クリックして数時間たてば、もう公開されてます。よゆうやな。（今回はじゃっかんエラーおおめで焦った。）
おめでとう。Androidアプリエンジニアです。

[![Image from Gyazo](https://i.gyazo.com/10afa3e7c5fcb05eace2c630fbc7a191.png)](https://gyazo.com/10afa3e7c5fcb05eace2c630fbc7a191)

MacないのでiOSアプリの検証でけへん。