バックエンド
エンジニア
フロントエンド
エンジニア
デザイナー
実装で使用するもの
Xcode AppCode
開発をする
ソフト
GitHubSketch
1. 構成を考えていく
デザインとパーツの対応付けをしていく
縦方向へ様々な項目をリスト表示する場合は
UITableViewを使う
UITableView
様々な項目を好きなレイアウトで表示する場合は
UICollectionViewを使う
UICollectionView
画像表示にはUIImageViewを使う
UIImageView
文字表示にはUILabelを使う
UILabel
既存のパーツをカスタマイズして自分でパーツを作ることも可能
Custom
UISwitch / UISlider / UITextField
UIActivityIndicatorView
UISegmentControl / UIWebView
UIToolBar / UIRefreshControl ...
他にも様々なパーツが用意されている
2. Xcodeを使ってパーツのレイアウトを組む
Auto Layout って何?
デザインの 指示 を解釈していく
・幅 64px
・アスペクト比 1:1
・上から32pxの間隔
・全体の中心(横)
アイコンと
中央を揃える(横)
間は6px
デザインの 指示 を解釈していく
視覚的にレイアウトを実装できるツールが内蔵されている
3. コードを書く
通信処理
多言語対応(日本語・英語)
画面遷移
アニメーション
コードを書く必要のある処理
Swift の登場でよりiOS開発は身近になった
delegate.application?(app,
willFinishLaunchingWithOptions:options)
Swift
Objective-C
if ([delegate respondsToSelector:
@selector(application:willFinishLaunchingWithOptions:)]) {
[delegate application:app
willFinishLaunchingWithOptions:options];
}
4. デザインとのズレを修正する
デザインの上にスクリーンショットを重ねる
スクリーンショットの透明度を下げる
拡大して差を測る
5. デザイナーに確認してもらう
1. デザイナーに ブランチ名 を伝える
2. 実際に実機などでチェックしてもらう
3. 修正する
デザイン確認の流れ
6. コードレビュー
GitHub上でコードレビューを行う
追加した行は緑 / 削除した行は赤でハイライトされる
各行についてやりとりができる
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発

デザイナーとエンジニアが話す、iOSアプリケーション開発