Swift：シンプル！APIKitで画像投稿してみよう！｜プログラミング初心者のプロへの道

どうも、ささおです！

今回はAPIKitで画像投稿してみようと思います！

取り回しが効くようにとにかくシンプルに書くので、カメラ機能だったり、アルバム機能と簡単に組み合わせられると思います。

一応続きものになっているので、僕が今まで書いたAPIKit関連の記事を見ていただければと思います。

APIKitの始め方を書いた記事

1,APIKitの超簡単な使用方法

2,APIKitとHimotokiの基本のき！

3,RailsのWebアプリとSwiftのiOSアプリを連携させてみた

4,Webアプリ(API)へPOSTしてみる！

Contents

1 Railsでの画像アップロード機能を作成する
2 iOS側に画像投稿機能を作成

Railsでの画像アップロード機能を作成する

今回は画像アップロード機能ライブラリは『Shrine』を使用して作成します。

他の有名なアップロード機能ライブラリと言えば『ImageMagick』などがありますね！

注：iOS側は画像アップロードライブラリがどちらでも変わらないので安心してください！

Shrineのインストール

gemfile内に

gem "shrine", github: 'janko-m/shrine'

1	gem "shrine", github: 'janko-m/shrine'

を記述して、

$ bundle install

1	$ bundle install

をしてください。

shrine.rbを作成する

shrineに関する初期設定を書いていきます。

app/config/initializers/下にshrine.rbを作成してください。

require "shrine"
require "shrine/storage/file_system"

# アップロードするディレクトリの指定
Shrine.storages = {
  cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/cache"),
  store: Shrine::Storage::FileSystem.new("public", prefix: "uploads/store"),
}

# プラグイン
Shrine.plugin :activerecord

require "shrine"

require "shrine/storage/file_system"

# アップロードするディレクトリの指定

Shrine.storages = {

cache: Shrine::Storage::FileSystem.new("public", prefix: "uploads/cache"),

store: Shrine::Storage::FileSystem.new("public", prefix: "uploads/store"),

}

# プラグイン

Shrine.plugin :activerecord

image_dataカラムの追加

前回まで作成していたNoteテーブルに画像を保存するカラムを作成します。

画像が入るカラムなので、imageという名前で作成したいです。

しかし、ここで注意が必要です。

shrineを使用して画像を保存する場合、カラム名には「_data」をつけてあげなければいけません。

なので今回は「image_data」カラムを追加します！

こちらをターミナルで打ってください。

$ rails g migration add_image_data_to_notes image_data:text

1	$ rails g migration add_image_data_to_notes image_data:text

$ rails db:migrate

1	$ rails db:migrate

uploaderを作成

app/下にuploadersディレクトリを作成してください。

そして、app/uploaders/下にnote_image_uploader.rbを作成してください。

class NoteImageUploader < Shrine
end

1 2	class NoteImageUploader < Shrine end

Shrineを継承させることが大事です！

modelを編集

app/models/Note.rbを編集していきます。

このように編集してください。

include NoteImageUploader[:image]

を追加しました。

NoteモデルとUploaderががっちゃんこしました！

class Note < ApplicationRecord
  include NoteImageUploader[:image]
end

class Note < ApplicationRecord

include NoteImageUploader[:image]

end

ストロングパラメータ

次はapp/controllers/notes_controller.rbを少しだけ編集します。

note_paramsにimageを追加することでストロングパラメータに対応しました。

注意が必要なのが、ここでは「image_data」ではなく「image」にすることです。

def note_params
      params.require(:note).permit(:content, :image)
end

def note_params

params.require(:note).permit(:content, :image)

end

あとはformなどをいじればいい感じに画像投稿機能を実装できますが、画像投稿機能を実装するのはiOS側なので、今回は省きます。

iOS側に画像投稿機能を作成

まずはアップロードしたい画像を用意して、プロジェクトに入れておいてください。

基本的な流れ

１、Web側にデータを送るためにUIImageをDataに変換する。

その時に使用するのが、

 UIImagePNGRepresentation(引数にUIImageを入れる)

1	UIImagePNGRepresentation(引数にUIImageを入れる)

これによって、PNGの拡張子がついた画像データを作成することができる。

２、Session.send()の引数にDataを入れる。

３、bodyParametersに入れてWeb側に送る

こんな感じになっています！

CreateViewController.swift

前回のコードを編集するとこのようになります。

import UIKit
import APIKit

class CreateViewController: UIViewController {

    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var titleTextField: UITextField!
    @IBOutlet weak var contentTextField: UITextField!

    // 画像データが入る
    var imageData: Data?
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // aaa.pngは画像の名前です。
        imageView.image = UIImage(named: "aaa.png")
        imageData = UIImagePNGRepresentation(imageView.image!)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    @IBAction func actionCreate(_ sender: Any) {
        Session.send(CreateNoteRequest(title: titleTextField.text, content: contentTextField.text, imageData: imageData!)) { result in
            switch result {
            case .success( _):
                print("作成完了！")
            case .failure(let err):
                print(err)
            }
        }
    }
}

import UIKit

import APIKit

class CreateViewController: UIViewController {

@IBOutlet weak var imageView: UIImageView!

@IBOutlet weak var titleTextField: UITextField!

@IBOutlet weak var contentTextField: UITextField!

// 画像データが入る

var imageData: Data?

override func viewDidLoad() {

super.viewDidLoad()

// aaa.pngは画像の名前です。

imageView.image = UIImage(named: "aaa.png")

imageData = UIImagePNGRepresentation(imageView.image!)

}

override func didReceiveMemoryWarning() {

super.didReceiveMemoryWarning()

}

@IBAction func actionCreate(_ sender: Any) {

Session.send(CreateNoteRequest(title: titleTextField.text, content: contentTextField.text, imageData: imageData!)) { result in

switch result {

case .success( _):

print("作成完了！")

case .failure(let err):

print(err)

}

まずStoryboardにimageViewを配置して、IBOutlet接続をしました。（ここは省きます）

次にviewDidLoadないで配置したimageViewに、先ほど用意した画像を表示するように設定します。

その画像をUIImagePNGRepresentation()でpng形式の画像データに変換して、定義してある変数imageDataに格納します。

そのimageDataをSession.sendの引数に入れています。

Request.swift

struct CreateNoteRequest: WebRequest {
    
    var path: String {
        return "/notes"
    }
    typealias Response = Note
    
    var method: HTTPMethod {
        return .post
    }
    
    var title: String?
    var content: String?
    var imageData: Data?
    
    var bodyParameters: BodyParameters? {
        let titlePart = MultipartFormDataBodyParameters.Part(data: (title?.data(using: .utf8))!, name: "note[title]")
        let contentPart = MultipartFormDataBodyParameters.Part(data: (content?.data(using: .utf8))!, name: "note[content]")
        let imagePart = MultipartFormDataBodyParameters.Part(
            data: imageData!,
            name: "note[image]",
            mimeType: "image/png",
            fileName: "image.png")
        return MultipartFormDataBodyParameters(parts: [titlePart, contentPart, imagePart])
    }
    
    
    func response(from object: Any, urlResponse: HTTPURLResponse) throws -> CreateNoteRequest.Response {
        return try decodeValue(object)
    }
}