React NativeとExpoでアプリをリリース

プログラミング

React Native

Expo

React NativeとExpoを利用して「のっティ時刻表」アプリを作成しリリースしました。 Expoを利用したビルドから、Android版アプリのリリースまでの概要を記載しています。

同じようにReact Nativeでクロスプラットフォーム開発がしたいという方、Expo使うとどんな感じなのかと悩んでいる方の参考になればと思います。

リリースしたアプリ-のっティ時刻表

結論を先に言うと

React native+Expoを用いることで簡単なアプリですがすぐできました。ビルド・リリースも簡単でした。

Expoを使うことで、プログラムの変更を即時エミュレータやテスト端末に反映させることができる（ホットリロード機能）
コンポーネントが用意されているので、そのまま利用するだけでもそこそこ完成する
広告を表示するためのAdmobのコンポーネントなどを利用しました
最後までExpoを使うことでビルドも簡単、ストア認証用の鍵情報なども管理してくれる
一つのプログラムでAndorid・iOS両方のアプリが実装できる
まだ経験できていないが、Expo使っているとできないことや不便になることがあります
ネイティブAPIについて、Expo側で用意されているものしか利用できません
その場合はビルド前にExpoを取り除いてから、自分で開発してビルドすることになります

概要

Expoを使ってみる
Expoアプリをスタート
実機で動作確認
ビルド
Google Playへアップロード・必要事項を入力

Expoを使ってみる

「Snack」というWebIDEを使うことでお手軽に始めることができます。
最終的にはローカルのIDEをやエディタを利用したほうがいいですが、動作や使い勝手を試してみると言うくらいならこちらでも十分です。

こちらは「React Native 入門」という本を参考に行いました。記事にしていますので参考にどうぞ。
【実践技術書】React Native 入門

Expoアプリをスタート

npmでReact NativeやExpoをインストールします。

npm install -g react-native expo-cli create-react-native-app

そして「create-recat-native-app my-native-app」コマンドで、ローカルにアプリの雛形が生成されます。ここでプログラミングをしてアプリを作成します。

権限関係のエラーでうまく行かない場合はnodeやnpmのバージョンが影響していることがあります。  
私も発生しましたが「nvm」をインストールして、nvm経由でnode・npmを再インストールしたところ治りました。

このタイミングでgithubなどにリポジトリを作っておきましょう。

実機で動作確認

エミュレータを使ってPCで確認することができますが、自身の端末に「Expo」というアプリを入れると実機での動作確認することができます。 https://play.google.com/store/apps/details?id=host.exp.exponent

PC側のアプリの開発ディレクトリで「npm start」コマンドを実行すると、QRコードが表示されます。テスト端末でExpoを起動して、QRコードを読み込むと開発中のアプリが動きます。

Expoアプリ経由でPCとLANで接続し、アプリのソースをダウンロードして実行します。そのため同じネットワーク内でアクセスしないとできません。

ホットリロード機能があり、PC側でプログラムを修正すると即時実機に反映されます。開発の効率がよくなりとても便利でした。Android・iOSどちらでも利用できるようなので、開発の際にはこの方法がおすすめです。

ビルド

app.jsonに必要な項目を追加編集します。

{
    "expo": {
        "name": "アプリの名前", // 日本語で問題なし
        "slug": "Expoで管理する際のslug", // 半角英数とハイフン
        "privacy": "public", // Expoで公開するかどうか
        "sdkVersion": "32.0.0", // sdkのバージョン、create-recat-nativeコマンドで生成したときのまま
        "platforms": [
            "ios",
            "android"
        ],
        "version": "1.0.0", // 
        "orientation": "portrait", // 画面の縦・横持ちの設定 'default', 'portrait', 'landscape'
        "icon": "./assets/icon.png", // アプリのアイコン
        "splash": { // アプリの起動時の画面
            "image": "./assets/splash.png",
            "resizeMode": "contain",
            "backgroundColor": "#ffffff"
        },
        "ios": {
            "supportsTablet": true
        },
        "android": { 
            "package": "google playで管理する際のslug", // 半角英数とハイフンと.
            "permissions": [], // 必要な権限 []にすると最小のものになる、ただしExpoがデフォルトでいくつかの権限を必要としている
            "versionCode": 1 // google playで内部的な管理に必要なバージョン 整数 
        }
    }
}

expo-cli loginコマンドでExpoにログイン、expo-cli build:androidコマンドを実行するとビルドを行うことができます。

このとき、ネット上のExpoのサーバ内でビルドが行われており、ビルドが完了するとAPKをダウンロードするためのURLが表示されます。
https://expo.io/builds にアクセスすればビルド状況やコンソールログなどを確認できます。

実際にExpoのアプリとしてもアップロードされており、サイト内から検索することができます。

Google Playへアップロード・必要事項を入力

Google Play Consoleへアクセスしてアカウントを作成します。

Google PlayでAndroidアプリをリリースするためにはGoogle Play Consoleでdeveloper登録が必要です。初回に25ドルを支払う必要があります。

「アプリの作成」を行い必要な項目を入力します。基本的には画面に沿って入力すれば問題ないです。

以下のものが必要だったので作成しました。画像は基本Figmaで作りました。exportすることでPngなどの形式でダウンロードできます。

アプリのアイコン画像
アプリのスクリーンショット画像
キャンペーンの際に表示するヘッダ画像
アプリの概要テキスト
アプリの詳細テキスト

必要なものを登録すればアプリの公開ができます。公開されるまではしばらく時間がかかります。特定の人にだけアクセスできるテスト用のアプリや、本番リリース用のアプリなどを別々に管理できるので、必要なフェーズに合わせて試してみると良いです。

iOSも

React Nativeで実装しているので、iOSアプリとしても動作します。こちらは現在実践中ですので、終わり次第追記します。プログラムはそのままでiOS用にビルドして、開発者ツールで登録していけば、AppStoreでも公開ができるはずです。

まとめ

React Nativeを使うことで、Androidアプリ、iOSアプリ両方を構築できます。Reactの概念を利用していることも合って、コンポーネントを利用しながら簡単に実装ができました。ただし、ネイティブAPIのすべてが利用できるわけではなかったり、パフォーマンスに少し劣る部分があるそうです。要件を満たせない場合は考慮が必要です。

さらにExpoも利用することで、開発デバック時のホットリロードや、Expoサーバを利用してのビルドを行うことができました。これらを使うと開発がかなり効率化され、簡単になりました。

コンポーネントも豊富に用意されているので、お手軽に実装できた印象です。広告を表示するAdmobなどのコンポーネントもあり簡単に導入できます。今のところは問題なさそうなので、Expoでのアプリ開発を続けようと思います。