【Swift】ImagePickerでカメラロールから写真を選択して表示する

# まえがき
Xcode12.4のSwiftを使ったiOSアプリ開発にて、以前のXcodeと異なることが多かったので記載

# カメラロールを表示するためのボタンを設定する
- 右上の+ボタンをクリックし、オブジェクトの一覧を表示する
- Navigation BarとBar Button Itemを選択し、Storyboardに追加する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/0ac4474c-0dca-a13f-2984-663bf755924c.png" width=70%>

追加後のStoryboard
![ 2021-02-03 17.31.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/b65a31f8-92f2-3881-4ff6-d391de05efbc.png)

Storyboard上でナビゲーションバーのタイトルとボタンの名前を設定する

- Navigation ItemのTitle： 画像表示
![ 2021-02-03 17.42.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/7c9b7216-025c-d80c-539e-f8a6289001ea.png)
- Bar ItemのTitle: 追加
![ 2021-02-03 17.45.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/962be0c5-cd44-5af0-c72e-c66c6577bf01.png)

次にボタンのアクション接続を設定する

- ViewControllerを開く
- controlキーを押したままStoryboardのBar Button ItemをViewControllerの`viewDidLoad`メソッドの下に追加する（Name: buttonClickに設定）

![ 2021-02-03 17.51.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/8cb99b69-78b7-80e3-b7f4-5b740457f56f.png)

- クラスに UIImagePickerControllerDelegateとUINavigationControllerDelegateを追加する

~~~swift
class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
~~~

- ボタンをクリックした時の動きを設定する
- 以下、ViewControllerの`buttonClick`メソッド

~~~swift
// ボタンをクリックした時
    @IBAction func buttonClick(_ sender: Any) {
        // カメラロール表示
        let imagePickerController = UIImagePickerController()
        imagePickerController.sourceType = .photoLibrary
        imagePickerController.delegate = self
        imagePickerController.mediaTypes = ["public.image"]
        present(imagePickerController,animated: true,completion: nil)
    }
~~~
- 上記で追加した`imagePickerController`を設定する
- `imagePickerController`でカメラロールから受け取った画像を背景に設定する
- 以下、ViewControllerの`imagePickerController`メソッド

~~~swift
// カメラロール表示
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
   
        let widthSize = UIScreen.main.bounds.size.width // 画面の横の大きさを取得
        let heightSize = UIScreen.main.bounds.size.height // 画面の縦の大きさを取得
        let imageViewBackground = UIImageView(frame: CGRect(x: 0, y: 0, width: widthSize, height: heightSize)) // 背景画像の大きさを設定
        imageViewBackground.image = (info[.originalImage] as! UIImage) // カメラロールから受け取った画像を設定
        self.view.addSubview(imageViewBackground) // 背景画像を追加する
        
        picker.dismiss(animated: true)
    }
~~~

実行後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/3cbd57fa-e514-2322-c58c-5a2837d0ca60.png" width=50%>
ボタンをクリック後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/01298b9a-4292-0bde-29c4-7aaf05eadaf9.png" width=50%>
写真を選択後
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1065074/9672dd73-2cb9-e7fe-1042-c2d6e3efa27a.png" width=50%>

####PHPickerを使用してカメラロール表示前に権限確認する
PHPickerを使用するため書き方が変わるためこちらに記載
[PHPickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/8afaa7925401bcfdaf27)

今回はここまで ! 
***
#### 関連記事
[1. SwiftでStoryboardを扱う](https://qiita.com/kanae_/items/8331f18b93286a0bcc02)
[2.StoryboardにUIパーツを設置する](https://qiita.com/kanae_/items/e4c74ab1de7ccc9125bb)
[3.画面遷移を行う](https://qiita.com/kanae_/items/a0637df2932ce63a1e67)
[4.画面上に画像を表示する方法](https://qiita.com/kanae_/items/9df6076a6ab94949439b)
5.ImagePickerでカメラロールから写真を選択して表示する（本記事）
[6.PHPickerでカメラロールから写真を選択して表示する](https://qiita.com/kanae_/items/8afaa7925401bcfdaf27)