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
SwiftUIでProfileアプリを作ろう
Search
harutiro
October 04, 2024
Technology
0
29
SwiftUIでProfileアプリを作ろう
harutiro
October 04, 2024
Tweet
Share
More Decks by harutiro
See All by harutiro
モバイルエンジニアもCodeRabbitを使ってレビューを少し楽しよう!
harutiro
0
130
プログラマーのGoogle検索および、生成AIを用いたエラー解決方法
harutiro
0
42
「DroidKaigi2024」 スピーカー体験記
harutiro
0
87
[初心者向けGitHub勉強会資料(VScode版)]How To GitHub In VSCode
harutiro
0
140
モバイル開発をする上での利点とは? Webとの違いを考えてみる
harutiro
0
28
安物サーマルプリンターとAndroidを使って遊んでみる
harutiro
0
61
stmn.LT会.ぱぱっとモバイルでセンサー処理をしてみる
harutiro
0
25
[DroidKaigi2024] 電池寿命を考えた位置情報の監視方法を考える(Geofence)
harutiro
0
170
[GitHub勉強会資料 CLI版]How To Use GitHub In CLI
harutiro
0
200
Other Decks in Technology
See All in Technology
PO初心者が考えた ”POらしさ”
nb_rady
0
210
Claude Code に プロジェクト管理やらせたみた
unson
6
4.1k
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
470
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
710
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.3k
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
17k
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.6k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Statistics for Hackers
jakevdp
799
220k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How to train your dragon (web standard)
notwaldorf
95
6.1k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Become a Pro
speakerdeck
PRO
29
5.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Transcript
SwiftUIで Profileアプリを作ろう 牧野遥斗(はるちろ)
参考にした資料 AndroidDeveloperの誕生日カードとほぼ同じ内容にしています。 https://developer.android.com/courses/pathways/android-basics-compose-unit-1-pathway-3
プロジェクトを作ろう
XCodeを起動させてプロジェクトをつくろう! CreateNewProjectを押す
iOSのテンプレートを選ぶ iOSが選択されているのを 確認する Appを選択して、 プロジェクトを作成する
プロジェクトの情報を入れる。基本は画像通りに アプリ名を設定する ここはアプリを識別するため の部分 学籍番号は自分のもので
保存をする場所を決める 自分のわかりやすい場所にお く 設定ができたらCreateを押す
こんな画面が出てこればOKです
文字を置いてみよう
今回作る物 とりあえず、文字を置いてみよう!
文字をおくためのコンポーネントを作る ※コンポーネント=部品という意味 [メッセージ]と[誰からの文章か]を入れたら、簡単に切り替えれるようにする GreetingText( message: "Happy Birthday Sam", from: "From
Emma" ) GreetingText
文字をおくためのコンポーネントを作る 何も映らない 部品を作る!
部品を簡単に変えれるようにする messageとfromを 自由に変えれるようになります
メッセージを表示してみる 表示されたけど、 文字が小さいし 太くもない... プロパティを 変えてみよう
Textのプロパティ(大きさ) .font(.system(size: 100)) 数値で指定する時は 以下のようにやる 参考文献: https://capibara1969.com/1981/
Textのプロパティ(太さ) 参考文献: https://capibara1969.com/1981/
Textのプロパティ(文字の位置) 左寄せ 真ん中寄せ 右寄せ
もし.multilineTextAlignmentで位置が変わらない時 multilineTextAlignment(.trailing) は 複数行のテキストでの左右揃えに使われる 親ビューでのテキストの配置には frame の alignment を使う。
最終的にこうしてみる
画像を追加してみる
今回作る物 画像を置くよ
コンポーネントをどのように置くか? 画像 GreetingText GreetingTextの裏側に 画像を配置して実装をしてみる
画像を重ねるコンポーネントをつくてみる 表示するコンポーネントが 変わっているので注意 画像を表示する コンポーネントを作成する
VStack, HStack, ZStackについて 選択するものが変わっているだけ 表示する順序を入れ替えるもの 縦並び、横並び、重ねる https://zenn.dev/rikutosato/books/6cee0a2b8aa796/viewer/b55137
さっきと表示が変わらないようにしてみよう
画像をダウンロードしよう 自分の好きな画像をダウンロードするか用意しよう 今回はO-DANを利用して用意してみます https://o-dan.net/ja/ 用意した画像
画像を使えるようにしよう https://capibara1969.com/1861/
画像を使えるようにしよう ここの名前がプログラムで 指定する名前なので、 わかりやすい名前にしてね
最終的にこうしてみる 疲れたから 説明を飛ば したわけで はないよ...
全体コード
答えについて
GitHubを用いて答えのソースをおいてあります。 https://github.com/harutiro/ProfileAppTest
自分流に変更してみよう
今までのコードをちょっと変更してオリジナル化しよ う • 画像の変更 • テキストの変更 • 色の変更 • テキストを増やす
• アイコンを追加してみる アイディア一覧 自由に調べたり、 自分を呼んで実装してみる