iPhone版 お絵かきアプリ

OpenAIのGPT-4を使ってApp Inventor 2日本語版のチュートリアルにあるアプリと同じように動くiPhoneアプリを作ります。iPhoneアプリを作るにはMacで動くXcodeという開発環境が必要です。ここではmacOS 13.2.1上でXcode 14.3を使い、動作確認にはiOSシミュレータ(iOS 16.4)を使いました。

GPT-4とのやり取り

プロンプト

App Inventorアプリのお絵かきアプリって知ってる?

返答

はい、App Inventorのお絵かきアプリについては知っています。App Inventorは、GoogleとMITが共同開発した、ビジュアルなプログラミング環境です。これを使って、Androidアプリを作成することができます。お絵かきアプリは、App Inventorで開発された一般的なアプリケーションの例です。

お絵かきアプリは、ユーザーが画面上で指を使って線を描くことができるシンプルなアプリです。App Inventorのコンポーネントを使用して、キャンバス、ペイント機能、消しゴム、色選択、線の太さなどの機能を実装することができます。

このようなアプリは、初心者向けのプログラミング学習に適しており、App Inventorでアプリ開発を始める人によく使われる例題です。基本的な操作だけでなく、応用的な機能も実装できますので、プログラミングの練習にもなります。

プロンプト

XcodeとSwiftUIを使って同じように動くiPhoneアプリ作って

返答

XcodeとSwiftUIを使って、お絵かきアプリを作成する方法を説明します。まず、Xcodeを開いて新しいプロジェクトを作成し、SwiftUIを選択してください。

以下は、お絵かきアプリに必要なコードの基本構造です。これをプロジェクト内のContentView.swiftにコピーしてください。


import SwiftUI

struct ContentView: View {
    @State private var path = Path()
    
    var body: some View {
        VStack {
            DrawingView(path: $path)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.white)
                .border(Color.black)
        }
    }
}

struct DrawingView: UIViewRepresentable {
    @Binding var path: Path
    
    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }
    
    func makeUIView(context: Context) -> UIView {
        let view = UIView()
        view.isMultipleTouchEnabled = false
        view.isUserInteractionEnabled = true
        
        let panRecognizer = UIPanGestureRecognizer(target: context.coordinator, action: #selector(Coordinator.handlePan(_:)))
        view.addGestureRecognizer(panRecognizer)
        
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
    }
    
    class Coordinator: NSObject {
        var drawingView: DrawingView
        
        init(_ drawingView: DrawingView) {
            self.drawingView = drawingView
        }
        
        @objc func handlePan(_ recognizer: UIPanGestureRecognizer) {
            let point = recognizer.location(in: recognizer.view)
            
            switch recognizer.state {
            case .began:
                drawingView.path.move(to: point)
            case .changed:
                drawingView.path.addLine(to: point)
            default:
                break
            }
            
            recognizer.view?.setNeedsDisplay()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

このコードは、基本的なお絵かき機能を実装しています。画面上で指を動かすことで、線を描くことができます。ただし、色や線の太さを変更する機能はまだ実装されていません。そのため、コードを拡張して、色の選択や線の太さの調整などの機能を追加することができます。

このサンプルコードを使用して、Xcodeでお絵かきアプリを作成することができます。さらに機能を追加することで、より高度なお絵かきアプリを開発することができます。

プロンプト

画面上で指を動かしても、線が描けないんだけど

返答

すみません、こちらの不足がありました。下記のコードを修正したものです。DrawingPathDrawingViewを追加し、Canvasコンポーネントで描画するように変更しました。この修正を加えることで、画面上で指を動かして線が描けるようになります。


import SwiftUI

struct ContentView: View {
    @State private var drawing = Drawing()
    
    var body: some View {
        VStack {
            DrawingView(drawing: $drawing)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .background(Color.white)
                .border(Color.black)
        }
    }
}

struct DrawingPath {
    var path = Path()
    let color: Color
    let lineWidth: CGFloat
}

struct Drawing {
    private(set) var paths: [DrawingPath] = []
    
    mutating func addPath(_ path: DrawingPath) {
        paths.append(path)
    }
}

struct DrawingView: View {
    @Binding var drawing: Drawing
    @State private var currentPath: DrawingPath?
    
    var body: some View {
        GeometryReader { geometry in
            Canvas { context, size in
                for drawingPath in drawing.paths {
                    context.stroke(drawingPath.path, with: .color(drawingPath.color), lineWidth: drawingPath.lineWidth)
                }
            }
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { value in
                        if currentPath == nil {
                            currentPath = DrawingPath(color: .black, lineWidth: 5)
                        }
                        currentPath?.path.addLine(to: value.location)
                    }
                    .onEnded { value in
                        if let currentPath = currentPath {
                            drawing.addPath(currentPath)
                            self.currentPath = nil
                        }
                    }
            )
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

この修正を加えたコードを、プロジェクト内のContentView.swiftにコピーし、再度実行してみてください。画面上で指を動かすと線が描けるはずです。

XcodeでiPhoneアプリを作る

プロジェクトの作成

Xcodeを起動してDoodleという名前のiOS Appプロジェクトを作ります。InterfaceはSwiftUIでLanguageはSwiftにします。

swiftコードの貼り付け

GPT-4が作ってくれたswiftのコードをContentView.swiftに貼り付けます。

実行

実行結果はこの通り。下の画像をクリックしてYouTubeデモビデオを見てください。

 

 

iPhoneアプリ