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
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
ビギナーであり続ける/beginning
ikuodanaka
3
760
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
510
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
700
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
260
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
SaaS型なのに自由度の高い本格CMSでサイト構築と運用のコスパ&タイパUP! MovableType.net の便利機能とユーザー事例のご紹介
masakah
0
110
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Balancing Empowerment & Direction
lara
1
430
Practical Orchestrator
shlominoach
189
11k
RailsConf 2023
tenderlove
30
1.1k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Become a Pro
speakerdeck
PRO
29
5.4k
It's Worth the Effort
3n
185
28k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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
自分流に変更してみよう
今までのコードをちょっと変更してオリジナル化しよ う • 画像の変更 • テキストの変更 • 色の変更 • テキストを増やす
• アイコンを追加してみる アイディア一覧 自由に調べたり、 自分を呼んで実装してみる