$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
コードでUI構築してみた
Search
tiking
October 02, 2020
Programming
0
130
コードでUI構築してみた
以前LTで登壇した内容です
tiking
October 02, 2020
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
210
GraphQL 入門
tiking76
0
1.5k
みんなTCAって 知ってる?ver2.0
tiking76
1
350
みんなTCAって知ってる?
tiking76
0
1k
最近きてるかもって思ってるデザイン
tiking76
0
280
Swiftのちょっとうれしい構文
tiking76
0
120
p1assさんを作ろうと試みました
tiking76
0
160
PRのときに使われがちな略語のやつ
tiking76
0
130
swiftでもグラフ書いてみたくない??
tiking76
0
260
Other Decks in Programming
See All in Programming
Java 25, Nuevas características
czelabueno
0
100
モデル駆動設計をやってみようワークショップ開催報告(Modeling Forum2025) / model driven design workshop report
haru860
0
280
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
panda728
PRO
39
26k
從冷知識到漏洞,你不懂的 Web,駭客懂 - Huli @ WebConf Taiwan 2025
aszx87410
2
3k
組み合わせ爆発にのまれない - 責務分割 x テスト
halhorn
1
160
Findy AI+の開発、運用におけるMCP活用事例
starfish719
0
1.7k
gunshi
kazupon
1
110
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
maroon1st
0
250
クラウドに依存しないS3を使った開発術
simesaba80
0
160
Deno Tunnel を使ってみた話
kamekyame
0
230
Combinatorial Interview Problems with Backtracking Solutions - From Imperative Procedural Programming to Declarative Functional Programming - Part 2
philipschwarz
PRO
0
110
Vibe codingでおすすめの言語と開発手法
uyuki234
0
110
Featured
See All Featured
First, design no harm
axbom
PRO
1
1.1k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
How to Ace a Technical Interview
jacobian
281
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
The untapped power of vector embeddings
frankvandijk
1
1.5k
How to build a perfect <img>
jonoalderson
0
4.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
196
70k
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
0
250
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
A Soul's Torment
seathinner
1
2k
ラッコキーワード サービス紹介資料
rakko
0
1.8M
Transcript
コードでUI構築してみた 2020/07/18 Zli × DMM合同
Readme name : 舘佳紀 colleage : 会津大学学部3年 さーくる : Zli所属です
Handlename : チキング 好きな言語 swift twitter @tikin0716 gitHub tiking76
背景 先日参加したハッカソンにて初めて体験して めっちゃええやんってなったので、個人でも やってみました。
あと… ・メルカリさんのこの記事をみて来てるぞ!!と思ったので… https://tech.mercari.com/entry/2019/12/13/155700 ・SwiftUIを用いてのXcode Previewによってデバックが手軽になったため。
今回やったこと storyboardやxibを使わずに、アプリを作った。
まずその前に… コードでUIを作るって実際どうなん?
メリット ・コードレビューがカンタン、差分がわかりやすい ・プルリクエスト、マージしようとしたときにコンフリクト(競合)が起きにくい ・パーツやUIViewControllerの再利用、継承がカンタン ・実装がコードに集約される(読みやすい)
storyboardのXML
デメリット ・iOSアプリ開発の入門はStoryboard前提のものが大半のため、学習コストがかかる ・レイアウトの確認に時間がかかる ・iOSエンジニア以外がレイアウトを確認したり、微調整するのに困難がある
どうやって作るん? ・コードでパーツを作っていきます。初回するコードの書き方→Initialization Closure ・自分の場合は、navigationControllerとか、rootViewの設定は、 SceneDelegate.swiftに書いてました ・layoutとかは、以下の画像のように実装していました。
SceneDeligateのコード
Layoutのコード Extention.swift
ラベルをつくりたい CustomInputAccessoryView.swif
ボタンをつくりたい CustomInputAccessoryView.swif, RegistrationController.swift
xibみたいなことしたい
None
letとlazyを使う時の注意 letでプロパティを定義した際には、viewDidloadで定義していないとselfが使えずエラー がでます。 button.addTarget(self, action: #selector(showNewMessage), for: .touchUpInside) この時にbuttonをlazyで定義してあげると、アクセス時に初期化されるのでselfが使え るようになります。
今回は、confighogehogeっていう関数で定義しているので使えている感じです。
画面遷移したい Loginページからメイン画面に遷移する
DEMO
参考資料 https://qiita.com/gaku2n/items/fa095276ab2d75cc8797
リポジトリー https://github.com/tiking76/chatapp
やってみておもったこと ・思いのほか自由なことができる反面、改めてIB(Interface Builder)の恩恵が あることを感 じることができました。 ・自分自身UIkitの知識が不足していたので、良い勉強になりました。
ここまで ありがとうございました