iPhone本体からアプリに画像を読み込む

ここしばらく、Swiftを使い始めたばかりの初心者でも簡単に作れるシンプルな機能のコードを紹介してきました。今回はiPhoneのカメラロールから取り込んだ画像を、自分のアプリの中に表示させます。UIImagePickerControlleという機能を使います。

デザイン画面を設定する

ViewControllerにimageViewとボタンを下のように配置します。ボタンのタイトルや部品の背景色は、適当に自分で設定しましょう。

オブジェクト（部品）の配置とボタン内のテキスト変更方法については下のnoteに詳しく書いています。

部品の背景色を指定する時は下の図を参考に。

（１）imageViewの背景色を指定する

（２）ボタンの背景色を指定する

デザイン画面とViewControllerを接続する

次に、それぞれの部品をViewControllerと接続していきます。接続の仕方は

（１）接続したい部品をカーソルで選択する

（２）キーボード左側の真ん中にある「control」キーを押しながら部品をViewControllerにドラッグ＆ドロップ（imageViewは「class〜」の下、ボタンは「override func〜」の下あたり）

（３）VierControllerに青いガイドラインが出たら手を離す。出てきたフキダシの「name」に部品の名前を入力する

となります。imageViewの名前は「imageView」、ボタンの名前は「toAlbumBtn」にしましょう。接続については下のnoteでよりていねいに書いています。

デリゲートを追加する

アルバムを呼び出す機能を使うには、「UIImagePickerController」という機能を使います。最初のclassの所に2つのデリゲートを追加しましょう。

import UIKit
class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

ここで記述するデリゲートは、ざっくり言うと「何かの機能を他に任せるためのルート設定」だと思ってください。

アルバムを呼び出すファンクション（処理機能）を追加する

次に、アルバムを開くための機能を追加していきます。ボタンのアクションより下の方に、次のコードを追加してください。

// 画像が選択された時に呼ばれる
   func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any])  {
       if let selectedImage = info[.originalImage] as? UIImage {
           imageView.image = selectedImage  //imageViewにカメラロールから選んだ画像を表示する
       }
       self.dismiss(animated: true)  //画像をImageViewに表示したらアルバムを閉じる
   }
   
   // 画像選択がキャンセルされた時に呼ばれる
   func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
       self.dismiss(animated: true, completion: nil)
   }

これでアルバムを使うための機能ができました。

ボタンのアクションを追加する

最後にボタンを押した時にアルバムが開くコードを追加します。下のように書いていきましょう。

@IBAction func toAlbumBtn(_ sender: Any) {
       
       let picker = UIImagePickerController() //アルバムを開く処理を呼び出す
       picker.sourceType = .photoLibrary
       picker.delegate = self
       present(picker, animated: true)
       self.present(picker, animated: true, completion: nil)
   }

これでボタンを押すとアルバムが呼び出され、アルバム内の写真を選ぶとイメージビューに表示されます。

ViewController全体のコードは以下の通りです。

import UIKit
class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
   
   @IBOutlet weak var imageView: UIImageView!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       
   }
   
   @IBAction func toAlbumBtn(_ sender: Any) {
       let picker = UIImagePickerController() //アルバムを開く処理を呼び出す
       picker.sourceType = .photoLibrary
       picker.delegate = self
       present(picker, animated: true)
       self.present(picker, animated: true, completion: nil)
   }
   
   // 画像が選択された時に呼ばれる
   func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any])  {
       if let selectedImage = info[.originalImage] as? UIImage {
           imageView.image = selectedImage  //imageViewにカメラロールから選んだ画像を表示する
       }
       self.dismiss(animated: true)  //画像をImageViewに表示したらアルバムを閉じる
   }
   
   // 画像選択がキャンセルされた時に呼ばれる
   func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
       self.dismiss(animated: true, completion: nil)
   }
}

このコードはiOS11以降では正常に動きますが、それより以前のバージョンだとアルバムの使用権限がないと判定されて呼び出せません。また、実際にアプリをAppStoreに公開するときもアクセス許可を取る処理が必要になります。

その場合はinfo.plistを編集して、アルバムへのアクセス許可の確認画面を出すと使えるようになります。やり方は下の通りです。

思ったように動いたでしょうか。

Xcodeのアップデートでカメラロールを呼び出すコードの書き方がかなり変わったので、参考になれば幸いです。

Step App School – つくる、うごく、だから楽しい。