SwiftからS3に画像をアップロードする方法

Swiftで画像をアップロードする方法は分かるけど、S3にアップする方法が分からない!あるいはS3にアップする方法は分かるけど、アップするファイルの作成方法が分からない!という方に

会員アプリでユーザー画像をアップロードする機能を作成してみたので、その時にやったことをご紹介します。

今回の手順

  1. SwfitのUIImagePickerControllerで画像をアップする

2. UIImagePickerControllerで画像を取得、PNGに変換

3. AWSのライブラリーをXcodeプロジェクトにインストール

4. AWSのS3でバケットを作成

5. Amazon CognitoでIDプールの設定

6. SwiftからS3に画像をアップロード!

※なるべく分かりやすくするために、エラー時の対応などは省略してます。

SwfitのUIImagePickerControllerを使って画像をアップする

まずは任意のボタンをタップすると下のようなポップアップを表示、写真ライブラリーから好きな画像をアップできるような仕組みを作ります。

Image for post
Image for post

既に画像アップ機能を実装したいViewControllerはあると思うので、このViewControllerを拡張して作成します。

選択した画像のトリミングを可能にしています。

@objc func uploadImage()を任意のUIButtonのaddTargetに設定してあげてください。

UIImagePickerControllerで画像を取得、PNGに変換

UIImagePickerControllerには画像を選択した後に呼ばれるメソッドがあるので、そちらを使って選択後の処理を設定していきます。

先ほど拡張したViewControllerにコードを追加します。

ここまで実装したら一度シュミレーターでちゃんと動くか確認してみてください。

AWSのライブラリーをXcodeプロジェクトにインストール

cocoapodsでS3とやりとりするために必要なライブラリーをインストールします。

Podfileに以下を追加して、pod Installしてください。

pod 'AWSCognito'
pod 'AWSS3'

一旦Xcode上での作業は終わり、AWSに移ります。

AWSのS3でバケットを作成

AWSのS3に行き、アップロード先にしたいバケットを作成します。

作成したバケットのアクセス権限は変更なしで、非公開のままにしておいてください。

Amazon CognitoでIDプールの設定

SwiftからAmazon S3へファイルをアップロードするためにIDプールを作成します。

新しいID プールの作成画面までの行き方

AWS > Cognito > IDプールの管理 > 新しい ID プールの作成

最初のページでは以下の2つの作業をして「ID プールの作成」をクリックします。

  • IDプール名 :に任意の名前を入力
  • 認証されていないIDのアクセスを有効にする

次のページでは詳細を表示して2つのポリシードキュメント(※認証されたロールと認証されていないロール)の編集からS3のPutObject(必要であればGetObjectも)の許可を追加します。

{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"s3:PutObject", ←ここを追加
"s3:GetObject", ←もしS3に保存した画像をアプリで取得したければ追加
"mobileanalytics:PutEvents",
"cognito-sync:*",
"cognito-identity:*"
],
"Resource": [
"*"
]
}
]
}

最後にプールの作成をクリックすると、赤枠に認証情報プロバイダーを初期化のコードが表示されます。

Image for post
Image for post

プロバイダーをSwiftにして、赤枠のコードをコピーします。(AWS SDKのインストールとAWS認証情報の取得のステップ1はスキップしてください。)

XocdeのAppDelegate.swiftを開き、下の作業をします。

  • AWSCognitoをインポート
  • コピーしたコードをのdidFinishLaunchingWithOptionsの中に貼り付け

これでアプリからS3にアクセスできるようになりました。

SwiftからS3に画像をアップロード!

UIImagePickerControllerを設定したViewControllerのextensionに画像をアップロードする関数を追加します。

extension ViewControllerの全体コード↓

以上でアプリからAWSのS3に画像をアップする方法になります。

もし参考になれば、拍手👏お願いします🙇‍♀️

https://twitter.com/yukimonkey3

アプリ作ったことないのに社長の思いつきで開発することになったエンジニア

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store