Slide 1

Slide 1 text

コードでUI構築してみた 2020/07/18 Zli × DMM合同

Slide 2

Slide 2 text

Readme name : 舘佳紀 colleage : 会津大学学部3年 さーくる : Zli所属です Handlename : チキング 好きな言語 swift twitter @tikin0716 gitHub tiking76

Slide 3

Slide 3 text

背景 先日参加したハッカソンにて初めて体験して めっちゃええやんってなったので、個人でも やってみました。

Slide 4

Slide 4 text

あと… ・メルカリさんのこの記事をみて来てるぞ!!と思ったので… https://tech.mercari.com/entry/2019/12/13/155700 ・SwiftUIを用いてのXcode Previewによってデバックが手軽になったため。

Slide 5

Slide 5 text

今回やったこと storyboardやxibを使わずに、アプリを作った。

Slide 6

Slide 6 text

まずその前に… コードでUIを作るって実際どうなん?

Slide 7

Slide 7 text

メリット ・コードレビューがカンタン、差分がわかりやすい
 ・プルリクエスト、マージしようとしたときにコンフリクト(競合)が起きにくい 
 ・パーツやUIViewControllerの再利用、継承がカンタン
 ・実装がコードに集約される(読みやすい) 


Slide 8

Slide 8 text

storyboardのXML

Slide 9

Slide 9 text

デメリット ・iOSアプリ開発の入門はStoryboard前提のものが大半のため、学習コストがかかる
 ・レイアウトの確認に時間がかかる 
 ・iOSエンジニア以外がレイアウトを確認したり、微調整するのに困難がある


Slide 10

Slide 10 text

どうやって作るん? ・コードでパーツを作っていきます。初回するコードの書き方→Initialization Closure ・自分の場合は、navigationControllerとか、rootViewの設定は、 SceneDelegate.swiftに書いてました ・layoutとかは、以下の画像のように実装していました。

Slide 11

Slide 11 text

SceneDeligateのコード

Slide 12

Slide 12 text

Layoutのコード Extention.swift

Slide 13

Slide 13 text

ラベルをつくりたい CustomInputAccessoryView.swif

Slide 14

Slide 14 text

ボタンをつくりたい CustomInputAccessoryView.swif, RegistrationController.swift

Slide 15

Slide 15 text

xibみたいなことしたい

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

letとlazyを使う時の注意 letでプロパティを定義した際には、viewDidloadで定義していないとselfが使えずエラー がでます。 button.addTarget(self, action: #selector(showNewMessage), for: .touchUpInside) この時にbuttonをlazyで定義してあげると、アクセス時に初期化されるのでselfが使え るようになります。 今回は、confighogehogeっていう関数で定義しているので使えている感じです。

Slide 18

Slide 18 text

画面遷移したい Loginページからメイン画面に遷移する

Slide 19

Slide 19 text

DEMO

Slide 20

Slide 20 text

参考資料 https://qiita.com/gaku2n/items/fa095276ab2d75cc8797

Slide 21

Slide 21 text

リポジトリー https://github.com/tiking76/chatapp

Slide 22

Slide 22 text

やってみておもったこと ・思いのほか自由なことができる反面、改めてIB(Interface Builder)の恩恵が あることを感 じることができました。 ・自分自身UIkitの知識が不足していたので、良い勉強になりました。

Slide 23

Slide 23 text

ここまで ありがとうございました