NCMBでは公式SDKとしてSwift/Objective-C/Kotlin/Java/Unity/JavaScript SDKを用意しています。また、それ以外にもコミュニティSDKとして、非公式ながらFlutter/React Native/Google Apps Script/C#/Ruby/Python/PHPなど幅広い言語向けにSDKが開発されています。

今回は公式SDKの一つ、Kotlin SDKを使ってカメラメモアプリを作ってみます。前回はデータを保存する処理について解説しましたので、今回はその保存したデータの表示について解説します。

完成版のコード

作成したデモアプリのコードはNCMBMania/Kotlin_Camera_Memo: Kotlin SDKを使ったカメラメモアプリですにアップロードしてあります。

一覧画面について

データを表示するのは一覧画面（ListScreen）になります。まず画面だけ紹介します。

@Composable
fun ListScreen(ary: List<NCMBObject> = listOf<NCMBObject>()) {
    // Memoクラスの検索結果が入る変数
    var ary = remember { mutableStateOf<List<NCMBObject>>(emptyList()) }
		// リストを読み込む部分(後述）

    LazyColumn(
    ) {
        // 一覧を出力
        items(ary.value) { obj ->
            ListRow(obj)
        }
    }
}

リストを読み込む

NCMBからデータを取り出す際にはNCMBQueryを使います。1つ目の引数は対象とするクラス名です。条件は色々付与できますが、今回は特に指定していません。findInBackground で非同期処理にてデータを取得します。

// Memoクラスを検索するクエリー
val query = NCMBQuery.forObject("Memo")
query.findInBackground(NCMBCallback { e, results ->
		if (e == null) {
				// 結果をaryに適用
				ary.value = results as List<NCMBObject>
		}
})

検索結果は remember で定義している ary に渡しています。その結果、LazyColumn を使って描画処理が行われます。実際の描画はListRowにて行います。

ListRow Componentについて

ListRowは一覧画面の1行分のデータを表示する画面です。NCMBObjectを受け取りますので、そこにあるメモ（テキスト）と、ファイル名を使ってファイルダウンロードを行います。

@Composable
fun ListRow(obj: NCMBObject) {
    // サムネイル表示する画像
    var bitmap = remember { mutableStateOf<Bitmap?>(null) }
		// ファイルをダウンロードする処理（後述）
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .background(Color.White, RoundedCornerShape(5.dp))
    ) {
        // 画像データの有無で表示出し分け
        if (bitmap.value != null) {
            // 画像が指定されている場合
            Image(
                bitmap = bitmap.value!!.asImageBitmap(),
                contentDescription = null,
                modifier = Modifier
                    .size(150.dp)
                    .padding(10.dp)
            )
        } else {
            // 画像がない場合はアイコンを表示
            Icon(Icons.Rounded.Image, "説明", Modifier.size(size = 150.dp))
        }
        // メモを表示
        Text(obj.getString("text")!!)
    }
}

ファイルダウンロード処理について

ファイルダウンロードは、NCMBFileのfetchInBackgroundを使います。そしてデータはfileDownloadByteに入っていますので、それをBitmapに変換します。

// ファイル名からNCMBFileのオブジェクトを作成
val file = NCMBFile(obj.getString("fileName")!!)
// ファイルダウンロード
file.fetchInBackground(NCMBCallback { e, data ->
		if (e == null && file.fileDownloadByte != null) {
				// ダウンロードした内容をbitmapに変換
				val data = file.fileDownloadByte!!
				bitmap.value = BitmapFactory.decodeByteArray(data, 0, data.size)
		}
})

これでダウンロード処理が完了です。画像をダウンロードしたら、一覧でサムネイル表示されます。

まとめ

これでカメラメモアプリの完成です。データストアへのメモデータ保存とファイルストアへのファイルアップロード、そしてダウンロードを実装しました。NCMBには他にも位置情報検索やプッシュ通知など様々な機能があります。ぜひあなたのアプリ開発に活かしてください。

mBaaSでサーバー開発不要！ | ニフクラ mobile backend