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
15
SwiftUIでProfileアプリを作ろう
harutiro
October 04, 2024
Tweet
Share
More Decks by harutiro
See All by harutiro
プログラマーのGoogle検索および、生成AIを用いたエラー解決方法
harutiro
0
12
「DroidKaigi2024」 スピーカー体験記
harutiro
0
72
[初心者向けGitHub勉強会資料(VScode版)]How To GitHub In VSCode
harutiro
0
95
モバイル開発をする上での利点とは? Webとの違いを考えてみる
harutiro
0
16
安物サーマルプリンターとAndroidを使って遊んでみる
harutiro
0
34
stmn.LT会.ぱぱっとモバイルでセンサー処理をしてみる
harutiro
0
13
[DroidKaigi2024] 電池寿命を考えた位置情報の監視方法を考える(Geofence)
harutiro
0
84
[GitHub勉強会資料 CLI版]How To Use GitHub In CLI
harutiro
0
190
Other Decks in Technology
See All in Technology
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
SCSAから学ぶセキュリティ管理
masakamayama
0
140
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
130
FastConnect の冗長性
ocise
1
9.6k
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
マルチモーダル理解と生成の統合 DeepSeek Janus, etc... / Multimodal Understanding and Generation Integration
hiroga
0
360
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
リーダブルテストコード 〜メンテナンスしやすい テストコードを作成する方法を考える〜 #DevSumi #DevSumiB / Readable test code
nihonbuson
11
5.8k
テストアーキテクチャ設計で実現する高品質で高スピードな開発の実践 / Test Architecture Design in Practice
ropqa
3
710
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
Statistics for Hackers
jakevdp
797
220k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Code Reviewing Like a Champion
maltzj
521
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Thoughts on Productivity
jonyablonski
69
4.5k
RailsConf 2023
tenderlove
29
1k
Done Done
chrislema
182
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
Building Adaptive Systems
keathley
40
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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
自分流に変更してみよう
今までのコードをちょっと変更してオリジナル化しよ う • 画像の変更 • テキストの変更 • 色の変更 • テキストを増やす
• アイコンを追加してみる アイディア一覧 自由に調べたり、 自分を呼んで実装してみる