rails

Swift:シンプル!APIKitで画像投稿してみよう!


どうも、ささおです!

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

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

 

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

 

APIKitの始め方を書いた記事

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

2,APIKitとHimotokiの基本のき!

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

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

 

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

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

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

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

 

Shrineのインストール

gemfile内に

を記述して、

をしてください。

 

shrine.rbを作成する

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

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

 

image_dataカラムの追加

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

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

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

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

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

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

 

uploaderを作成

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

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

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

 

modelを編集

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

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

include NoteImageUploader[:image]

を追加しました。

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

 

ストロングパラメータ

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

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

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

 

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

 

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

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

 

基本的な流れ

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

その時に使用するのが、

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

 

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

 

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

 

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

 

CreateViewController.swift

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

 

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

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

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

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

 

 

Request.swift

 

Request.swift内で変更した箇所はimageData関係です。

title, content. と同じように imageDataも変数として定義して、Session.sendからimageDataを初期化できるようにしました。

 

あとは、bodyParametersですね。

例によって、MultipartFormDataBodyParameters.PartでbodyParametersで使用できるようにしました。

他のtitleやcontentと違うところは、mimeTypeとfileNameですね。

mimeType

mimeTypeは送るファイルの形式です。

送るデータはpng形式なので、image/pngとしました。

fileName

これはそのまんまファイルの名前ですね。

適当でも問題なくアップロードできます。

 

 

 

これで画像投稿機能の作成完了です!

以外に大したことしないんですが(ライブラリが色々やってくれてる)、調べてもなかなか答えが出なかったのでメモしてみました!

 


コメントを残す

*