タイトルの通り、一日でアプリのアイディア思いつきから申請までしたので、その流れを記録しておきます。
ちなみに作成したアプリはこちらです。
アイディア発案
外食中にこういうアプリあったらなーと思いAppStoreで検索してみたところ、似たようなアプリが見つからなかったため、じゃあ自分で作るかとなりました。
コンセプトはなるべくシンプル（デザイン、機能含め）にすることにしました。
必要な機能
必要な機能としては
- 入力した内容を記録しておく
- 記録した物を一覧表示する
- 一覧から詳細画面を表示する
今回はCoreDataを使用してデータの保存、読み取り、編集、削除（所謂CRUD）を実装しました。
UIに関してはSwiftUIを使用しました。
画面の実装
画面の構成は
- ホーム画面（データを一覧する）
- 詳細画面（ホーム画面から遷移）
- データ入力画面
の3つの画面です．
ホーム画面
ホーム画面ではListを使ってCoreDataから取得したデータを表示するようにしました．
ForEachですべてのデータの文字列をNavigationLinkとして表示してList内の文字をタップすると詳細画面に遷移するようにしました．
またToolbarItemで右上に”＋”を表示してそこからデータ入力画面をfullscreenCoverで表示するようにしました．
こんな感じです．
var body: some View {
NavigationView {
List {
ForEach(items) { item in
NavigationLink(destination: detailView().environmentObject(item), label: {
Text(item.Name ?? "")
})
}
.onDelete(perform: deleteItems)
}//List
.listStyle(.plain)
.toolbar {
ToolbarItem {
Button(action: {
self.isSheet = true
}, label: {
Image(systemName: "plus")
})
}
}
.fullScreenCover(isPresented: $isSheet, onDismiss: {
self.isSheet = false
},content: {
inputView(isSheet: $isSheet)
})
}//NavigationView
} //body詳細画面
詳細画面はCoreDataに保存されてるデータを表示するだけの画面です。
FormとSectionの組み合わせでこんな感じにしました。
var body: some View {
NavigationView(content: {
Form {
Section(header: Text("ヘッダー")) {
Text(item.Name ?? "")
}
Section(header: Text("ヘッダー")) {
HStack {
Image(beforeImage).resizable().scaledToFit()
Image(systemName: "arrow.right")
Image(afterImage).resizable().scaledToFit()
}
}
Section(header: Text("コメント")) {
Text(item.comment ?? "").lineLimit(10)
}
}
.toolbar(content: {
ToolbarItem(placement: .navigationBarTrailing, content: {
Button(action: {
self.isEdit = true
}, label: {
Image(systemName: "rectangle.and.pencil.and.ellipsis")
})
})
})
.fullScreenCover(isPresented: $isEdit, onDismiss: {
self.presentation.wrappedValue.dismiss()
}, content: {
editView(isEdit: $isEdit)
})
})
}また詳細画面からそのデータを編集するEditViewを表示できるようにもしてます。
データ入力画面
データ入力画面は文字の入力にTextField，数値の入力にStepperを使用しました。
Stepperは下記のようにvalueに数値，inに範囲を指定することでこんな見た目のプラスマイナスボタンを作成できました。
Stepper(value: $value, in: 0 ... 10) {
Text("valueの値：\(value)")
}
CoreDataのCRUD
CoreDataの使い方についてはこちらのサイトを参考にしました．
Entityのうちの数値（整数）に関するAttributeにはInteger16、Integer32、Integer64の3種類がありましたが、使える数値の範囲が違うので、今回はInteger32にしました。
CoreDataから取得したデータはホーム画面と詳細画面でそれぞれ表示したかったので、appnameApp.swiftファイルをこんな感じにして，@EnvironmentObjectを使ってどのViewからでもデータを利用できるようにしました。
@main
struct appnameApp: App {
let persistenceController = PersistenceController.shared
var body: some Scene {
WindowGroup {
ContentView()
.environment(\.managedObjectContext, persistenceController.container.viewContext)
}
}
}アプリの方はひとまず完成としてアイコンとStore用のスクリーンショット作成です。
アイコン作成
アイコンはiPadのVectornatorというアプリを使用しています．サイズを1024×1024pxに指定してそれっぽいアイコンを作成したらMakeAppIconというサイトでアプリ用の複数サイズのアイコンを作成しています．
アプリ版もあるようですが有料ですのでとりあえずは無料のWeb版を使用しています。
作成できたら出力されたファイルのAppIcon.appiconsetというフォルダをそのままxcodeのAseetsの中に放り込んで名前をAppIconに変更します。もともとあった空のAppIconは削除して構いません。
これでアイコンは完成です。
Store用スクリーンショット作成
Store用のスクリーンショットはCanvaを使ってます．
2023.01現在、Store用スクリーンショットには1242×2208pxと1284×2778pxの2サイズ（iOSのみ）が必要なので作成します。
Simulatorで画面のスクリーンショットを撮ってそれをiPhoneのフレームと重ね合わせてます。この作業はiPadのProcreateでやってます。
できたiPhoneの画像とそれっぽい文字をCanvaで作成して完了。
後はAppStoreConnectから申請して完了でした。この辺の申請についてはいつか別の記事にしようと思います。
申請まで終えての感想
かなり規模の小さいアプリだったので1日で完成させることができました。まだ検索機能とかUIの構成とかを改善したいので定期的にアップデートしたいと思います。
よければ冒頭のリンクからダウンロードして使用してみてください。
コメント