search

tora-muscle / 1weekPDCA

このアプリは一週間をより有意義なものにするために一週間単位で生活を振り返ることができるアプリです
MIT License
0 stars 0 forks source link

✨ Plan・Do 画面の実装 #2

Closed tora-muscle closed 1 year ago

tora-muscle commented 1 year ago

✨ 実現したいこと

🚩 やらないこと

🔀 達成条件

👀 備考

スクリーンショット 2023-01-31 16 07 39

tora-muscle commented 1 year ago

🎨 デザイン変更

追加点

スクリーンショット 2023-02-04 12 02 49

tora-muscle commented 1 year ago

🗒 一週間の日付を取得する方法（月曜始まり）

// 月曜日の0時0分0秒を返す関数
func getMondayOfCurrentWeek() -> Date {
    // current プロパティを呼び出して、システム時間に基づくカレンダーインスタンスを取得
    let calendar = Calendar.current
    // 現在の日付から「年・週」の情報を取得
    var components = calendar.dateComponents([.yearForWeekOfYear, .weekOfYear], from: Date())
    // 月曜日の情報を設定
    components.weekday = 2
    // DateComponents 型変数の components から Date 型のインスタンスを作成
    let monday = calendar.date(from: components)!
    return calendar.date(bySettingHour: 0, minute: 0, second: 0, of: monday)!
}

// その週の月曜日の0時0分0秒と日曜日の23時59分59秒を返す関数
func getWeekRange() -> (monday: Date, sunday: Date) {
    let calendar = Calendar.current
    let monday = getMondayOfCurrentWeek()
    // 月曜日の日付を基に、6日加算した日付、つまり、日曜日を取得
    let sunday = calendar.date(byAdding: .day, value: 6, to: monday)!

    let sundayEndOfDay = calendar.date(bySettingHour: 23, minute: 59, second: 59, of: sunday)!
    return (monday, sundayEndOfDay)
}

▼ 参考記事

tora-muscle commented 1 year ago

🗒 後で使いそうなパーツをモデル化する方法

struct WeekProgressBarCard: View {
    let today = Date()
    let calendar = Calendar.current

    var body: some View {
        let weekRange = getWeekRange()
        let progress = 0.71 // 現時点ではモック化のために定数に設定

        ZStack {
            VStack(spacing: 20) {
                Spacer().frame(height: 7)
                HStack {
                    let (_, _) = getWeekRange()
                    Text(formatWeekRangeText(weekRange))
                        .font(.system(size: 20))
                        .fontWeight(.bold)
                        .foregroundColor(Color.uiColorGray)
                    Spacer()
                }

                HStack {
                    Spacer()
                    CustomProgressBar(progress: progress)
                        .frame(height: 20)// 進捗ごとに色を変える実装にする予定

                    Spacer()
                }
            }
            .padding(Edge.Set.horizontal, 50)
            .background(
                GeometryReader { geometry in
                    Rectangle()
                        .fill(Color.cardColorGray)
                        .cornerRadius(25)
                        .padding(Edge.Set.horizontal, 25)
                        // 子 View の高さに応じて可変するようにした
                        .frame(height: geometry.size.height + 20)
                }
            )
        }
        .frame(height: 120) // WeekProgressBarCardの最小の高さ
    }
}

▼ 切り出し後（モデル）

struct CardView<Content: View>: View {
    let content: Content

    // 渡された View を content に保持させることで body で使えるようにしている
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        ZStack {
            VStack(spacing: 20) {
                Spacer().frame(height: 7)
                content
            }
            .padding(Edge.Set.horizontal, 50)
            .background(
                GeometryReader { geometry in
                    Rectangle()
                        .fill(Color.cardColorGray)
                        .cornerRadius(25)
                        .padding(Edge.Set.horizontal, 25)
                        .frame(height: geometry.size.height + 20)
                        .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 5)
                }
            )
        }
        .frame(height: 120)
    }
}

▼ 参考文献

tora-muscle commented 1 year ago

🐛 キーボードを起動するとボトムバーがキーボード上に移動してしまうバグ

▼ 現象

https://user-images.githubusercontent.com/111550856/218970859-0ff03dfe-0e54-40b5-81a0-57a7ea1ab487.mov

▼ 原因

var body: some View {

        ZStack {

            // 背景色.
            Color.backGroundColorGray.ignoresSafeArea()

            // メイン画面部分はTabViewで定義.
            TabView(selection: $selected) {
                ForEach(0 ..< 3) { index in
                    bottomBarItems[index].view
                        .tag(index)
                }
            }
            // PageTabスタイルを利用する(インジケータは非表示).
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

            VStack {

                Spacer(minLength: 0)

                // タブビュー部分.
                HStack (spacing: (UIScreen.main.bounds.width - 100.0) / 3){
                    ForEach(0 ..< 3) { 
                            // 略
                            }
                            .foregroundColor(self.selected == index ? Color.uiColorGreen : Color.uiColorGray)
                            .scaleEffect(self.selected == index && self.isBig ? 1.3 : 1.0)
                    }
                }
            // 略
            }
        }
    }
}

▼ 解決法

▼ 動作確認

動作環境 : iOS16.1.1 iPhone12Pro

https://user-images.githubusercontent.com/111550856/218971746-dbaf1f44-35c3-420c-a539-9a9c1ef65793.mov

▼ 参考記事

tora-muscle commented 1 year ago

🚨 0942e4eiOS16.0以上対応になった

▼ 参考文献

tora-muscle commented 1 year ago

🐛 複数行入力でWeekProgressBarCard()にTaskCard()が覆い被さる

▼ 関連コミット

▼ 現象

https://user-images.githubusercontent.com/111550856/219054571-fbd083a1-166b-4bc4-bff7-f7bd9020d504.mov

▼ 原因

補足画像 ![IMG_5172](https://user-images.githubusercontent.com/111550856/219060710-bbe94687-0bbd-404a-aee8-33dbb4994431.PNG)
`CardView()`の原因箇所 ```swift struct CardView: View { let content: Content // 渡された View を content に保持させることで body で使えるようにしている init(@ViewBuilder content: () -> Content) { self.content = content() } var body: some View { ZStack { VStack(spacing: 20) { Spacer().frame(height: 7) content } .padding(Edge.Set.horizontal, 50) .background( GeometryReader { geometry in Rectangle() .fill(Color.cardColorGray) .cornerRadius(25) .padding(Edge.Set.horizontal, 25) .frame(height: geometry.size.height + 20) .shadow(color: Color.black.opacity(0.2), radius: 10, x: 0, y: 5) } ) } // ↓こいつ！！！ .frame(height: 120) .padding(.vertical, 15.0) } } ```

▼ 解決法

▼ 動作確認 動作環境 : iOS16.1.1 iPhone12Pro

https://user-images.githubusercontent.com/111550856/219061817-8ef32b91-0552-482a-8fb0-6c1e89f26fad.mov

この修正に2時間。。。参考文献なし。。。つらい

tora-muscle commented 1 year ago

🗒 メモ

tora-muscle commented 1 year ago

🗒 教訓。。。

▼ 最終的なPlanDo画面での状態管理変数

class TaskCardManager: ObservableObject{

    @Published var taskCardData = [
        (
            taskTitle: String,
            todoData: [(todoText: String, isDone: Bool)]
        )
    ]()
}
tora-muscle commented 1 year ago

🗒 DDD（Domain-Driven Design）って何？

clean-ddd https://nrslib.com/clean-ddd-entity/ より拝借

What?

Why?

DDD から得られる恩恵

▼ 参考記事

tora-muscle commented 1 year ago

🐛 TabViewにignoresSafeAreaが適用されない

▼ 現象

スクリーンショット 2023-02-22 0 51 04

▼ 原因

▼ 解決法

var body: some View {

            ZStack {

                // 背景色.
                Color.backGroundColorGray.ignoresSafeArea()

                // メイン画面部分はTabViewで定義.
                VStack {

                    Color.clear.frame(height: 15)

                    TabView(selection: $selected) {
                        ForEach(0 ..< 3) { index in
                            bottomBarItems[index].view
                                .tag(index).ignoresSafeArea()
                        }
                    }
                    // PageTabスタイルを利用する(インジケータは非表示).
                    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))

                    Color.clear.frame(height: 65)
                }
                // 中略
            }
            // ↓↓↓追加↓↓↓
            .frame(
                            width: UIScreen.main.bounds.width ,
                            height: UIScreen.main.bounds.height
                        )
            .ignoresSafeArea(.keyboard)
        }

▼ 動作確認 動作環境 : iOS16.2 iPhone14（エミュレータ）

スクリーンショット 2023-02-22 0 53 00

▼ 参考記事