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

概要

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

ニフティクラウドmobile backendって何？？

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

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

動作環境

• Mac OS X 10.12(Sierra)
• Xcode ver. 8.0
• Simulator ver. 10.0
• iPhone7

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

手順

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

• 上記リンクから会員登録（無料）をします。登録ができたらログインをすると下図のように「アプリの新規作成」画面が出るのでアプリを作成します

• アプリ作成されると下図のような画面になります
• この２種類のAPIキー（アプリケーションキーとクライアントキー）はXcodeで作成するiOSアプリにニフティクラウドmobile backendを紐付けるために使用します

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

• 下記リンクをクリックしてプロジェクトをMacにダウンロードします
• SwiftImageViewApp

※この中にはプロジェクトと別に、「setting」フォルダが入っています。この中にある画像を後ほどアップロードして使用します。

3. Xcodeでアプリを起動

• ダウンロードしたフォルダを開き、「SwiftImageViewApp.xcodeproj」をダブルクリックしてXcode開きます

• 「SwiftImageViewApp.xcodeproj」（青い方）ではないので注意してください！

4. APIキーの設定

• AppDelegate.swiftを編集します
• 先程ニフティクラウドmobile backendのダッシュボード上で確認したAPIキーを貼り付けます

• それぞれYOUR_NCMB_APPLICATION_KEYとYOUR_NCMB_CLIENT_KEYの部分を書き換えます
• このとき、ダブルクォーテーション（"）を消さないように注意してください！
• 書き換え終わったらcommand + sキーで保存をします

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

• ニフティクラウドmobile backendのダッシュボードで、「ファイルストア」を開きます
• 「↑アップロード」をクリックします

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

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

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

6. 動作確認と解説

• Xcode画面の左上、適当なSimulatorを選択します
• iPhone7の場合は以下のようになります
• 実行ボタン（さんかくの再生マーク）をクリックします
• アプリが起動します

• 画面右下の「Download」ボタンをタップします
• 先ほどアップロードした画像が表示されます

画像が表示されない場合

• ネットワークを確認してください
• 画面左下にエラーコードが出ている場合はこちらから確認できます

解説

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

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

• ニフティクラウドmobile backend のドキュメント（クイックスタート）をSwift版に書き換えたドキュメントをご用意していますので、ご活用ください
• SwiftでmBaaSを始めよう！(＜CocoaPods＞でuse_framewoks!を有効にした方法)

ロジック

• Main.storyboardでデザインを作成し、ViewController.swiftにロジックを書いています

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

import UIKit
import NCMB

class ViewController: UIViewController {
    // imageView
    @IBOutlet weak var imageView: UIImageView!
    // label
    @IBOutlet weak var label: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        // labelの初期化
        label.text = ""

    }

    // 「Download」ボタン押下時の処理
    @IBAction func download(_ sender: UIBarButtonItem) {
        // 取得する画像ファイル名を設定
        let imageFile = NCMBFile.file(withName: "mBaaS_image.png", data: nil) as! NCMBFile
        // 画像ファイルを取得
        imageFile.getDataInBackground({ (data, error) in
            if error != nil {
                // 取得失敗時の処理
                let err = error as! NSError
                print("画像ファイルの取得に失敗しました：\(err.code)")
                self.label.text = "NG エラーコード：\(err.code)"
            } else {
                // 取得成功時の処理
                print("画像ファイルの取得に成功しました")
                self.label.text = "OK"
                // 画像を表示する処理
                self.imageView.image = UIImage(data: data!)

            }

        }) { (num) in
                self.label.text = "\(num)%"
        }
    }
}

参考

• 同じ内容の【Objective-C】版もご用意しています
• https://github.com/NIFTYCloud-mbaas/ObjcImageViewApp