Xcode Previews でエンジニアのデザイン確認工程を削減
Hello, 渋谷の某IT企業で iOS エンジニアをしている ITAYA です。
2019 年 6 月に San Jose で行われた WWDC では様々な新機能・新製品の発表が行われました。しかし、新機能は最新の iOS13 以降のみ対応のものが多く、運用中のプロダクトに取り込むのに時間がかかってしまうのが現実です。今回は、そんな最新機能の一つ「Xcode Previews」を iOS13 未満も今まで通りサポートしつつ利用する方法をご紹介します。
まずは Xcode11 と macOS Catalina がインストールされた環境を整えます。この記事を執筆している時点ではβ版を用いています。
概要
「iOS13 未満もサポートしつつ」というのは Storyboard や xib ファイルを利用している画面でも Xcode Previews を利用できるようにするということです。
つまり、 Swift UI で UI を構築しなくても Xcode Previews を利用することができるのです。
実装方法
・ Xcode Previews 専用のターゲットを作る
プレビューさせる画面に関連するソースコードとプレビュー用の swift ファイルが含まれており、 iOS13 以降をターゲットバージョンとする
・ 対象のクラスを UIViewRepresentable に準拠させる
updateUIView メソッド内で施した変更がプレビューに即時反映される
・ PreviewProvider に準拠させた struct を定義
static var previews: some View でプレビューに必要な処理を施す
※ UIViewController をプレビューさせる場合はそれぞれ UIViewControllerRepresentable, updateUIViewController となります。
デザイン確認工程を削減
iPhoneSE, iPhone8, iPhone8 Plus, iPhone X, iPhone XS, iPhone XR, iPhone XS Max…
画面サイズが多様化する昨今、端末によっては UI が崩れてしまうバグを未然に防いだり、早急に発見するのが難しくなっています。たとえ防げたとしても多くの時間と費用がかかってしまいます。
しかし、この Xcode Previews を導入すれば開発を行う段階で各種端末による表示の確認を行うことができるようになり、バグを未然に防ぐことが可能になります。
こちらが実際に利用している画面になります。 xib で設計した UI が実際にプレビューに表示されています。
モックデータを書き換えるとプレビューにもローディングが走り、反映されているのがわかると思います。なので、各種パーツの表示・非表示、特殊文字・長文の挿入、巨大な画像ファイルリンクの挿入などを試しながら開発を行うことができるのです。また、複数の端末サイズで同時にプレビューさせることも可能です。
今までならば、バグが起きそうな状況を手作業で準備し、各種端末でアプリを起動して手動で確認し、不具合が起きれば、どこが原因であるかコード上から探す必要がありましたが、コーディングの段階でこれらがすべて行えます。
最後に
Xcode Previews を利用するためには macOS Catalina にする必要があるなど、準備に時間がかかるところもありますが、今後、開発効率が向上することを考えれば小さなものです。
ぜひ、みなさんも実践してみてください！
