App InventorからiPhoneアプリを作るには？：2025年9月24日現在

//
//  ContentView.swift
//
//  DoodlePlus (SwiftUI port)
//  - MIT App Inventor 2 版の「Canvas + 色選択 + 太さ選択 + 消しゴム + 全消去」をSwiftUIで再現
//  - 初心者向けに、できるだけ丁寧にコメントしています。
//  - App Inventor のコンポーネント/ブロック対応をコード中に明記。
//  - 透明消去(アルファ抜き)ではなく「白で上書きする」方式の消しゴムで、AI2の挙動に近づけています。
//    （※本格的な透明消去をしたい場合は Core Graphics のブレンドモード destinationOut などの応用が必要）
//

import SwiftUI

// MARK: - モデル定義（AI2で言うところの「変数」や「状態」）
//
// App Inventor 対応：
// - PaintColor（Canvasの描画色）→ selectedColor
// - LineWidth   （線の太さ）    → selectedWidth
// - 消しゴムモード               → isEraser
// - 描いた線の履歴               → strokes（各ストロークは points の配列）
//

/// 線1本（ストローク）を表すモデル
struct Stroke: Identifiable {
    let id = UUID()
    var points: [CGPoint]     // 線を構成する点列（指でなぞった座標）
    var color: Color          // 線の色（消しゴムなら Color.white）
    var lineWidth: CGFloat    // 線の太さ
}

/// アプリ全体の状態
final class DrawingState: ObservableObject {
    // 現在の選択色（AI2: Canvas.PaintColor）
    @Published var selectedColor: Color = .black
    // 現在の線の太さ（AI2: Canvas.LineWidth）
    @Published var selectedWidth: CGFloat = 6
    // 消しゴムモード（AI2: 「消しゴムボタン選択」プロシージャで true/false を切替）
    @Published var isEraser: Bool = false

    // これまでに描いた全ストローク（AI2: DrawLine を積み重ねるイメージ）
    @Published var strokes: [Stroke] = []
    // ドラッグ中の「現在のストローク」（指を離したら strokes に確定追加）
    @Published var currentStroke: Stroke? = nil

    // 画面全消去（AI2: Canvas.Clear）
    func clear() {
        strokes.removeAll()
        currentStroke = nil
    }
}

// MARK: - SwiftUI 版 Canvas（AI2: Canvas コンポーネントに相当）
//
// - SwiftUI の Canvas/Path を使って、strokes と currentStroke を描画します。
// - App Inventor の Canvas.DrawLine(block) 相当の処理は、points を連結して Path にしています。
//
struct DrawingCanvas: View {
    @ObservedObject var state: DrawingState

    var body: some View {
        GeometryReader { geo in
            ZStack {
                // 背景は白（AI2: Canvas の BackgroundColor に相当）
                Color.white
                    .ignoresSafeArea()

                // これまでに描いたストロークを全部描画
                ForEach(state.strokes) { stroke in
                    Path { path in
                        guard let first = stroke.points.first else { return }
                        path.move(to: first)
                        for p in stroke.points.dropFirst() {
                            path.addLine(to: p)
                        }
                    }
                    .stroke(stroke.color, lineWidth: stroke.lineWidth)
                }

                // ドラッグ中のストロークもプレビュー表示
                if let stroke = state.currentStroke {
                    Path { path in
                        guard let first = stroke.points.first else { return }
                        path.move(to: first)
                        for p in stroke.points.dropFirst() {
                            path.addLine(to: p)
                        }
                    }
                    .stroke(stroke.color, lineWidth: stroke.lineWidth)
                }
            }
            // ジェスチャ：指でなぞる → 点を追加 → 指を離したら確定
            // App Inventor 対応：
            //   - Canvas.Dragged(prevX, prevY, currentX, currentY) で DrawLine しているのと同等
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { value in
                        // ドラッグが始まったら currentStroke を作成（色/太さは現在の選択）
                        if state.currentStroke == nil {
                            let color = state.isEraser ? Color.white : state.selectedColor
                            state.currentStroke = Stroke(points: [value.location], color: color, lineWidth: state.selectedWidth)
                        } else {
                            // すでに作成済みなら座標を追加
                            state.currentStroke?.points.append(value.location)
                        }
                    }
                    .onEnded { value in
                        // 指を離したら確定（strokes に追加）し、currentStroke をクリア
                        if var stroke = state.currentStroke {
                            stroke.points.append(value.location)
                            state.strokes.append(stroke)
                        }
                        state.currentStroke = nil
                    }
            )
        }
    }
}

// MARK: - メインビュー（AI2: Screen1 に相当）
//
// 画面構成（要件/UI要件に基づく）
//  - 上部：描画用 Canvas
//  - 下部：3つの水平行（HStack）
//      1行目：色選択（黒/青/緑/赤）→ PaintColor 切替
//      2行目：太さ選択（細/中/太）→ LineWidth 切替
//      3行目：消しゴムトグル / 画面消去 → isEraser 切替 / Canvas.Clear
//
struct ContentView: View {
    @StateObject private var state = DrawingState()

    // 太さの候補（AI2: 「細/中/太」）
    private let widthOptions: [(label: String, value: CGFloat)] = [
        ("細", 4),
        ("中", 8),
        ("太", 14)
    ]

    // 色の候補（AI2: 「黒/青/緑/赤」）
    private let colorOptions: [(label: String, value: Color)] = [
        ("黒", .black),
        ("青", .blue),
        ("緑", .green),
        ("赤", .red)
    ]

    var body: some View {
        VStack(spacing: 0) {
            // 1) Canvas 領域（要件: 画面の大部分）
            DrawingCanvas(state: state)
                .overlay(alignment: .topLeading) {
                    // シンプルなタイトル（AI2: Screen1.Title）
                    Text("DoodlePlus")
                        .font(.headline)
                        .padding(8)
                        .background(.ultraThinMaterial)
                        .cornerRadius(8)
                        .padding(8)
                        .accessibilityHidden(true)
                }

            Divider()

            // 2) 下部パネル：3段構成
            VStack(spacing: 8) {
                // --- 行1: 色選択（AI2: 色ボタン群 + 「色ボタン選択/リセット」プロシージャに対応）---
                controlRow(title: "色", content: {
                    HStack {
                        ForEach(colorOptions, id: \.label) { opt in
                            Button {
                                // 色選択：PaintColor を更新、かつ消しゴムモードは OFF
                                state.selectedColor = opt.value
                                state.isEraser = false
                            } label: {
                                HStack(spacing: 6) {
                                    Circle()
                                        .fill(opt.value)
                                        .frame(width: 18, height: 18)
                                    Text(opt.label)
                                    // 選択中マーク（AI2: チェック記号の代替として表示）
                                    if !state.isEraser && state.selectedColor.description == opt.value.description {
                                        Image(systemName: "checkmark")
                                    }
                                }
                                .padding(.horizontal, 10)
                                .padding(.vertical, 8)
                                .background(
                                    // 選択中は控えめに強調
                                    (!state.isEraser && state.selectedColor.description == opt.value.description) ?
                                        Color.secondary.opacity(0.15) : Color.clear
                                )
                                .cornerRadius(10)
                            }
                            .accessibilityLabel(Text("色 \(opt.label)"))
                        }
                    }
                })

                // --- 行2: 太さ選択（AI2: 太さボタン群 + 「太さボタン選択/リセット」プロシージャに対応）---
                controlRow(title: "太さ", content: {
                    HStack {
                        ForEach(widthOptions, id: \.label) { opt in
                            Button {
                                state.selectedWidth = opt.value
                            } label: {
                                HStack(spacing: 8) {
                                    // 太さプレビュー
                                    Capsule()
                                        .frame(width: 28, height: max(4, opt.value / 1.6))
                                    Text(opt.label)
                                    if state.selectedWidth == opt.value {
                                        Image(systemName: "checkmark")
                                    }
                                }
                                .padding(.horizontal, 10)
                                .padding(.vertical, 8)
                                .background(
                                    (state.selectedWidth == opt.value) ?
                                        Color.secondary.opacity(0.15) : Color.clear
                                )
                                .cornerRadius(10)
                            }
                            .accessibilityLabel(Text("太さ \(opt.label)"))
                        }
                    }
                })

                // --- 行3: ユーティリティ（AI2: 消しゴム / 画面消去ボタン）---
                controlRow(title: "操作", content: {
                    HStack {
                        // 消しゴム（AI2: 消しゴムボタン選択 → isEraser = true、UI強調）
                        Button {
                            state.isEraser.toggle()
                        } label: {
                            Label("消しゴム", systemImage: state.isEraser ? "eraser.fill" : "eraser")
                                .padding(.horizontal, 12)
                                .padding(.vertical, 10)
                                .background(state.isEraser ? Color.secondary.opacity(0.2) : Color.clear)
                                .cornerRadius(10)
                        }
                        .accessibilityLabel(Text("消しゴム"))
                        .accessibilityHint(Text("オンにすると白い線で上書きして消せます"))

                        Spacer(minLength: 12)

                        // 画面消去（AI2: Canvas.Clear）
                        Button(role: .destructive) {
                            state.clear()
                        } label: {
                            Label("画面消去", systemImage: "trash")
                                .padding(.horizontal, 12)
                                .padding(.vertical, 10)
                                .background(Color.red.opacity(0.12))
                                .cornerRadius(10)
                        }
                        .accessibilityLabel(Text("画面消去"))
                        .accessibilityHint(Text("キャンバスをすべてクリアします"))
                    }
                })
            }
            .padding(12)
            .background(.ultraThinMaterial)
        }
        .preferredColorScheme(.light) // 背景白に合わせた見え方重視（任意）
    }

    // 下部各行のラッパー（タイトル＋内容）
    private func controlRow<Content: View>(title: String, @ViewBuilder content: () -> Content) -> some View {
        VStack(alignment: .leading, spacing: 6) {
            Text(title)
                .font(.subheadline).bold()
                .accessibilityHidden(true)
            content()
        }
    }
}

// MARK: - プレビュー
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .previewDevice("iPhone 15")
    }
}