Rork Max × 折りたたみiPhone 2026 — フォルダブルデバイス時代に備えるアプリ設計戦略

// Rork Max が生成するフォルダブル対応アダプティブレイアウトの基本実装
 
import SwiftUI
 
// デバイス状態を管理するViewModifier
struct AdaptiveFoldableLayout: ViewModifier {
    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    @Environment(\.verticalSizeClass) private var verticalSizeClass
    @State private var isFolded: Bool = false
 
    // 折りたたみ状態の検出
    // 実際の折りたたみiPhone対応はAppleのAPIリリース後に更新予定
    private var deviceState: DeviceState {
        switch (horizontalSizeClass, verticalSizeClass) {
        case (.compact, .regular):
            return .compactPhone  // 折りたたみ時（外側画面）または通常iPhone
        case (.regular, .regular):
            return .expandedFold  // 展開時（内側大画面）
        case (.regular, .compact):
            return .landscapePhone  // 横向き通常iPhone
        default:
            return .compactPhone
        }
    }
 
    func body(content: Content) -> some View {
        content
            .environment(\.deviceState, deviceState)
    }
}
 
// デバイス状態の定義
enum DeviceState {
    case compactPhone    // 折りたたみ時 / 通常iPhone
    case expandedFold   // フォルダブル展開時
    case landscapePhone // 横向きiPhone
}
 
// EnvironmentKey の定義
struct DeviceStateKey: EnvironmentKey {
    static let defaultValue: DeviceState = .compactPhone
}
 
extension EnvironmentValues {
    var deviceState: DeviceState {
        get { self[DeviceStateKey.self] }
        set { self[DeviceStateKey.self] = newValue }
    }
}
 
// 実際のアダプティブコンテンツビュー
struct AdaptiveMainView: View {
    @Environment(\.deviceState) private var deviceState
    @State private var selectedItem: ContentItem?
 
    var body: some View {
        GeometryReader { geometry in
            switch deviceState {
            case .expandedFold:
                // 展開時: マスター・ディテール レイアウト（iPad スタイル）
                HStack(spacing: 0) {
                    // 左ペイン: コンテンツリスト（全幅の 40%）
                    NavigationStack {
                        ContentListView(selection: $selectedItem)
                    }
                    .frame(width: geometry.size.width * 0.4)
                    .background(Color(.systemGroupedBackground))
 
                    Divider()
 
                    // 右ペイン: 詳細表示（残り 60%）
                    if let item = selectedItem {
                        ContentDetailView(item: item)
                            .frame(maxWidth: .infinity)
                    } else {
                        EmptyStateView()
                            .frame(maxWidth: .infinity)
                    }
                }
 
            case .compactPhone, .landscapePhone:
                // コンパクト時: 通常の NavigationStack
                NavigationStack {
                    ContentListView(selection: $selectedItem)
                        .navigationDestination(item: $selectedItem) { item in
                            ContentDetailView(item: item)
                        }
                }
            }
        }
        .modifier(AdaptiveFoldableLayout())
        .animation(.easeInOut(duration: 0.3), value: deviceState)  // 折り曲げ時のアニメーション
    }
}
 
// コンテンツリストビュー
struct ContentListView: View {
    @Binding var selection: ContentItem?
    @State private var items: [ContentItem] = ContentItem.sampleData
 
    var body: some View {
        List(items, selection: $selection) { item in
            ContentRowView(item: item)
                .listRowInsets(EdgeInsets(top: 8, leading: 16, bottom: 8, trailing: 16))
        }
        .listStyle(.insetGrouped)
        .navigationTitle("コンテンツ")
    }
}
 
// コンテンツ詳細ビュー
struct ContentDetailView: View {
    let item: ContentItem
    @Environment(\.deviceState) private var deviceState
 
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                // 展開時は大きな画像・コンパクト時は小さな画像
                AsyncImage(url: item.imageURL) { image in
                    image
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                } placeholder: {
                    Rectangle().fill(.quaternary)
                }
                .frame(height: deviceState == .expandedFold ? 300 : 200)
                .clipped()
                .cornerRadius(12)
 
                Text(item.title)
                    .font(deviceState == .expandedFold ? .title : .headline)
                    .fontWeight(.bold)
 
                Text(item.description)
                    .font(.body)
                    .foregroundStyle(.secondary)
            }
            .padding(deviceState == .expandedFold ? 24 : 16)
        }
        .navigationTitle(item.title)
        .navigationBarTitleDisplayMode(deviceState == .expandedFold ? .large : .inline)
    }
}
 
// ダミーデータ
struct ContentItem: Identifiable, Hashable {
    let id = UUID()
    let title: String
    let description: String
    let imageURL: URL?
 
    static let sampleData: [ContentItem] = [
        ContentItem(title: "サンプル記事 1", description: "説明テキスト", imageURL: nil),
        ContentItem(title: "サンプル記事 2", description: "説明テキスト", imageURL: nil),
    ]
}
 
struct ContentRowView: View {
    let item: ContentItem
 
    var body: some View {
        HStack(spacing: 12) {
            RoundedRectangle(cornerRadius: 8)
                .fill(.quaternary)
                .frame(width: 48, height: 48)
 
            VStack(alignment: .leading, spacing: 4) {
                Text(item.title)
                    .font(.headline)
                Text(item.description)
                    .font(.caption)
                    .foregroundStyle(.secondary)
                    .lineLimit(2)
            }
        }
    }
}
 
struct EmptyStateView: View {
    var body: some View {
        ContentUnavailableView(
            "アイテムを選択してください",
            systemImage: "doc.text",
            description: Text("左のリストからコンテンツを選んでください")
        )
    }
}

// マルチウィンドウ対応の App エントリポイント
 
@main
struct FoldableReadyApp: App {
    var body: some Scene {
        // メインウィンドウ
        WindowGroup {
            AdaptiveMainView()
        }
 
        // 展開時に開ける詳細ウィンドウ（iPad / フォルダブル展開時）
        WindowGroup("詳細ビュー", id: "detail-view", for: ContentItem.ID.self) { $itemId in
            if let id = itemId, let item = ContentItem.sampleData.first(where: { $0.id == id }) {
                ContentDetailView(item: item)
                    .frame(minWidth: 400, minHeight: 500)
            }
        }
    }
}