Sumally デザイナー 大杉 健太 / エンジニア 中元寺 武尊 2015/04/14 Apple Store 銀座

11. バックエンド
エンジニア
フロントエンド
エンジニア
デザイナー

65. 実装で使用するもの
Xcode AppCode
開発をする
ソフト
GitHubSketch

66. 1. 構成を考えていく

67. デザインとパーツの対応付けをしていく

68. 縦方向へ様々な項目をリスト表示する場合は
UITableViewを使う
UITableView

69. 様々な項目を好きなレイアウトで表示する場合は
UICollectionViewを使う
UICollectionView

70. 画像表示にはUIImageViewを使う
UIImageView

71. 文字表示にはUILabelを使う
UILabel

72. 既存のパーツをカスタマイズして自分でパーツを作ることも可能
Custom

73. UISwitch / UISlider / UITextField
UIActivityIndicatorView
UISegmentControl / UIWebView
UIToolBar / UIRefreshControl ...
他にも様々なパーツが用意されている

74. 2. Xcodeを使ってパーツのレイアウトを組む

75. Auto Layout って何？

76. デザインの 指示 を解釈していく
・幅 64px
・アスペクト比 1:1
・上から32pxの間隔
・全体の中心(横)

77. アイコンと
中央を揃える（横）
間は6px
デザインの 指示 を解釈していく

79. 視覚的にレイアウトを実装できるツールが内蔵されている

81. 3. コードを書く

82. 通信処理
多言語対応（日本語・英語）
画面遷移
アニメーション
コードを書く必要のある処理

83. Swift の登場でよりiOS開発は身近になった
delegate.application?(app,
willFinishLaunchingWithOptions:options)
Swift
Objective-C
if ([delegate respondsToSelector:
@selector(application:willFinishLaunchingWithOptions:)]) {
[delegate application:app
willFinishLaunchingWithOptions:options];
}

84. 4. デザインとのズレを修正する

85. デザインの上にスクリーンショットを重ねる

86. スクリーンショットの透明度を下げる

87. 拡大して差を測る

88. 5. デザイナーに確認してもらう

89. 1. デザイナーに ブランチ名 を伝える
2. 実際に実機などでチェックしてもらう
3. 修正する
デザイン確認の流れ

90. 6. コードレビュー

91. GitHub上でコードレビューを行う

92. 追加した行は緑 / 削除した行は赤でハイライトされる

93. 各行についてやりとりができる