NCMBのSwift SDKを使ってデモアプリを作ってみます。今回は業務系でよくあるニーズの日報アプリを作ってみます。実際にはデータストアやファイルストアを使うので、応用すれば汎用的に使えるはずです。
前回は画面の説明とSDKの導入まで行いましたので、今回は日報データの保存処理を作成します。
コードについて
今回のコードはNCMBMania/swift_daily_reportにアップロードしてあります。実装時の参考にしてください。
InputViewについて
日報の入力と保存はInputViewにて行います。画面は日報の日付、内容、そして写真選択といったフォームを表示しているのみです。
import SwiftUI
import NCMB
struct InputView: View {
@State private var date = Date() // 日報の日付
@State private var text = "" // 日報の本文
@State private var showAlert = false // アラート表示用のフラグ
@State private var message = "" // アラートのメッセージ
@State var imageData : Data = .init(capacity:0) // // 選択された写真データ
@State var source:UIImagePickerController.SourceType = .photoLibrary // カメラまたはフォトライブラリ
@State var isImagePicker = false // 写真ピッカーを表示する際のフラグ
var body: some View {
NavigationView {
VStack(spacing: 10) {
// 画像モーダルへの遷移用
NavigationLink(
destination: Imagepicker(
show: $isImagePicker,
image: $imageData,
sourceType: source
),
isActive:$isImagePicker,
label: {
Text("")
})
// 日報の日付を選択
DatePicker("日付",
selection: $date,
displayedComponents: .date
)
// 日報の内容を記述するTextEditor
TextEditor(text: $text)
.frame(width: UIScreen.main.bounds.width * 0.8, height: 200)
.overlay(
RoundedRectangle(cornerRadius: 5)
.stroke(Color.blue, lineWidth: 2)
)
// 画像が指定されれば、サムネイル表示
if imageData.count != 0 {
Image(uiImage: UIImage(data: self.imageData)!)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(height: 100)
.cornerRadius(15)
.padding()
}
// 写真選択モーダルの表示
Button(action: {
self.source = .photoLibrary
self.isImagePicker.toggle()
}, label: {
Text("写真を選択")
})
}
.navigationBarTitle("日報入力", displayMode: .inline)
.toolbar {
// 右上のアイコンで保存しょりを実行
ToolbarItem(placement: .navigationBarTrailing){
Button(action: {
save()
}) {
Image(systemName: "icloud.and.arrow.up")
}
}
}
}
.alert(isPresented: $showAlert) {
Alert(title: Text(self.message))
}
}
// 日報を保存する処理
func save() {
}
}
保存処理について
データの保存は save 関数にて行います。ここからはsave関数の内容について解説します。まずNCMBObject（DBでいう行相当）を準備します。クラス名というのは、DBでいうテーブル名相当です。
// DailyReportクラス（DBでいうテーブル相当）のインスタンス（DBでいう行相当）を準備
let obj = NCMBObject(className: "DailyReport")
この obj にキーを指定して、text（日報の本文）とdate（日報の日付）を指定します。これはDBでいうカラム相当になります。
// 指定されている値をセット
obj["text"] = self.text
obj["date"] = self.date
次に画像が指定されているかどうかを判定します。画像が指定されている場合には、そのデータをファイルストアに保存します。ファイル名はUUIDを使ってユニークなものにしています。
saveメソッドは同期的にファイル保存を行います。非同期処理が良い場合には saveInBackground も用意しています。必要に応じて使い分けてください。写真の保存処理がうまくいったら、そのファイル名をobjのfileNameキーに紐付けます。
// 画像があるか判断
if self.imageData.count > 0 {
// 画像があれば、ファイルストアへ保存する
// ファイル名はUUIDで生成
let fileName = "\(UUID()).jpg"
// ファイルストアのインスタンスを準備
let file = NCMBFile(fileName: fileName)
// 保存（ファイルストアへのアップロード）
_ = file.save(data: self.imageData)
// ファイル名をDailyReportクラスのインスタンスに紐付ける
obj["fileName"] = fileName
}
そしてobjも保存します。
// データを保存（データストアにアップロード）
let result = obj.save()
こちらは処理判定を行っています。resultが .success（処理成功）か .failure（処理失敗）によって処理内容を変えています。最終的にアラートを出して処理完了です。
// 結果を判定
switch result {
case .success(): // 保存がうまくいったら、入力内容をリセット
self.text = ""
self.imageData.count = 0
self.date = Date()
// メッセージを設定
self.message = "保存しました"
break
case let .failure(err): // エラーの場合はエラーメッセージをセット
self.message = err.localizedDescription
break
}
// アラートを表示
self.showAlert = true
ここまでで日報データの保存処理が完成となります。
まとめ
今回は日報アプリにおける日報データの保存処理を解説しました。次は日報データの検索と一覧表示周りを解説します。