Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
コードでUI構築してみた
Search
tiking
October 02, 2020
Programming
0
110
コードでUI構築してみた
以前LTで登壇した内容です
tiking
October 02, 2020
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
190
GraphQL 入門
tiking76
0
1.4k
みんなTCAって 知ってる?ver2.0
tiking76
1
330
みんなTCAって知ってる?
tiking76
0
960
最近きてるかもって思ってるデザイン
tiking76
0
250
Swiftのちょっとうれしい構文
tiking76
0
92
p1assさんを作ろうと試みました
tiking76
0
140
PRのときに使われがちな略語のやつ
tiking76
0
110
swiftでもグラフ書いてみたくない??
tiking76
0
230
Other Decks in Programming
See All in Programming
20250429 - CNTUG Meetup #67 / DevOps Taiwan Meetup #69 - Deep Dive into Tetragon: Building Runtime Security and Observability with eBPF
tico88612
0
180
AIコーディングの理想と現実
tomohisa
37
39k
API for docs
soutaro
4
1.7k
Cursorを活用したAIプログラミングについて 入門
rect
0
180
LRパーサーはいいぞ
ydah
7
1.3k
カオスに立ち向かう小規模チームの装備の選択〜フルスタックTSという装備の強み _ 弱み〜/Choosing equipment for a small team facing chaos ~ Strengths and weaknesses of full-stack TS~
bitkey
1
140
generative-ai-use-cases(GenU)の推しポイント ~2025年4月版~
hideg
1
390
Lambda(Python)の リファクタリングが好きなんです
komakichi
5
270
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
520
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
850
一緒に働きたくなるプログラマの思想 #QiitaConference
mu_zaru
81
21k
AWS Summit Hong Kong 2025: Reinventing Programming - How AI Transforms Our Enterprise Coding Approach
dwchiang
0
140
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
GitHub's CSS Performance
jonrohan
1031
460k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Unsuck your backbone
ammeep
671
58k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
How STYLIGHT went responsive
nonsquared
100
5.5k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
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の知識が不足していたので、良い勉強になりました。
ここまで ありがとうございました