#前回までのおさらい
####概要
こちらは会社のアドベントカレンダーを書く企画に便乗してアドベントカレンダーを作ってみたい記事の後編です。
前編は こちら。
####前編の最後の進捗
1.1日~25日までのボタンを配置する
2.ボタンをタップすることでモーダル表示されるようにする
3.モーダルで何かしらの表示をする ←今回はここからやっていきます。
4.もし当日以降の日付がタップされた場合、「まだ開けられないよ！」と表示する
#3.モーダルで何かしらの表示をする
何にしようかな、と悩んだのですが、それぞれの日にちに古今東西の偉人の名言を入れることにしました。
もちろん25日はキリストです。お誕生日なので。
見た目はこんな感じ。
コードはこんな感じ。
ContentView.swift
import SwiftUI
struct ContentView: View {
//ポップアップの表示非表示を切り替える
@State var showingPopUp = false
//日付ごとのコメント
@State var comment: String = ""
var body: some View {
GeometryReader { geometry in
VStack(spacing: 0){
//タイトル
Text("Advent calendar 2021")
//fontを変更
.font(.system(.title, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.9, green: 0.9, blue: 0.0, opacity: 1.0))
//余白を追加
.padding()
//横幅を画面いっぱいにする
.frame(maxWidth: .infinity)
.frame(alignment: .top)
//背景の色を変える
.background(Color(red: 0.1, green: 0.0, blue: 0.4, opacity: 1.0))
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
comment = "夢は逃げない。逃げるのはいつも自分だ"
}
}){
Text("1")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "何が嫌いかより何が好きかで自分を語れよ"
}
}){
Text("2")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "強い人間なんていない。強くあろうとする人がいるだけだ。"
}
}){
Text("3")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "勝つことは偶然じゃない。"
}
}){
Text("4")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
comment = "やってしまった後悔は段々小さくなる。やらなかった後悔は段々大きくなる。"
}
}){
Text("5")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "生きてるだけで丸儲け"
}
}){
Text("6")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "変わることを恐れるな"
}
}){
Text("7")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "まずはやってから考えよう"
}
}){
Text("8")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
comment = "まずはやってから考えよう"
}
}){
Text("9")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "常識とは、18歳までに身に付けた偏見のコレクションである。"
}
}){
Text("10")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "打ちのめされたかどうかではなく、立ち上がったかどうかが大切だ"
}
}){
Text("11")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "被害者ではなく、人生のヒロインでありなさい"
}
}){
Text("12")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
comment = "何事も、成し遂げるまではいつも不可能に見える"
}
}){
Text("13")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "昨日は取り戻せないけれど、明日勝つか負けるか自分次第だ"
}
}){
Text("14")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "時間は限られているのだから、他人の人生を生きて自分の時間を無駄に過ごしてはいけない"
}
}){
Text("15")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "虹を見たかったら、雨も我慢しなくちゃね"
}
}){
Text("16")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
comment = "一度失敗したからといって、すべてが失敗するわけじゃないわ"
}
}){
Text("17")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "暗闇の中でこそ、星が見える"
}
}){
Text("18")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "顔をいつも太陽のほうにむけていれば、影なんて見なくて済むはず"
}
}){
Text("19")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "誰かの『雲の中の一筋の虹』になるよう努めて下さい"
}
}){
Text("20")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
comment = "成功者とは、諦めることを知らない夢追い人のこと"
}
}){
Text("21")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "追いかけ続ける勇気さえあれば、夢は必ず叶います"
}
}){
Text("22")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "頭ではなく、心に従って下さい"
}
}){
Text("23")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "楽観的になりましょう。気分が良くなりますよ"
}
}){
Text("24")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
}
Button(action:{
withAnimation {
showingPopUp = true
comment = "暗いと不平を言うよりも進んで明かりを点けましょう。"
}
}){
Text("25")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
.frame(maxWidth: .infinity)
//テキストの色を変更
.foregroundColor(Color(red: 0.9, green: 0.9, blue: 0.0, opacity: 1.0))
//要素の幅と高さを指定
.frame(height: geometry.size.height / 9)
//背景の色を変える
.background(Color(red: 0.1, green: 0.0, blue: 0.4, opacity: 1.0))
}
}
//ポップアップを表示させる
if showingPopUp {
PopupView(isPresent: $showingPopUp,comment: $comment)
}
}
}
}
//ポップアップの中身
struct PopupView: View {
//表示を定義する変数の作成
@Binding var isPresent: Bool
//名言を格納する変数の作成
@Binding var comment: String
var body: some View {
Button(action: {
withAnimation {
isPresent = false
}
}, label: {
VStack(spacing: 13) {
//名言の表示
Text(comment)
.font(.custom("Cochin-BoldItalic ", size: 28))
.padding()
}
.padding()
.frame(width: 300, height: 300)
// 背景色をつける
.background(Color(red: 0.1, green: 0.0, blue: 0.4, opacity: 1.0))
// 角を丸くする
.cornerRadius(12.0)
})
.frame(maxWidth: .infinity,maxHeight: .infinity,alignment: .center)
.padding()
.background(Color.clear)
//テキストの色を変更
.foregroundColor(Color(red: 0.9, green: 0.9, blue: 0.0, opacity: 1.0))
}
}
#4.もし当日以降の日付がタップされた場合、「まだ開けられないよ！」と表示する
今回は年月日をそれぞれ比較して、毎年12月だけ開けれる感じにしたかったので、そんな感じでコードを書きました。
ただもっと簡単に比較する方法があるんじゃないか？とも思うのでわかる方教えてください。
まだきてない日付を押した時はこんな感じ。
コードはついにアホみたいに長くなりました。リーダブルコードのリの字も感じられませんね。
ContentView.swift
import SwiftUI
struct ContentView: View {
//ポップアップの表示非表示を切り替える
@State var showingPopUp = false
//日付ごとのコメント
@State var comment: String = ""
//今日の日付を確認
let today = Calendar.current.dateComponents(in: TimeZone.current, from: Date())
var body: some View {
GeometryReader { geometry in
VStack(spacing: 0){
//タイトル
Text("Advent calendar 2021")
//fontを変更
.font(.system(.title, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.9, green: 0.9, blue: 0.0, opacity: 1.0))
//余白を追加
.padding()
//横幅を画面いっぱいにする
.frame(maxWidth: .infinity)
.frame(alignment: .top)
//背景の色を変える
.background(Color(red: 0.1, green: 0.0, blue: 0.4, opacity: 1.0))
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 1 {
comment = "夢は逃げない。逃げるのはいつも自分だ"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("1")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 2 {
comment = "何が嫌いかより何が好きかで自分を語れよ"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("2")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 3 {
comment = "強い人間なんていない。強くあろうとする人がいるだけだ。"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("3")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 4 {
comment = "勝つことは偶然じゃない。"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("4")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 5 {
comment = "やってしまった後悔は段々小さくなる。やらなかった後悔は段々大きくなる。"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("5")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 6 {
comment = "生きてるだけで丸儲け"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("6")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 7 {
comment = "変わることを恐れるな"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("7")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 8 {
comment = "もっと熱くなれよ！"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("8")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 9 {
comment = "まずはやってから考えよう"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("9")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 10 {
comment = "常識とは、18歳までに身に付けた偏見のコレクションである。"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("10")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 11 {
comment = "打ちのめされたかどうかではなく、立ち上がったかどうかが大切だ"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("11")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 12 {
comment = "被害者ではなく、人生のヒロインでありなさい"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("12")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 13 {
comment = "何事も、成し遂げるまではいつも不可能に見える"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("13")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 14 {
comment = "昨日は取り戻せないけれど、明日勝つか負けるか自分次第だ"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("14")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 15 {
comment = "時間は限られているのだから、他人の人生を生きて自分の時間を無駄に過ごしてはいけない"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("15")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 16 {
comment = "虹を見たかったら、雨も我慢しなくちゃね"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("16")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 17 {
comment = "一度失敗したからといって、すべてが失敗するわけじゃないわ"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("17")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 18 {
comment = "暗闇の中でこそ、星が見える"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("18")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 19 {
comment = "顔をいつも太陽のほうにむけていれば、影なんて見なくて済むはず"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("19")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 20 {
comment = "誰かの『雲の中の一筋の虹』になるよう努めて下さい"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("20")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
}
HStack(spacing: 0){
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 21 {
comment = "成功者とは、諦めることを知らない夢追い人のこと"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("21")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 22 {
comment = "追いかけ続ける勇気さえあれば、夢は必ず叶います"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("22")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 23 {
comment = "頭ではなく、心に従って下さい"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("23")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.7, green: 0.0, blue: 0.1, opacity: 1.0))
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 24 {
comment = "楽観的になりましょう。気分が良くなりますよ"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("24")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
//テキストの色を変更
.foregroundColor(Color(red: 0.8, green: 0.7, blue: 0.1, opacity: 1.0))
//要素の幅と高さを指定
.frame(width: geometry.size.width / 4, height: geometry.size.height / 7)
//背景の色を変える
.background(Color(red: 0.1, green: 0.5, blue: 0.1, opacity: 1.0))
}
}
Button(action:{
withAnimation {
showingPopUp = true
if today.year! >= 2021 && today.month! == 12 && today.day! >= 25 {
comment = "暗いと不平を言うよりも進んで明かりを点けましょう。"
}else {
comment = "まだ見れないよ！"
}
}
}){
Text("25")
//fontを変更
.font(.system(.largeTitle, design: .monospaced))
.frame(maxWidth: .infinity)
//テキストの色を変更
.foregroundColor(Color(red: 0.9, green: 0.9, blue: 0.0, opacity: 1.0))
//要素の幅と高さを指定
.frame(height: geometry.size.height / 9)
//背景の色を変える
.background(Color(red: 0.1, green: 0.0, blue: 0.4, opacity: 1.0))
}
}
//ポップアップを表示させる
if showingPopUp {
PopupView(isPresent: $showingPopUp,comment: $comment)
}
}
}
}
//ポップアップの中身
struct PopupView: View {
//表示を定義する変数の作成
@Binding var isPresent: Bool
//名言を格納する変数の作成
@Binding var comment: String
var body: some View {
Button(action: {
withAnimation {
isPresent = false
}
}, label: {
VStack(spacing: 13) {
//名言の表示
Text(comment)
.font(.custom("Cochin-BoldItalic ", size: 28))
.padding()
}
.padding()
.frame(width: 300, height: 300)
// 背景色をつける
.background(Color(red: 0.1, green: 0.0, blue: 0.4, opacity: 1.0))
// 角を丸くする
.cornerRadius(12.0)
})
.frame(maxWidth: .infinity,maxHeight: .infinity,alignment: .center)
.padding()
.background(Color.clear)
//テキストの色を変更
.foregroundColor(Color(red: 0.9, green: 0.9, blue: 0.0, opacity: 1.0))
}
}
#5.思いつくままに書いたコードを読みやすいようにする...?
さて、好き勝手書いたコードをリファクタリングしないといけないわけですが、今回はここまでです。
え？リファクタリングは？と思ったそこのあなた、ご安心ください。18日公開予定の記事でしっかりリファクタリングされる予定です。
ではでは、次回をお楽しみに！