ニフクラ mobile backend（NCMB）では各種言語向けにSDKを提供しています。その中で最も新しいSwift SDKについて、その使い方を紹介します。

この記事では複数回に分けて、掲示板アプリを作ってみます。Swift SDKの使い方はもちろん、NCMBの基本的な利用法を学ぶのに役立ててください。前回は画面の説明と匿名認証の実装を行いましたので、今回はスレッドの作成と一覧表示を作成していきます。

なお、今回のコードはNCMBMania/Swift_Forum_Demo: Swift SDKで作る掲示板アプリのデモコードですにアップしてあります。

スレッド一覧画面について

前回も紹介しましたが、再度スレッド一覧画面 ThreadListView を紹介します。この画面で、プラスアイコンをタップすると AddThreadView が表示されます。

struct ThreadListView: View {
    @State var threads: [NCMBObject] = []
    @State private var showModal = false
    @State private var showAlert = false
    
    var body: some View {
        NavigationView {
            ZStack(alignment: .bottomTrailing) {
                List {
                    ForEach(self.threads, id: \.objectId) { thread in
                        NavigationLink(
                            destination: ThreadView(thread: thread)
                        ) {
                            ThreadListRow(thread: thread)
                        }
                    }
                    .onDelete(perform: delete)
                }
                .navigationBarTitle("掲示板", displayMode: .inline)
                .navigationBarItems(trailing:
                                        Button(action: {
                                            showModal.toggle()
                                        }, label: {
                                            Image(systemName: "plus")
                                                .resizable()
                                                .padding(6)
                                                .frame(width: 24, height: 24)
                                                .foregroundColor(.blue)
                                        })
                )
            }
        }
        .onAppear {
            getThread()
        }
        .sheet(isPresented: $showModal, content: {
            AddThreadView()
        })
        .onChange(of: showModal, perform: { value in
            if (!showModal) {
                getThread()
            }
        })
        .alert(isPresented: $showAlert, content: {
            Alert(title: Text("削除に失敗しました。権限がないようです。"))
        })
    }
}

AddThreadView の内容は次のようになっています。スレッドのタイトル、説明、そして画像を追加できるようになっています。情報を入力してスレッド追加ボタンをタップすると add 関数が呼ばれます。

struct AddThreadView: View {
    @Environment(\.presentationMode) private var presentationMode
    @State private var title = ""
    @State private var description = ""
    @State var showingPicker = false
    @State var image: UIImage?
    var body: some View {
        VStack {
            NavigationView {
                Form {
                    TextField("スレッドのタイトルを入力してください", text: $title)
                    TextField("スレッドの紹介文を入力してください", text: $description)
                    Button(action: {
                        showingPicker.toggle()
                    }) {
                        Text("画像追加")
                    }
                    if let image = image {
                        Image(uiImage: image)
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                    }
                    Button(action: {
                        add()
                    }) {
                        Text("スレッド追加")
                    }
                }
            }
        }
        .sheet(isPresented: $showingPicker) {
            ImagePickerView(image: $image, sourceType: .library)
        }
    }
}

add関数について

add関数の内容です。詳細はコメントを参考にしてください。

func add() {
    // スレッドクラスのNCMBObjectを作成
    let thread = NCMBObject(className: "Thread")
    // スレッドのタイトルと説明をセット
    thread["title"] = title
    thread["description"] = description
    // ACL（アクセス権限）を作成
    let user = NCMBUser.currentUser // ログインユーザの取得
    var acl = NCMBACL.empty
    // 誰でも読み込み可能、削除不可
    acl.put(key: "*", readable: true, writable: false)
    // 作成したユーザは読み書き可能
    acl.put(key: user!.objectId!, readable: true, writable: true)
    // ACLをセット
    thread.acl = acl
    // 画像が指定されている場合
    if let image = image {
        // ファイル名はUUIDでユニークなもの
        let uuid = UUID()
        // ファイル名
        let fileName = "\(uuid).jpg"
        // ファイルストアのオブジェクトを作成
        let photo = NCMBFile(fileName: fileName, acl: acl)
        // JPEGとしてデータを保存
        _ = photo.save(data: image.jpegData(compressionQuality: 80.0)!)
        // 保存したファイル名をNCMBObjectにセット
        thread["fileName"] = fileName
    }
    // 保存
    let results = thread.save()
    // 処理が成功したらモーダルを閉じる
    if case .success(_) = results {
        presentationMode.wrappedValue.dismiss()
    } else {
        print("Error")
    }
}

スレッド一覧の取得

スレッド一覧の取得は ThreadListView の getThread 関数になります。こちらも実装はコメントを参照してください。

func getThread() {
    // スレッドクラスのNCMBQueryを準備
    let query = NCMBQuery.getQuery(className: "Thread")
    // 取得
    let results = query.find()
    switch results {
    case let .success(ary): // 取得成功した場合
        threads = ary // スレッドに適用
    case .failure(_): break
    }
}

これでスレッドを登録し、一覧表示まで行われるようになります。

スレッドの削除

スレッドはリストを左にスワイプすると、削除できるようになります。この時呼ばれるのは ThreadListView の delete メソッドです。

func delete(at offsets: IndexSet) {
    // 処理対象のスレッドを取得
    let thread = self.threads[Array(offsets)[0]] as NCMBObject
    // 削除処理実行
    let results = thread.delete()
    // 処理結果の判定
    switch results {
    case .success(_): // 処理がうまくいったらスレッドを取り直し
        getThread()
    case .failure(_): // 処理が失敗したらアラートを出す
        showAlert = true
    }
}

処理が失敗した場合には alert を使ってアラート表示していています。自分に削除権限がない場合（自分が立てたスレッドでない場合）、削除は失敗します。

.alert(isPresented: $showAlert, content: {
    Alert(title: Text("削除に失敗しました。権限がないようです。"))
})

まとめ

今回は掲示板アプリのスレッド追加と一覧表示、削除について実装を行いました。次回はスレッドの詳細表示とコメントの追加、表示、削除を実装します。