NCMBのSwift SDKを使ってデモアプリを作ってみます。今回は業務系でよくあるニーズの日報アプリを作ってみます。実際にはデータストアやファイルストアを使うので、応用すれば汎用的に使えるはずです。
今回は画面の説明とSDKの導入までを進めます。
コードについて
今回のコードはNCMBMania/swift_daily_reportにアップロードしてあります。実装時の参考にしてください。
利用技術について
今回は次のような組み合わせになっています。
- Swift 5.5
- Xcode 13.0
- NCMB Swift SDK 1.2.1
仕様について
今回はシンプルにするために認証は利用していません。入力された日報データをデータストアに保存しますが、写真が追加されている場合にはファイルストアにも保存します。また、レポート画面では日付を使ってデータストアの検索を行い、一致するデータの一覧表示を行います。
利用する機能について
チャットアプリで利用するNCMBの機能は次の通りです。
- データストア
- 日報データの保存
- 日報データの検索
- ファイルストア
- 写真のアップロード
- 写真のダウンロード
画面について
今回はSwiftUIを以下の5つのViewに分けています。
ContentView.swift
タブを2つ表示します。1つ目は入力画面（InputView）、2つ目はレポート画面（ReportView）です。
struct ContentView: View {
var body: some View {
TabView {
InputView()
.tabItem {
VStack {
Image(systemName: "pencil")
Text("入力")
}
}.tag(1)
ReportView()
.tabItem {
VStack {
Image(systemName: "list.bullet")
Text("レポート")
}
}.tag(2)
}
}
}
InputView.swift
日報の入力画面です。本文と日付が基本で、任意で写真を追加できます。ナビゲーションバーに保存ボタンを追加して、押すとデータをデータストアに保存します。
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() {
}
}
ReportView.swift
日報データを検索、結果を一覧表示する画面です。最初は日付だけを表示します。
struct ReportView: View {
@State private var date = Date() // 検索対象の日付
@State private var ary: [NCMBObject]? = nil // 検索結果のNCMBObject（配列）
var body: some View {
NavigationView {
VStack(spacing: 10) {
if self.ary == nil {
VStack {
// 検索対象を指定（日報の日付）
DatePicker("日付を選択してください",
selection: $date,
displayedComponents: .date
)
// 検索実行
Button(action: {
search()
}, label: {
Text("日報を表示")
})
}
} else {
// 検索結果をリスト表示
List {
ForEach(self.ary!, id: \.objectId) { report in
ReportRowView(report: report)
}
}
}
}
.navigationBarTitle("日報検索", displayMode: .inline)
.toolbar {
// 日付データを消す（最初の状態に戻す）アイコン
ToolbarItem(placement: .navigationBarTrailing){
Button(action: {
self.ary = nil
}) {
Image(systemName: "xmark.circle")
}
.disabled(self.ary == nil)
}
}
}
}
// 指定された日付の日報データを検索する関数
func search() {
}
}
ReportRowView.swift
検索結果の一覧表示用、1行データ用のViewです。表示されたタイミングで画像データをファイルストアからダウンロード、表示します。
struct ReportRowView: View {
@State var report:NCMBObject // 表示する日報データ
@State var imageData : Data = .init(capacity:0) // 日報に紐付いた画像データ
var body: some View {
// タップした際にの遷移
NavigationLink(destination: DetailView(obj: report, imageData: $imageData)) {
HStack(alignment: .top) {
Spacer().frame(width: 10)
VStack(alignment: .leading) {
HStack(alignment: .top) {
VStack {
// 画像データの有無を確認
if self.imageData.count == 0 {
// ないときにはダミー画像
Image(systemName: "photo")
.resizable()
.frame(width: 60, height: 60)
.scaledToFit()
} else {
// 画像があれば表示
Image(uiImage: UIImage(data: self.imageData)!)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 60, height: 60)
}
}
VStack(alignment: .leading) {
// 日報本文の一部を表示
Text((self.report["text"] ?? "") as! String)
.lineLimit(3)
}
}
}
Spacer()
}
.onAppear {
// 画面が表示されたタイミングで画像を読み込む
loadImage()
}
}
}
// 画像を読み込む関数
func loadImage() {
}
}
DetailView.swift
一覧でタップされた日報の詳細表示を行うViewです。一覧から渡されたデータストアオブジェクト、画像を表示します。
// 日報の詳細表示用View
struct DetailView: View {
@State var obj: NCMBObject // 日報用データストアのオブジェクト
@Binding var imageData : Data // 日報に添付されていた画像データ
var body: some View {
VStack {
// 画像データがあれば表示
if self.imageData.count > 0 {
Image(uiImage: UIImage(data: self.imageData)!)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200, height: 200)
}
// 日報の本文
Text((obj["text"] ?? "") as! String)
}
// タイトルに日付を表示
.navigationBarTitle(dateTitle(), displayMode: .inline)
}
// タイトルに出す内容を作成する
func dateTitle() -> String {
// 日付フォーマットの作成
let dateFormatter = DateFormatter()
dateFormatter.locale = Locale(identifier: "ja_JP")
dateFormatter.dateFormat = "M月d日の日報"
// 日報データの日付を使ってタイトルを作成
return dateFormatter.string(from: (obj["date"] ?? Date()) as! Date)
}
}
Imagepicker
写真を撮影、またはフォトライブラリから写真を選択します。コードは【SwiftUI】カメラ機能の実装方法【撮影画像とライブラリー画像の利用】から拝借しています。
今回のプロジェクト
今回は言語がSwift、インタフェースがSwiftUI、ライフサイクルはSwiftUI Appとしています。
SDKのインストール
プロジェクトを開いて、Package Dependenciesの中にある + アイコンをクリックします。
パッケージ名が色々と出てくるので、左上のURL入力欄にて下記のURLを入力します。
https://github.com/NIFCLOUD-mbaas/ncmb_swift
そうすると ncmb_swift が出てくるので、右下にある Add Package ボタンを押します。
確認ダイアログはそのままで、Add Package ボタンを押します。
これでインストール完了です。
初期化
今回はSwiftUIを利用しています。ライフサイクルもSwiftUIです。
まずSDKをインポートします。
import SwiftUI
import NCMB
ContentViewをダミーのVStackでラップします。
VStack {
ContentView()
}
そのVStackのonAppear内で、NCMBの初期化を行います。
var body: some Scene {
WindowGroup {
VStack {
ContentView()
}.onAppear() {
// NCMBのアプリケーションキーとクライアントキーを設定
let applicationKey = "YOUR_APPLICATION_KEY"
let clientKey = "YOUR_CLIENT_KEY"
// 初期化
NCMB.initialize(applicationKey: applicationKey, clientKey: clientKey)
}
}
}
まとめ
今回は日報アプリの仕様と画面、NCMBの初期化までを解説しました。次は日報入力データの登録を解説します。