App Store Connectに提出するスクリーンショットの作成をちょっと自動化した話
はじめに
私はiOSアプリを個人開発しています。今回アプリをフルリニューアルしてリリースしました。
モバイルアプリは開発した後にアプリストアへ提出し、掲載してもらわないとユーザーさんに使ってもらえません。やったことがある人ならわかると思いますが、この作業はなかなか大変です。ストアに掲載するものは大まかに分類すると以下の3点です。
- メタデータ
- アプリの説明文
- スクリーンショット
この中で一番楽なのが1のメタデータです。設定画面上でぽちぽち操作すれば完了です。
2の説明文からちょっと大変になってきます。キャッチーな文章を考える必要がありますし、何よりアプリが多言語対応している場合はその言語の文だけ用意する必要があります。とはいえ、今はAIがあるので昔よりはラクです。
3のスクリーンショットが一番大変だったので、何が大変なのか&どう自動化したのかをお伝えします。
そもそもアプリストアのスクリーンショットってどんなもの？
アプリストアの該当アプリページに遷移すると最初に目につくのがこのスクリーンショットです。
複数枚の画像を並べて、そのアプリの特徴を伝えることができます。アプリの画面 + 説明文という構成が多いように思いますが、中には説明文とイラストだけというパターンもあります。
今回はシンプルに画面、見出し、説明を縦に並べる構成にしました。自動化したのはこの中の画面の画像作成部分です。
スクリーンショット作成の何が大変なのか？
説明文と同じく対応言語の数だけ画像を用意するのは当然ながら、ストアを開いた時に見える画像が1枚だと寂しいので3~4枚くらいはほしいところです。さらにアプリがタブレットでの動作に対応している場合はスマホ向けの画像に加えてタブレット向けのものも必要になります。合計枚数は以下の計算式で割り出せます。
ストアで見せたい枚数 * 対応言語数 * 対応端末種別数
今回私はストアでは4枚の画像を表示することに決めていました。また言語は日本語、英語、中国語、スペイン語に対応し、端末はiPhoneとiPadに対応したアプリを作成しました。合計 4 * 4 * 2 = 32枚の画像が必要となりました😇。
アプリを操作する→スクリーンショットを撮るの作業を32回繰り返すことを想像してみてください。おまけに途中でアプリの言語を切り替えたり、端末を変える必要もあります。なかなかの辛みがあるというのを想像していただけたのではないかと思います。
どうやったのか？
撮影の自動化
スクリーンショット撮影専用のXCUITestを書いて自動化しました。XCUITestでは以下のようなコードで簡単にスクリーンショットを撮って記録できます。
let app = XCUIApplication()
let screenshot1 = app.screenshot()
let attachment1 = XCTAttachment(screenshot: screenshot1)
attachment1.name = "screenshot1"
attachment1.lifetime = .keepAlways
add(attachment1)
撮影したスクリーンショットはテストレポートの"Gallery"タブから確認できます。
多言語対応
撮影は自動化できましたが、多言語対応はどうするのでしょうか？これはTest Plan内で各言語ごとにConfigurationを作って対応します。私のアプリは4ヶ国語に対応したのでConfigurationが4つあります。
このように設定するとConfigurationごとにアプリの言語が切り替わってくれます。設定した後にテストを回すとこんな感じになります。
実行
せっかく高いmacを買ったので、Run in All Configurations で一気に回しちゃいます。
シミュレーターが一気に4台立ち上がり、テストを実行します。
サムネが小さいですが、スクリーンショットが撮影されていることがわかります。名前の先頭に言語名（en, jaなど）を付与しておくことで、後で一括出力した際に見分けがつけやすくなって便利です。
スクリーンショットの抽出
撮影が終わったので、スクリーンショットを抽出します。
まずはテスト結果が記録されたファイルを特定する必要があります。Xcodeのテスト記録の右クリックメニューから Show in Finder をクリックすると xcresult ファイルを特定できます。
スクリーンショットの抽出には xcparse を使います。
実行するとxcresultからスクリーンショットが抽出されています 🎉
xcparse screenshots path/to/xcresult
Exporting Attachments
100% [=======================================================================================================]
🎊 Export complete! 🎊
今後の展望
撮影は自動化できましたが、この先は手作業です。(Affinity)[https://www.affinity.studio/ja_jp]を使って画像と文字をぽちぽち配置していきます。いつかはこの作業も自動化したい……
また、この記事を作成している途中で知ったのですがfastlaneというツールを使うことでも同じようなことができるようです。なんとなく難しそうで避けていましたが、今後はこれも取り入れていきたいです。
ここまで読んでくださりありがとうございました！最終的にApp Storeでどのように見えているか気になる方はぜひストアにアクセスしてみてください。（よければアプリも使ってみてください 🙏）
Discussion