【Android】mBaaSにアップロードした画像をアプリに表示しよう！ for Kolin

概要

ニフクラ mobile backend(通称mBaaS)の『ファイルストア機能』を利用して、アップロードした画像をアプリ側で表示するサンプルプロジェクトです
簡単な操作ですぐにニフクラ mobile backend の機能を体験いただけます

ニフクラ mobile backendって何？？

スマートフォンアプリのバックエンド機能（プッシュ通知・データストア・会員管理・ファイルストア・SNS連携・位置情報検索・スクリプト）が開発不要、しかも基本無料(注1)で使えるクラウドサービスです。

注1：詳しくはこちらをご覧ください

動作環境

Android Studio ver. 3.1
Android OS ver. 6.0
Android SDK v3
- SDK v2系だと動作しないので注意

※上記内容で動作確認をしています。

手順

1. ニフクラ mobile backend の会員登録・ログインとアプリの新規作成

下記リンクから会員登録（無料）をします
- https://console.mbaas.nifcloud.com/signup
登録ができたら下記リンクからログインします
- https://console.mbaas.nifcloud.com/
下図のように「アプリの新規作成」画面が出るのでアプリを作成します
- 既に mobile backend を利用したことがある方は左上の「＋新しいアプリ」をクリックすると同じ画面が表示されます

アプリ作成されるとAPIキー（アプリケーションキーとクライアントキー）が発行されます
この２種類のAPIキーはこの後ダウンロードするサンプルアプリとニフクラ mobile backend を紐付けるため、あとで使います。

2. サンプルプロジェクトのダウンロード

下記リンクをクリックしてプロジェクトをダウンロードします
https://github.com/NiFCloud-mbaas/KotlinImageViewApp/archive/master.zip
ダウンロードしたプロジェクトを解凍します
- の中にはプロジェクトと別に、「setting」フォルダが入っています。この中にある画像を後ほどアップロードして使用します
AndroidStudio を開きます、「Open an existing Android Studio projct」をクリックして解凍したプロジェクトを選択します

選択したプロジェクトが開かれます

3. SDKの導入（実装済み）

※このサンプルアプリには既にSDKが実装済み（下記手順）となっています。（ver.3.0.0)
最新版をご利用の場合は入れ替えてご利用ください。

SDKダウンロード SDKはここ（SDK リリースページ）から取得してください.
- NCMB.jarファイルがダウンロードします。
SDKをインポート
- app/libsフォルダにNCMB.jarをコピーします
設定追加
- app/build.gradleファイルに以下を追加します

dependencies {
    compile 'com.google.code.gson:gson:2.3.1'
    compile files('libs/NCMB.jar')
}

androidManifestの設定
- タグの直前に以下のpermissionを追加します

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

4. APIキーの設定

AndroidStudio で MainActivity.kt を開きます
- ディレクトリはデフォルトで「Android」が選択されていますので、「Project」に切り替えてから探してください

APIキー（アプリケーションキーとクライアントキー）の設定をします

それぞれ YOUR_APPLICATION_KEY と YOUR_CLIENT_KEY の部分を書き換えます
このとき、ダブルクォーテーション（"）を消さないように注意してください
書き換え終わったら保存してください
Windowsの場合、Ctrl + Sで保存できます。
Macの場合、command + Sで保存できます。

5. 画像ファイルのアップロード

ニフクラ mobile backend の管理画面で、「ファイルストア」を開きます
「↑アップロード」をクリックします

画像を選択します
ここでアップロードする画像はダウンロードしたプロジェクトにある「setting」フォルダ内の「mBaaS_image.png」ファイルです。

選択したら「アップロードする」をクリックします

画像がアップロードされました

6. 動作確認

エミュレーターでアプリをビルドします
失敗する場合は一度「Clean Project」を実行してから再度ビルドしてください
アプリを起動したら、真ん中の「SHOW」ボタンをクリックします

先ほどニフクラ mobile backend にアップロードした画像がダウンロードされアプリに表示されます

画像が表示されない場合

ネットワークを確認してください
エラー時はアラートでエラーコードを表示しています
エラーコードが表示されている場合はこちらを確認してください

解説

ここではサンプルアプリに実装済みの内容について紹介します

SDKのインポートと初期設定

ニフクラ mobile backend のドキュメント（クイックスタート）をご用意していますので、ご活用ください
Androidのクイックスタート

ロジック

activity_main.xmlでデザインを作成し、MainActivity.ktにロジックを書いています

アップロードした画像ファイルのダウンロード

//**************** APIキーの設定 **************
NCMB.initialize(this, "YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");

setContentView(R.layout.activity_main)

_btnShow = findViewById<View>(R.id.btnShow) as Button
_iv = findViewById<View>(R.id.imgShow) as ImageView
_btnShow.setOnClickListener {
    // 画像ダウンロードする
    val file = NCMBFile("mBaaS_image.png")
    file.fetchInBackground { dataFetch, er ->
        if (er != null) {
            //失敗処理
            AlertDialog.Builder(this@MainActivity)
                    .setTitle("Notification from NIFCloud")
                    .setMessage("Error:" + er.message)
                    .setPositiveButton("OK", null)
                    .show()
        } else {
            //成功処理
            val bMap = BitmapFactory.decodeByteArray(dataFetch, 0, dataFetch.size)
            _iv.setImageBitmap(bMap)
        }
    }
}

vfa-tamhh/KotlinImageViewApp