SF Symbolsを使って画像を差替えることでアプリサイズを削減する方法

皆さんこんにちは、エンジニアのおうです。aumoでは主にiOSアプリの開発をやっています。

今更ですが、皆さん今年の「WWDC21」をご覧になりましたでしょうか？毎年やっているイベントですが、自分は正直、毎回チラッとしか見てなかったです。笑

前回の紹介では、アプリ起動時間の改善を紹介したのですが、そこの延長線でついでにアプリのサイズを見直してみました。そのきっかけで今回WWDC21で紹介された「SF Symbols3」を触ってみました。

背景

アプリサイズの見直しということで、重いライブラリ、要らないコードの見直しは勿論のこと、ローカルで使われてない一部の画像についても整理しました。

aumoでは、独自アイコン以外にデフォルトアイコンやカスタマイズしたアイコンなど色々入れていて、デザイナーからもらった画像をそのままアプリに入れてました。そのアイコンがそもそもSF Symbolsで表現できるか調べていなかったせいで、無駄な画像などをアプリに入れたり、色違いもしくは画像サイズだけ違った画像もちらほらアプリに存在しています。

今回はSF Symbolsに変換できる画像の一部を差し替えてみました。

SF Symbolsとは

恥ずかしながら、Beta版は2019年に6月にリリースされていたにも関わらず、今まで一回も使っていなかったです。

そもそもSF Symbolsとは、アプリ内で使用できる編集可能なシンボルです。

With over 3,200 symbols, SF Symbols is a library of iconography designed to integrate seamlessly with San Francisco, the system font for Apple platforms. Symbols come in nine weights and three scales, and automatically align with text labels. They can be exported and edited in vector graphics editing tools to create custom symbols with shared design characteristics and accessibility features. SF Symbols 3 features over 600 new symbols, enhanced color customization, a new inspector, and improved support for custom symbols.

SF Symbols 3

デベロッパーにとっては、UIKitでもAppKitでも、SwiftUIなども対応しているので、大変使いやすいかと思います。

SF Symbolsをアプリで使ってみる

アプリに入れる前に、まず公式から提供されたAppをダウンロードします。ダウンロードできると以下のように表示されます。

そこで各アイコンの名称、サポートするモード、対応するOSバージョンなどの情報も入ってるので、事前レビューなども可能です。

今回のSF Symbols３では下記の４つのモードを提供しています。

Monochrome（モノクロ)

iOS15/macOS11前までは、これは唯一のモードでした。 色をつける為にtint colorもしくはaccent colorをつければOKです。

let image = UIImage(systemName: "battery.100.bolt")
imageView.image = image
imageView.tintColor = .systemYellow

Hierarchical（階層）

アイコンは階層で分けられていて、最大三つに分けられています：primary、secondary、tertiary。アイコンの階層を上記アプリで確認できます。

let config = UIImage.SymbolConfiguration(hierarchicalColor: .systemYellow)
imageView.preferredSymbolConfiguration = config

Palette（パレット）

Hierarchicalと似てますが、それぞれの階層で細かく色を指定することができます。

let paletteConfig = UIImage.SymbolConfiguration(paletteColors: [.systemRed, .systemOrange, .systemYellow])
imageView.image = image
imageView.preferredSymbolConfiguration = paletteConfig

Multicolor（マルチカラー）

システムで提供された色が適用されます。

let multiColorConfig = UIImage.SymbolConfiguration.preferringMulticolor()
imageView.image = image
imageView.preferredSymbolConfiguration = multiColorConfig

それぞれの設定では、こんな感じでアイコンが表示されます。

また、SF Symbolsは9種類のWeightsと3種類のScalesが提供されるため、一つのアイコンではトータルで27種類の形式があります。

let image = UIImage(systemName: "square.and.arrow.up")
let config = UIImage.SymbolConfiguration(pointSize: 10, weight: .semibold, scale: .medium)
imageView.image = image
imageView.preferredSymbolConfiguration = config

また、同じ画像でもいろんなカスタマイズができます。例えば、ハートの画像では下記の組み合わせもあります。

本来の書き方では、UIImage(systemImage: “heart.circle.fill”)こう書きますが、”.circle”の後ろに”.fill”つけないといけないです。逆になると画像が表示されません。

今回のSF Symbols3ではimageVariantが追加されたそうです。

let imageView = UIImageView(image: UIImage(systemName: "heart"))
imageView.imageVariant = .circle.fill // -> ここを実際にやったところ、imageVariantはまだSwiftUIのみのプロパティの様子

勿論、上記の呼び方は Interface Builderでも呼べます。

まとめ

こんな感じでアプリ内のアイコン色、サイズなどを細かくカスタマイズすることが可能になります。ですが、iOS15未満はサポートしてないということで、細かく制御するのはまだ先かなと思います。今回、aumoで使えそうなところだけ差し替えただけでも、約20MB節約できました。

余談

久しぶりに今年はWWDCを一通り観てみました。幅広い情報が網羅されていて勉強になりました。その中で一番注目されていたのがXcode clouldですね。使ってみたかったのですが、使う為には審査が必要で、一ヶ月前に応募出しているにも関わらず、まだ審査待ちの状況です。今、aumoのビルドはfastlane+Bitriseでやってますが、早めにXcode clouldに切り替えたいです。次回はその辺りを紹介できればと思います。

*参考セッション： Session 10097、 Session 10251 、Session 10349