FJCT_ニフクラ mobile backend(mBaaS)お役立ちブログ

スマホアプリ開発にニフクラ mobile backend(mBaaS)。アプリ開発に役立つ情報をおとどけ!

Swiftでフォトライブラリの写真をアップロードする

f:id:mbaasdevrel:20180806093819p:plain

NCMBのiOS SDKは正式にはSwiftをサポートしておらず、サンプルのコードもObjective-Cとなっています。Swiftもすでに3が主流となっており、利用者も増えています。そこでNCMB iOS SDKをSwiftでどう使えば良いかをコード例を用いつつ紹介します。

今回はフォトライブラリから写真を選択してアップロードする流れです。

Xcodeプロジェクトを作る

まずはベースになるXcodeプロジェクトを作ります。これは言語としてSwiftを選択する以外、特別なことはしません。

ブリッジファイルを作る

Objective-Cで作られたフレームワークをSwiftで使えるようにするためにブリッジファイルを作成します。Xcodeで新規 Header File ファイルを作成します。名前は プロジェクト名-Bridging-Header.h が良いでしょう。

内容は以下のようになります。

//
//  HelloNCMB-Bridging-Header.h
//  HelloNCMB
//
//

#ifndef HelloNCMB_Bridging_Header_h
#define HelloNCMB_Bridging_Header_h

#import <NCMB/NCMB.h>

#endif /* HelloNCMB_Bridging_Header_h */

NCMBのSDKをインストールする

Carthage を使う方法もありますが、対応していないフレームワークもあるので CocoaPods を使います。

CocoaPodsをインストール

Rubygemsを使います。Rubyはすでにインストールされていることとします。

gem install cocoapods
pod setup
cd (Xcodeプロジェクトのディレクトリ)
pod init

プラグインをインストール

mBaaSでは認証キーを扱うので、それを直接ハードコーディングするのは好ましくありません。そこで cocoapods-keys を使います。

Gemfileを作成して、内容を次のようにします。

source 'https://rubygems.org'
gem 'cocoapods-keys'

そしてインストールします。

bundle install

Podfileを作る

Podfileを以下の内容で作成します。 (プロジェクト名) となっている部分はそれぞれ読み替えてください。

# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'

target '(プロジェクト名)' do
  # Comment the next line if you're not using Swift and don't want to use dynamic frameworks
  use_frameworks!

  # Pods for (プロジェクト名)
  pod 'NCMB', :git => 'https://github.com/NIFCloud-mbaas/ncmb_ios.git'
  
  target '(プロジェクト名)Tests' do
    inherit! :search_paths
    # Pods for testing
  end

  target '(プロジェクト名)UITests' do
    inherit! :search_paths
    # Pods for testing
  end

end

plugin 'cocoapods-keys', {
  :project => "(プロジェクト名)",
  :keys => [
    "applicationKey",
    "clientKey"
  ]}

SDKのインストール

pod install でSDKのインストールを行います。この時、 cocoapods-keys が対話的にキーを保存してくれます。

pod install

 CocoaPods-Keys has detected a keys mismatch for your setup.
 What is the key for applicationKey
 > e61...669

Saved applicationKey to HelloNCMB.
 What is the key for clientKey
 > 65c...247

Saved clientKey to HelloNCMB.
Analyzing dependencies
Fetching podspec for `Keys` from `Pods/CocoaPodsKeys`
Downloading dependencies
Using Keys (1.0.1)
Using NCMB (2.4.3)
Generating Pods project
Integrating client project
Sending stats

ブリッジヘッダーファイルを指定する

プロジェクト名-Bridging-Header.h を編集します。キーファイルを読み込みます。プロジェクト名はそれぞれ読み替えてください。Podプロジェクトの Development Pods/Keys 以下にあるファイルを読み込みます。

#ifndef (プロジェクト名)_Bridging_Header_h
#define (プロジェクト名)_Bridging_Header_h

#import <NCMB/NCMB.h>
#import "(プロジェクト名)Keys.h"
#endif

Build Settingsの Objective-C Bridging Header の項目で先ほど作ったブリッジヘッダーファイルを指定します。例えば ./HelloNCMB/HelloNCMB-Bridging-Header.h といった具合です。

コードを書く

キーを読み込む

AppDelegate.swift にてキーを読み込みます。 (プロジェクト名)Keys() という関数が定義されています。例えば以下のようになります。

let keys = HelloNCMBKeys()

これで keys.applicationKey といった形でアクセスできます。

NCMBを初期化する

まずNCMBを初期化します。これは AppDelegate.swift に実装します。

NCMB.setApplicationKey(keys.applicationKey, clientKey: keys.clientKey)

以下は ViewController.swift に実装します。

画面に部品を配置する

今回は選択した画像を表示する UIImageView 、ライブラリを開く UIButton 、アップロードを行う UIButton 、写真を消す UIButton を追加しました。

f:id:mbaasdevrel:20180913134257p:plain

ViewController にデリゲートを追加する

ViewController に UIImagePickerControllerDelegate と UINavigationControllerDelegate を追加します。

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

追加すべきメソッドは imagePickerController です。これは写真を選択した際に呼ばれます。

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
  // 選択した写真を取得
  let image = info[UIImagePickerControllerOriginalImage] as! UIImage
  // ImageViewに表示する
  self.imageView.image = image
  // 写真を選ぶビューを消す
  self.dismiss(animated: true)
}

初期表示する画像を指定する

UIImageViewをアウトレットで追加します。

@IBOutlet weak var imageView: UIImageView!

そして初期表示する画像を指定します。

override func viewDidLoad() {
  super.viewDidLoad()
  imageView.image = UIImage(named: "default.png")
  // Do any additional setup after loading the view, typically from a nib.
}

ライブラリを開く

ライブラリを開くボタンを押した時のアクションです。

@IBAction func btnSelect(_ sender: Any) {
  if UIImagePickerController.isSourceTypeAvailable(.photoLibrary) {
    // 写真を選ぶビュー
    let pickerView = UIImagePickerController()
    // ライブラリから選ぶ
    pickerView.sourceType = .photoLibrary
    pickerView.delegate = self
    // 表示
    self.present(pickerView, animated: true)
  }
}

リセットボタンを押した時のイベント

これは初期表示と同じです。

@IBAction func btnReset(_ sender: Any) {
  self.imageView.image = UIImage(named: "default.png")
}

写真をアップロードする処理

写真をアップロードするボタンを押した時の処理です。選択されている写真データを UIImageJPEGRepresentation を使ってNSDataに変換するのがポイントです。ファイル名はアップロード日時としています。

そして saveInBackground でアップロード処理を実行します。

@IBAction func btnUpload(_ sender: Any) {
  let photoData:Data = NSData(data: UIImageJPEGRepresentation(self.imageView.image!, 0.80)!) as Data
  // ファイル名の処理
  let formatter = DateFormatter()
  formatter.dateFormat = "MM-dd-HH-mm-ss"
  let fileName = formatter.string(from: Date()) + ".jpg"
  // データとファイル名でNCMBFileを作成
  let file = NCMBFile.file(withName: fileName, data: photoData) as! NCMBFile
  // 保存処理
  file.saveInBackground({ (error) in
    if error != nil {
      // 保存失敗時の処理
      print(error?)
    } else {
      // 保存成功時の処理
    }
  })
}

処理が適切に実装されていれば、写真がファイルストアにアップロードされるはずです。

f:id:mbaasdevrel:20180913134340p:plain

まとめ

写真をアップロードしたいというニーズはよくあるでしょう。NCMBを使えばコード量少なく実装が可能です。ぜひお試しください!

ファイルストア (iOS) : 基本的な使い方 | ニフクラ mobile backend

中津川 篤司

中津川 篤司

NCMBエヴァンジェリスト。プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。 2004年、まだ情報が少なかったオープンソースソフトの技術ブログ「MOONGIFT」を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶDXエージェンシー「DevRel」活動をスタート。