Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iOSDC 2021 - App Store用スクリーンショットの自動生成をアラビア語対応して...

ainame
September 17, 2021

iOSDC 2021 - App Store用スクリーンショットの自動生成をアラビア語対応してSwiftUIで実装してみた

ainame

September 17, 2021
Tweet

More Decks by ainame

Other Decks in Technology

Transcript

  1. 自己紹介 生井智司/ Satoshi Namai / @ainame • Senior iOS Engineer

    at Cookpad Ltd • イギリス地方都市ブリストル在住 • 今年からfastlane core contributor ◦ Ruby 3 対応 ◦ deliverの高速化・改善など...
  2. 発表内容 • App Store スクリーンショットとは • i18nでの運用について • App Storeスクリーンショットの自動生成

    • 既存ツールの課題 • SwiftUIでスクリーンショット自動生成 ◦ SwiftUIを用いた画像の生成 ◦ TestPlanを用いたUIテスト ◦ CLI化〜運用
  3. App Store スクリーンショットとは • アプリの体験を視覚的に伝える手段 • 各言語の画面サイズ毎に各10枚まで • アプリの申請の際の審査の対象 •

    対応デバイスごとに以下の画面サイズ向けの物が必要 ◦ iPhone - 6.5inch, 5.5inch ◦ iPad - iPad Pro 12.9 inchの2nd genと4th gen
  4. App Store スクリーンショットとは 2.3.3 Screenshots should show the app in

    use, and not merely the title art, login page, or splash screen. They may also include text and image overlays (e.g. to demonstrate input mechanisms, such as an animated touch point or Apple Pencil) and show extended functionality on device, such as Touch Bar. (意訳)スクリーンショットは使用中のアプリを見せべき。テキストや画 像のオーバーレイで、使い方を説明したりTouch Barなどのデバイス の機能の説明もしても良い https://developer.apple.com/app-store/review/guidelines/
  5. i18nでの運用について • i18n = internationalization (国際化) • 以下の対応が必要となる ◦ アプリ内のテキストの翻訳

    ◦ App Storeスクショ上のテキストの翻訳 ◦ アプリ画面スクショ用のアプリ内コンテンツの準備 アプリの翻訳だけでなくApp Storeスクショ専用の 翻訳/ローカライズの準備が必要
  6. i18nでの運用について 運用上必要なスクリーンショットの枚数について考える ただしアプリはiPad対応済のユニバーサルアプリとする • (PM・デザイナー)App Storeスクショで訴求する機能を考えデザインに落とし込む ◦ 例:6枚分のデザインを考える • (誰か)アプリ画面スクショを収集

    ◦ 6レイアウト x 4デバイス分 ◦ iPhone 8 plus/12 Pro MaxとfiPad Pro 12.9 inch 2nd gen/4th gen • (デザイナー)各画面のスクショのはめ込み+テキスト+背景画像の作成 ◦ 6レイアウト x 4デバイス x 対応言語数(N)分
  7. i18nでの運用について 6レイアウト x 4デバイス x N言語 枚分の作成が必要 • N=1 ->

    24枚 • N=2 -> 48枚 • …… • N=22 -> 528枚 (弊社・2021年8月現在) • …… • N=39 -> 936枚(App Storeの対応言語数・2021年8月現在) 頻繁な更新が必要になると人々のリソースを圧迫
  8. 既存ツールの課題 (snapshot) snapshot/frameitを試したが実運用するための課題が散見される • 言語数が多いと遅すぎる ◦ 言語毎にシュミレーター向けの設定をしていて時間がかかってる ◦ 4コアCPUだと3並列でしか実行できない (cpuコア数

    - 1の並列数が設定される) • 依存している技術が古いままなため現代のアプリの挙動に対応しきれていない ◦ スクショを撮るタイミングを調整するために iOS13で廃止されたNetwork activity indicatorの監視処理を利用している • リトライしても失敗し続ける場合、後にどこで失敗したかわからないので 一部の言語・環境特有のエラーが再現し続けた時にデバッグしづらい
  9. 既存ツールの課題 (frameit) snapshot/frameitを試したが実運用するための課題が散見される • 内部で画像の出力に利用されている ImageMagick単体では アラビア文字の反転・リガチャー (合字)処理が対応できない • 入力の文字列に応じてフォントサイズを自動で調整するが、

    翻訳テキストの長さが言語ごとに違いすぎて言語間で全く見た目が変わる (逆にフォントサイズを固定できない ) • 全言語を正しくレンダリングするためには全言語分のフォントが必要
  10. SwiftUIでスクショ自動生成 ainame/FrameKit App StoreスクショをSwiftUIのViewから生成するライブラリ • SPMでインストールする • ViewやLayoutの設定はSwiftで自分で定義 • $

    fastlane frameit download_frames のフレーム画像を再利用 • 与えたデータに基づいてアプリ画面スクショのはめ込みと 画像の合成をやってくれる
  11. SwiftUIでスクショ自動生成 どうせだからsnapshot相当の再実装も自前でやってみる Xcode 11から導入されたTest Plan + xcresult を利用 • Test

    Plan - テスト条件をxctestplanファイルで一括管理 ◦ 環境変数で言語ごとのアカウント情報などの管理が実現 ◦ 特定のテスト条件を有効・無効が指定できる • xcresult - XCTestのテスト結果、添付ファイルをまとめてくれる ◦ xcresulltoolというCLIでデータを取得出来る ◦ スクショを添付できる ◦ どこでテストが失敗したかログが残る ◦ 実行ごとの履歴が残るので便利
  12. SwiftUIでスクショ自動生成 実装すべき機能/要件 • iOSシュミレーターの準備 ◦ 物理キーボードの無効化とステータスバーのオーバーライド ◦ シュミレーターの事前起動 • xctestplanの更新

    ◦ CLIで指定した言語のテスト条件のみを有効にする • xcodebuildによるテスト実行 ◦ CLIで指定したデバイスのみをdestinationに追加する ◦ 再実行する際にbuildをskip出来るようにする • xcresultからスクリーンショットの抽出
  13. SwiftUIでスクショ自動生成 実際に運用してみた 1. デザイナーとApp Storeスクショのデザインをすり合わせ 2. SwiftUIでApp Storeスクショのレイアウトを実装 3. 翻訳管理ツール上でスクショ内のテキストの翻訳を

    各地のコミュニティーマネージャーに依頼 4. 自作ツールの実行 5. 完成したスクショを各コミュニティーマネージャーに確認 6. fastlane/deliverでApp Storeへ反映
  14. SwiftUIでスクショ自動生成 Pros • 2年弱更新してなかった状態から2、3ヶ月に1度の更新に! • 一度デザイン・翻訳などが決まればあとはスクリプトを実行するだけでス クショの更新が可能で楽 • 生成した画像のフォーマットは必ず仕様通りなので手戻り無し Cons

    • アプリUIの変更ごとにUIテストも追従していくのはそこそこ大変 • 各種設定値までSwiftで書いているのでCLIツールそのもののコンパイ ルが修正ごとに必要になっていてポータビリティが低すぎる
  15. 想定Q&A Q: CIで実行しないのか A: 難しそう(翻訳依存でUIテストが落ちることがある)+ 毎リ リース更新のニーズはないのでやってない Q: 実行時間どれぐらい? A:

    MacBook Pro 2019 16-inch (2.4 Ghz - 8 cores)で40分ぐら いで20言語分終わるけどUIテストの実行内容依存 (APIのスタブを作るためUIテストを2回走らせてる)