読者です 読者をやめる 読者になる 読者になる

絶品ゆどうふのタレ

ふと気づいたことを綴るだけのメモ

iOSDC Japan 2016 参加メモ: A-8 デザイナーにStoryboardをお任せする技術

iosdc ios design storyboard

背景

  • はてなのデザイナーはWebアプリだとHTML / CSSのコーディングをして、git管理してる
  • でも、モバイルアプリはAdobe CCまで

  • 最近変わってきた

    • デザイナさんがAutoLayoutの書き換えまでやるようになってきている

今回のゴール

  • デザイナーがStoryboardを編集するワークフローの獲得
  • チームの生産性向上

導入

  • チームや個人のモチベーション重視
    • やる気がなさそうならさっさと諦める
  • 開発環境をセットアップ
  • 手取り足取り教える
  • 実際に触れてもらう

Interface Builder

  • 意外といろいろ新しい要素がある
  • デザイナ的には案外わかりやすい

  • 登場する要素について

    • View
      • ここはわかりやすい
    • ViewController
      • 黄色いアイコンのやつがViewControllerだよ!
      • Viewとペアになってるよ
    • AutoLayout
      • これが。。。。
  • 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

ここまで学ぶのにどこまで大変か?

  • 3日かかった
    • 多分速い方
  • iOSAndroidのLayoutを理解してもらうのにかかった時間

ワークフロー

  • アプリの機能が企画される
  • デザイナーがレイアウトを決める
  • エンジニアが実装
  • デザイナが細部を調整
  • コードレビュー

Make App Designable

  • IBDesignable
    • Storyboardで見れる
  • IBInspectable
    • Storyboardから値を設定できる

ヒント

  • 前提を共有する
  • 同じドメイン知識を共有する

  • 用語をきっちり揃える

  • 独自のViewをたくさん作る

    • 再利用性のあるコンポーネント
    • パラメータを @IBInspectable
    • 最初から作り込み過ぎない
  • よく作る例

    • Border
      • 線の幅を指定できたり
      • 物理pixcelにしたい場合、とか
    • AttributedTLabel
    • BorderedButton

エンジニアにとって大事なこと

  • UIKitについて学ぶ
    • 知らないことは意外と多い
  • Storyboardを巧く管理する
    • 分割は必須
    • コンフリクトは最大の敵
    • 同じ所を同時に触らない
      • デザイン調整は後で、ぐらいでも良い
  • デザイナーを手助けする
    • 忙しい
    • 丁寧なサポートを心がける
    • レビューがあると安心感が出る

まとめ

  • 開発チームが協力することで実現
  • 難易度は高め
  • 大きなメリット

QA

  • Storyboardのレビューはどうしてる?

    • 複雑な場合はcheckoutしてアウトラインで見てみたり
  • ContainerViewを多用したい場合はどうしている?

    • エンジニア側でContainerを作ってStoryboardを分割してしまう
    • 中身だけお願いします、みたいな