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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
tiking
October 02, 2020
Programming
160
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
コードでUI構築してみた
以前LTで登壇した内容です
tiking
October 02, 2020
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
300
GraphQL 入門
tiking76
0
1.5k
みんなTCAって 知ってる?ver2.0
tiking76
1
380
みんなTCAって知ってる?
tiking76
0
1.1k
最近きてるかもって思ってるデザイン
tiking76
0
300
Swiftのちょっとうれしい構文
tiking76
0
150
p1assさんを作ろうと試みました
tiking76
0
180
PRのときに使われがちな略語のやつ
tiking76
0
150
swiftでもグラフ書いてみたくない??
tiking76
0
290
Other Decks in Programming
See All in Programming
数百円から始めるRuby電子工作
tarosay
0
140
jsmini JavaScript Engine を作ってみた話
yosuke_furukawa
PRO
0
300
Japan Community Day at Kubecon + CloudNativeCon Japan 2026: Learning Container Privilege Control by Building My Own Low-Level Container Runtime
ternbusty
1
140
ドリフトを絶対に許さない(?)CDK運用 / CDK Ops with Zero Tolerance for Drifts (?)
akihisaikeda
1
180
改善しないと、タスクが回らない。 “てんこ盛りポジション” を引き継いだ情シスの、入社3ヶ月の業務改善録
krm963
0
260
Google Apps Script で Ruby を動かす
kawahara
0
140
AI時代に設計が 最大の生産性レバーになる 意図駆動開発とデータを消さない設計|Don't Delete Your Data or Your Intent — Design as the Deepest Lever in the AI Era
tomohisa
1
730
What's New in Android 2026
veronikapj
0
250
【やさしく解説 設計編・中級 #1】一つの車に、運転手は一人 ~ある倉庫システムの事例から~
panda728
PRO
0
210
仕様駆動開発へのトライを機に チームに適合する手法を模索し続けている話
freee
PRO
0
450
ビデオ通話が繋がる0.2秒で何が起きているのか
supurazako
2
180
torikago - Ruby::Boxで照らすモジュラモノリスの実行境界
se4weed
1
350
Featured
See All Featured
The Curious Case for Waylosing
cassininazir
1
450
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
56k
A Guide to Academic Writing Using Generative AI - A Workshop
ks91
PRO
1
360
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.5k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
akihiro_kokubo
PRO
73
41k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
119
120k
The untapped power of vector embeddings
frankvandijk
2
1.8k
Chasing Engaging Ingredients in Design
codingconduct
0
260
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
2
3.7k
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
270
Skip the Path - Find Your Career Trail
mkilby
1
180
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の知識が不足していたので、良い勉強になりました。
ここまで ありがとうございました