画像リソースを準備する
続いて、リリースに必要な画像リソースを用意します。アプリの顔であるアプリアイコンと、アプリ起動時に表示されるスプラッシュ画面の2種類が最低限必要です。
Expo CLIでプロジェクトを作成すると、プロジェクトのトップレベル階層に/assetsというフォルダが作られます。この中に、アプリアイコンやスプラッシュ画面のための画像リソースが仮置きされています（図2）。
icon.pngがアプリアイコン、splash.pngがスプラッシュ画面です。これらのファイルを自分用のデザインに置き換えることになります。
アプリアイコンの推奨要件
Expo向けに用意するアプリアイコンについては、公式ドキュメントにガイドラインがあるので、確認するとよいでしょう。
- https://docs.expo.io/guides/app-icons/
iOS向けアイコンの要点は次のとおりです。
- png形式であること
- サイズは1024 x 1024ピクセルを推奨
- Appleのヒューマンインターフェースガイドラインに沿ったデザインであること
Android向けアイコンの要点は次のとおりです。
- png形式であること
- Android 8.0以降で有効なアダプティブアイコンについてのガイドラインに沿ったデザインであること
- サイズは512×512ピクセル以上を推奨
- アダプティブアイコン用のリソースと、通常アイコンのリソースをそれぞれ用意すること
アダプティブアイコンは、アイコンの中でさらに背景と中央のイラストを分離して管理する、少し複雑なアイコンです。Android 8.0以降ではアプリアイコンをアダプティブアイコンで作るのが標準になったので、用意する必要があります。
しっかり作った場合、app.jsonでの設定はリスト4のようになります。
{
"expo": {
// （略）
"ios": {
// （略）
"icon": "./assets/icon.png", // (1)
// （略）
},
"android": {
// （略）
"icon": "./assets/icon.png", // (2)
"adaptiveIcon": { // (3)
"foregroundImage": "./assets/ic_launcher_foreground.png",
"backgroundColor": "#FFFFFF"
},
// （略）
},
// （略）
}
}
（1）はiOS向けのアプリアイコンの設定です。特別な設定は必要ないのでシンプルです。（2）はアダプティブアイコンに未対応のAndroidデバイスで表示するアプリアイコンです。（3）はアダプティブアイコンに対応したAndroidデバイスで表示するアプリアイコンの設定です。前面の画像（foregroundImage）と背景（backgroundColor）をそれぞれ設定します。背景を画像にしたい場合はbackgroundImageも使えます。
スプラッシュ画面について
スプラッシュ画面用の画像リソースは多くの場合、中央にイラストやロゴを配置して、それ以外の部分を透過にした巨大な正方形の画像として作られます。どんな画面サイズでもコンテンツをきれいに表示するためです。
例を挙げてみましょう。app.jsonでは、スプラッシュ画面のリソースで透過させた背景に表示する色や画像を指定できるので、背景にオレンジ色を指定したことにします。その場合に、スマートフォンやタブレットでの起動時にどのような表示になるのかを示したのが図3です。
このように正方形でリソースを用意しておくことで、スマートフォンでもタブレットでもある程度自然な表示になります。
app.jsonへの設定は、リスト5のようにします。
{
"expo": {
// （略）
"splash": {
"image": "./assets/splash.png", // (1)
"resizeMode": "cover", // (3)
"backgroundColor": "#ffffff" // (2)
},
// （略）
}
}
（1）に画像を、（2）に背景色を指定しました。（3）のresizeModeには、画像の引き伸ばし方を指定します。coverなら図3のように画面の長辺いっぱいまで広がり、containsを指定すると、画面の短辺に収まるように縮小します。用意した画像リソースの特性に合わせて切り替えましょう。
リリースビルドする
ここまで準備ができたら、あとはリリースビルドを実行するだけです。ターミナルで、次のコマンドを実行します。
-
Androidアプリのビルド：
expo build:android -
iOSアプリのビルド：
expo build:ios
途中、Expo CLIから証明書の生成をしてもよいか聞かれるので、基本的にすべてイエスで答えてください。また、Apple IDを求められたら、Apple Developer Programの登録に使ったApple IDとパスワードを入力してください。
サーバー側でのビルドが終わると、ダウンロード用のURLが表示されます。URLにアクセスすると、apkファイルやipaファイルがダウンロードできます。
アプリファイルのアップロード方法
アプリファイルが生成できたら、あとはストアにアップロードするだけです。Play Consoleの場合は、アプリ個別の画面でメニューの「公開 ＞ 製品版」を開くと、APKをドラッグ＆ドロップする領域が現れるので、ここにapkファイルを入れればアップロードできます（図4）。
バージョン名やリリースノートを埋めて、保存ボタンを押していけば、アプリを公開できます。
App Store Connectの場合は、ブラウザからipaファイルをアップロードする方法がないため、別のアプリを利用します。Mac App Storeで「Transporter」を探して、手元のmacOSにインストールしましょう。起動してApple IDでログインすると、App Store Connectにアップロードするための画面が現れるので、ここにipaファイルをドラッグ＆ドロップします（図5）。
操作を進めていくと、App Store Connectへのアップロードが始まります。アップロードが終われば、次は審査です。ストアの掲載情報を十分に埋めてから臨みましょう。
まとめ
Expo CLIで管理しているプロジェクトをリリースするために必要な情報を解説しました。リリースに関する知識は広範なこともあり、一つひとつを深く解説することはできませんでした。わからなかった点を調べるための取っ掛かりになる情報へのリンクは随所に記載したので、調べていただければと思います。
13回に渡ってReact Nativeによるアプリ開発を学んできました。ブラウザアプリ開発の方法論でモバイルアプリ開発ができるReact Nativeは、少人数のチームでも効率的に複数プラットフォーム向けのアプリを開発できる、便利なツールです。運用するには器用さが必要になりますが、なんとか運用できれば人数の制約をものともしない、大きな生産性を手に入れられるでしょう。この連載を読んだ皆さんが、多くのアプリを生み出すことをお祈り申し上げます。
