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
32
SwiftUIでProfileアプリを作ろう
harutiro
October 04, 2024
Tweet
Share
More Decks by harutiro
See All by harutiro
モバイルエンジニアもCodeRabbitを使ってレビューを少し楽しよう!
harutiro
0
140
プログラマーのGoogle検索および、生成AIを用いたエラー解決方法
harutiro
0
42
「DroidKaigi2024」 スピーカー体験記
harutiro
0
89
[初心者向けGitHub勉強会資料(VScode版)]How To GitHub In VSCode
harutiro
0
150
モバイル開発をする上での利点とは? Webとの違いを考えてみる
harutiro
0
31
安物サーマルプリンターとAndroidを使って遊んでみる
harutiro
0
68
stmn.LT会.ぱぱっとモバイルでセンサー処理をしてみる
harutiro
0
26
[DroidKaigi2024] 電池寿命を考えた位置情報の監視方法を考える(Geofence)
harutiro
0
180
[GitHub勉強会資料 CLI版]How To Use GitHub In CLI
harutiro
0
200
Other Decks in Technology
See All in Technology
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
270
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
260
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
280
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
120
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
11
2.7k
AI関数が早くなったので試してみよう
kumakura
0
120
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
160
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
370
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
1.9k
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
110
リリース2ヶ月で収益化した話
kent_code3
1
180
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Statistics for Hackers
jakevdp
799
220k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How STYLIGHT went responsive
nonsquared
100
5.7k
Optimizing for Happiness
mojombo
379
70k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Facilitating Awesome Meetings
lara
54
6.5k
Embracing the Ebb and Flow
colly
86
4.8k
Unsuck your backbone
ammeep
671
58k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Bash Introduction
62gerente
614
210k
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
自分流に変更してみよう
今までのコードをちょっと変更してオリジナル化しよ う • 画像の変更 • テキストの変更 • 色の変更 • テキストを増やす
• アイコンを追加してみる アイディア一覧 自由に調べたり、 自分を呼んで実装してみる