iOSDC Japan 2016 参加メモ: A-8 デザイナーにStoryboardをお任せする技術
- はてな 加藤さん id:cockscomb
背景
今回のゴール
- デザイナーがStoryboardを編集するワークフローの獲得
- チームの生産性向上
導入
- チームや個人のモチベーション重視
- やる気がなさそうならさっさと諦める
- 開発環境をセットアップ
- 手取り足取り教える
- 実際に触れてもらう
Interface Builder
- 意外といろいろ新しい要素がある
デザイナ的には案外わかりやすい
登場する要素について
- View
- ここはわかりやすい
- ViewController
- 黄色いアイコンのやつがViewControllerだよ！
- Viewとペアになってるよ
- AutoLayout
- これが。。。。
- View
UIKit User Interface Catalog
- これを教えてあげるのが良い
- ViewController Catalog for iOS
- ちょっと古い
AutoLayout
教えるべきことがたくさんある
- Layout Constraint
- Intrisic Content Size
- Priority
- Error / Warning
NSLayoutConstraint
- 制約の式の中に対象のattributeなどを設定すると考える、というのを教えてあげる
- 揃える、という意識とConstraintは対応してるので意外と行ける
Intrinsic Size
- 固有のサイズって話でわかる
Priority
- 伸びにくさ、ちぢみにくさのPriorityのことを徐々に教えてあげる必要がある
- 絵で説明する
AutoLayoutのエラー
- エラーがあると怒られる
- どういう時に怒られるか知っておいてもらう
Adaptivity
- Dynamic Text
- Size Class
- Trait Collection
ここまで学ぶのにどこまで大変か？
ワークフロー
- アプリの機能が企画される
- デザイナーがレイアウトを決める
- エンジニアが実装
- デザイナが細部を調整
- コードレビュー
Make App Designable
- IBDesignable
- Storyboardで見れる
- IBInspectable
- Storyboardから値を設定できる
ヒント
- 前提を共有する
同じドメイン知識を共有する
- サービス
- プラットフォーム
- ユーザーインターフェース
用語をきっちり揃える
独自のViewをたくさん作る
- 再利用性のあるコンポーネント
- パラメータを @IBInspectable
- 最初から作り込み過ぎない
よく作る例
- Border
- 線の幅を指定できたり
- 物理pixcelにしたい場合、とか
- AttributedTLabel
- BorderedButton
- Border
エンジニアにとって大事なこと
- UIKitについて学ぶ
- 知らないことは意外と多い
- Storyboardを巧く管理する
- 分割は必須
- コンフリクトは最大の敵
- 同じ所を同時に触らない
- デザイン調整は後で、ぐらいでも良い
- デザイナーを手助けする
- 忙しい
- 丁寧なサポートを心がける
- レビューがあると安心感が出る
まとめ
- 開発チームが協力することで実現
- 難易度は高め
- 大きなメリット
- 同じ言葉で成果物をコミュニケーションできる
- デザイナーがトライアンドエラーしやすくなる
QA
Storyboardのレビューはどうしてる？
- 複雑な場合はcheckoutしてアウトラインで見てみたり
ContainerViewを多用したい場合はどうしている？
- エンジニア側でContainerを作ってStoryboardを分割してしまう
- 中身だけお願いします、みたいな
