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でお絵かきアプリを作成することができます。さらに機能を追加することで、より高度なお絵かきアプリを開発することができます。
プロンプト
画面上で指を動かしても、線が描けないんだけど
返答
すみません、こちらの不足がありました。下記のコードを修正したものです。
DrawingPath
とDrawingView
を追加し、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デモビデオを見てください。