こんにちは、皆さん!

今回は僕がいつも使っているExpoでアプリのコードを書き、それをiOSとAndroidそれぞれのストア上に公開するまでの手順を紹介していこうと思います。


トピック


コードの編集

まずコードを編集しなければ何も始まらないので、コードを編集します。

この時にどのようなエディターを使ってもらっても良いのですが、おすすめはVScodeです。エディターの下にターミナルがついてくる2in1のこのエディターはとても使いやすいです。様々な拡張機能で自分好みに改良できます。


React Nativeで書くコードに関してはここでは解説しませんが、アプリを実際に公開する際に編集が必要になるapp.jsonだけここで紹介していこうと思います。

Expoでアプリを生成した段階では下記のようなapp.jsonファイルが生成されると思います。

{
  "expo": {
    "name": "HelloWorld",
    "slug": "expo_test",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "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
    }
  }
}

この中で注目して欲しいのは10行目のバージョンと24行目のiOSです。

10行目のバージョンは今作っているアプリのバージョンになります。しかし、少しややこしいのですが、これはアップルストアやPlay storeに上がった際のバージョンではありません。

なお、このバージョンはAndroidアプリを公開する時にはあまり関係ないのですが、iOSのアプリを公開する際には古いバージョンだと拒否されますので、iOSのアプリを更新するたびにこちらも更新してください!!

それぞれのストアでのバージョンに関しては下記のようにiOSとAndroidのオブジェクト内に定義する必要があります。

{
  ...
    "android": {
      "package": "com.yourcompany.yourapp",
      "versionCode": 7,
      "permissions": [ "CAMERA", "WRITE_EXTERNAL_STORAGE", "CAMERA_ROLL" ]
    },
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourapp",
      "buildNumber": "2.2.1",
      "supportsTablet": true,
      "infoPlist": {
        "NSPhotoLibraryUsageDescription": "Your description here"
      }
    },
  ...
}

Androidの場合は5行目のversionCodeで、iOSの場合は10行目のbuildNumberがそれぞれのストアでのバージョンになります。

これらの中には他にもそれぞれのアプリをオンライン上で特定できるように4行目と9行目に出てきたようなもので特有のIDを管理します。これらはそれぞれのストアの自身のアカウントの中から生成及び確認いただけます。

AndroidではPlayStoreにサインインした際に右上に出てくるアプリ一覧から確認いただけます。

Appleに関してはこちらのURLからいけます。

https://developer.apple.com/account/resources/identifiers/list


なお、場合によってはsdkVersionを入れる必要もあります。これに関してはpackage.jsonからexpoパッケージのバージョンを確認してもらって、それをapp.jsonに入れればオッケーです。


アップロード用のファイル生成

次にこうして準備が整ったアプリの実際にストアにアップロードするファイルたちを生成しましょう!

ここまで編集してきたのはJSファイルなので、そのままではアップルストアもプレイストアも受け付けてくれません。それをこれから受け入れてくれるファイルの形に変える作業をやっていきます。

Android用のファイルは下記のコマンドで生成できます。これで.aabファイルが作られます。

expo build:android -t app-bundle

iOS用のファイルは下記のコマンドで生成できます。これで.ipaファイルが作られます。

expo build:ios 

これらのコマンドを実行すると、最後にリンクがターミナル上に表示されます。そのリンクを押して開いてもらうと、生成されたファイルをダウンロードできるようになっております。

仕組み

このファイル生成システムはご自身のターミナルからコマンドを実行することで、そのフォルダー内のコードをExpoのサーバーに送信し、向こう側でその変換作業をやってくれるというような仕組みになっています。このサーバーをExpoで開発している皆でシェアすることになります。

ですので、そのサーバーが忙しい場合は結構待つことになります。

こちらのリンクからリアルタイムのサーバー側でファイル生成を待っている個体の数が出ます。この統計を見ても、圧倒的にAndroidアプリを作っている人たちが多いので、Androidのファイルを生成するときはより時間がかかると思ってください。


デバイスごとのスクショ

ストアにアプリをアップロードするということはいくつかのスクショも必要になってきます。

プレイストアは簡単に1種類だけアップロードすれば良いのですが、アップルストア側では4種類のデバイスの大きさごとのスクショを求められます。

一番簡単な方法はローカルでシミュレーターを立てて、スクショを取る方法です。しかし、Windowsユーザーで開発している方はiOSのシミュレーターを開くことができません。

僕も最初はWindowsで開発していたので、当時使っていたこういう場合の抜け道を紹介しようと思います。


このサイトではファイルをアップロードすることで実際にそのアプリを走らせることができ、しかも様々なデバイスを選ぶことができ、スクショをその時に取ることができます。

この際、先ほどのファイルとは違うタイプのものを使います。Androidは.apkファイルを使い、iOSは.tar.gzファイルを使います。

これらのファイルもまたExpoのコマンドで生成することができます。

expo build:android
expo build:ios -t simulator

***このウェブサービスは1ヶ月に100分しか無料で与えられないので、気をつけてください!!


これだけではまだ足りない部分があります。それはアップルストアでは画像のサイズの大きさも指定されています。それに合わせるために画像のサイズも変えましょう!

僕は下記のサイトでやっております。

https://resizeimage.net/


ビルドファイルのアップロード

最後にExpoコマンドで生成したファイルをストアに実際にアップロードしましょう。

Androidの方はプレイストア上にアップロードのための機能がついているため、直接コンソールに入って、先ほど作った.aabファイルをウェブ上からアップロードすれば良いです。

それに対して、アップルストアはセキュリティーの関係かもっとめんどくさくなっております。

以前ではXcode内のApplication Loaderからファイルをアップロードしてからウェブ上のコンソールで確認すればよかったのですが、今ではその機能は廃止になり、Xcodeのコマンドでアップロードすることになりました。(この部分がWindowsでできない部分)

下記のコマンドでアップロードすることができます。

xcrun altool --upload-app --type ios --file "/Path/To/Your/Package/your_package_file.ipa"\
 --username "user_name" --password "app_specific_password"

ここでの/Path/To/Your/Package/your_package_file.ipa.ipaファイルまでのパスで、user_nameはアップルのアカウントのメールです。少しややこしいのはこのapp_specific_passwordです。

アップルアカウントのパスワードをそのままターミナルに入れるのは危険ということで、この部分で使われるパスワードはアップルのサイトの別の部分で作られるワンタイムパスワードになります。

このワンタイムパスワードは下記のサイトから入手することができます。

https://appleid.apple.com/account/manage


こちらのサイトにサインインした後に、下記のところまでスクロールし、ワンタイムパスワードを作ります。

パスワード生成リンク

現れたインプットボックスに適当に何か入れてパスワードを生成しましょう。


生成されたワンタイムパスワード

こんな感じでワンタイムパスワードが生成されるので、これを先ほどのコマンドの部分に入れてファイルをアップロードしましょう。

このコマンドの悪いところは開始した後、全く何もログが出ず、ファイル自体をアップロードするのにかなり時間がかかるので、一瞬うまくいっていないように見えますが、実行中ですので、心配しないでください!!

最後に「エラーなくアップロードできました。」というような英語のメッセージが出てきたら完了です。少し時間が経ったら、アップルストアのコンソールから選択できるようになります。

あとは、それぞれのストアのコンソールで必要事項を記入して申請して通れば、ストアからダウンロードできるようになります。


まとめ

今回はExpoで作ったプロジェクトをアップルストアとプレイストアにアップロードするまでの流れについて僕の使っているツールも紹介しながら解説しました。

このようにapp.jsonファイルを少し編集するだけでAndroidとiOSの両方の必要なファイルをすぐに生成できるExpoは生産性をかなり高めてくれます。

機会がある時に是非試してみてください!!

React NativeとExpoの比較についてもまとめましたので、よかったら参考にしてみてください!


皆さんの役に立つことを願います!
では、また次回まで✌
記事更新はツイッターで告知するので、ツイッターの方でもフォローお願いします!

コメントを残す

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