LOADING

SwiftTweaksを導入したらUIのパラメータ調整作業がはかどった話

WOZエンジニアの有吉です。
WOZではiOSアプリのデザインとエンジニアリングを行っています。今回は、UIコンポーネントの設定値調整をスムーズに行うために、SwiftTweaksというライブラリを利用した事例についてご紹介します。

UIデザインの検討をしやすくする

UIコンポーネントの状態が動的に変わるような画面などで、デザイナーがUIの設定値を何パターンも試したいことがありますが、Xcodeでアプリを何度もビルドして検証すると開発に時間がかかってしまいます。ビルド時間を短縮できれば、UIの検討に使える時間も増えます。

SwiftTweaks

Facebookも開発に使っているTweaksは、アプリ内から専用のパラメータ編集画面を呼び出し、ビルドなしでパラメータの調整ができるようにするライブラリ。WOZではiOSアプリの開発を主にSwiftで行っており、今回はSwiftTweaksを利用しました。

SwiftTweaks

1. TweakLibraryを作成

public struct ExampleTweaks: TweakLibraryType {      
    public static let colorTint = Tweak("General", "Colors", "Tint", UIColor.blueColor())        
    public static let defaultStore: TweakStore = {       
        let allTweaks: [TweakClusterType] = [colorTint]      
        let tweaksEnabled = TweakDebug.isActive      
        return TweakStore(       
            tweaks: allTweaks,       
            enabled: tweaksEnabled       
        )        
    }()      
}

2. TweakLibraryを利用

設定値をassign、もしくはbindしてUIを更新することができます。

button.tintColor = ExampleTweaks.assign(ExampleTweaks.colorTint)
ExampleTweaks.bind(ExampleTweaks.colorTint) { button.tintColor = $0 }

3. 設定値をアプリ内で変更

シェイクジェスチャーによって、Tweaksの設定画面を呼び出すことができます。シミュレータの場合はCommand + Control + zを押します。

結果

パラメータを変更する度にアプリをビルドしなくてすむことは、開発効率を上げることになりました。デザイナーがコードを書くことなくパラメータを調整し、試行錯誤を経て、最終的な見た目までコントロールすることができました。
Tweaksを使った実装自体に少し手間は必要ですが、特定の箇所のパラメータを徹底的に追い込みたい場合などは、実装コストを回収してしまえるのではないでしょうか。

エンジニアとデザイナーの分担について

デザイナーが試行錯誤する量を増やすことは、最終的な成果物の品質を上げることに繋がります。また、プロジェクトの状況によっては、エンジニアが行っていた作業をデザイナーと分担することによって、プロダクト全体の開発スピードが上がります。

最後に

WOZではWebアプリケーションエンジニアとして共に会社を作っていくメンバーを募集しています!
WOZにご興味のある方、エンジニアリングとデザインについて語りたい方、お気軽にご連絡ください。