ReactNative＋ExpoでAndroidアプリを作る〜GooglePlayリリースまで〜

はじめに

ReactNativeでAndroidアプリを作ってみたいと思います。Googleディベロッパーアカウントも作成してGooglePlayで公開する所まで行いたいと思います。

御存知の通りReactNativeはiOSアプリも作れます。私も以前にiOSの方で作った事があるのですが、AppleDeveloperProgramの登録料が高いのと、AppleStore公開までの審査が厳しかったので開発を辞めてしまいました。そのため今回はiOSアプリの作成方法は割愛します。

ちなみにこちらは先日公開した麻雀の符計算アプリです。

環境構築

ReactNativeの開発環境構築から行っていきます。まずはXcodeとAndroidStudioをインストールして下さい。AndroidSturdioを起動したらエミュレータを作成しておきましょう。

また下記のコードを~/.zshrcに追記してパスを通して下さい。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

続いてNode.jsとWatchmanと、念の為iOSライブラリ管理用のCocoapodsをインストールします。

$ brew install node
$ brew install watchman
$ brew install cocoapods

更にRuntimeにJavaがいるのですがGradleというビルドツールとバージョン互換性が厳しいので下記のバージョンでインストールと設定を行います。

$ brew install java11

下記コードを~/.zshrcに追記してパスを通す。

export PATH="/usr/local/opt/openjdk@11/bin:$PATH"

※次の設定は後続のReactNativeプロジェクトの初期化後に実施する。ファイルを書き換えて後続のビルドコマンドを実行すると自動でダウンロードしてくれます。

# 下記の行のバージョンを合わせる
distributionUrl=https\://services.gradle.org/distributions/gradle-7.3.3-all.zip

テスト用アプリ作成

環境構築が完了したら試しにテストアプリを作成してみましょう。適当なディレクトリを作成して作業を行って下さい。

$ npx react-native init TestApp

Android用にアプリをビルドします。

$ npx react-native run-android

恒例のウェルカム画面が表示されれば一先ず成功です。

Expo導入

ReactNativeで一番有名なExpoフレームワークを導入します。レイアウトをCSSの様に編集出来たりします。

$ npm install -g expo-cli

Expoを導入出来たら改めてリリース用のアプリを作っていきます。

$ expo init CountUpReactNative(任意)
  Choose a template:   blank (TypeScript) ← を選択します

アンドロイドのエミュレータで起動出来れば成功です。下図の様な画像が表示されるかと思います。

$ expo start

GooglePlayに公開する準備

Googleディベロッパーアカウント作成

こちらからGoogleディベロッパーアカウントを作成します。フォームに沿って入力するだけで特に難しい情報はありません。

Androidアプリを作成

「すべてのアプリ」から「アプリを作成」を押下します。これまたフォームに沿って公開設定を行います。

Androidアプリをビルドする

app.json

下記の様なapp.jsonを作成します。

{
  "expo": {
    "name": "[アプリ名]",
    "slug": "[スラグ名]",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "versionCode": 1,
      "package": "[サイトを持っている場合はドメイン名.appname: com.example.sampleapp]|[サイトを持っていない場合は任意文字列]",
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

app-bundleファイルを作成

下記の様にビルドを実行します。ビルドに成功するとリンクが表示されるのでアクセスしてapp-bundleファイルをダウンロードして下さい。

$ expo build:android
How would you like to authenticate? › Log in with an existing Expo account ← を選択してExpoアカウントにログインすると証明書を発行してくれる。
Choose the build type you would like: › app-bundle ← を選択
Would you like to upload a Keystore or have us generate one for you?
If you don't know what this means, let us generate it! :) › Generate new keystore ← を選択

沼ポイント

Expoはデフォルト設定だと意図せず不要なパーミションリクエストをコード内で行っていることがあります。コード内でパーミッションリクエストしない設定を行うか、後続のGooglePlayでパーミッションリクエストするアプリである設定を行って下さい。

コード内で設定する場合は下記の設定を追記してビルドを実行します。
※削除するコードを明記しなくてはいけません。

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="expo.core">
  <uses-permission tools:node="remove" android:name="android.permission.READ_CONTACTS"/>
  <uses-permission tools:node="remove" android:name="android.permission.RECORD_AUDIO"/>
  <uses-permission tools:node="remove" android:name="android.permission.CAMERA"/>
  <uses-permission tools:node="remove" android:name="android.permission.READ_PHONE_STATE"/>
</manifest>

xmlns:android="http://schemas.android.com/apk/res/android"は定型文です。package="expo.core"はmainまでの相対パスを記述しています。

沼ポイント〜後日修正版〜

expoフレームワークでビルドしている場合、app.jsonによる指定が必要でした。下記の通り記述して下さい。

    "android": {
      "permissions": [],
    },

空なら何も指定していないことになります。

GooglePlayで公開する

GooglePlayConsoleでapple-bundleファイルや必要画像のアップロード、アプリ設定を行って下さい。基本「ダッシュボード」の項目に沿って入力をしていけば問題ありません。

またリリース前にクローズドなリリースをすることで動作検証を行えるのですが種類が多いので最初は迷うと思います。とりあえず「製品版」から新しくリリースを作成してGooglePlayの審査を通過すれば晴れてリリースとなります。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA