[1]カメラで撮影した写真を表示する！！

Last updated at 2025-05-31Posted at 2025-05-26

※知り合い向けに書いた記事を公開しています。後から文体など修正予定です🙏

この記事では、カメラで撮った画像をChatGPTのAPIに投げて返答をもらう簡単なアプリを作っていくよ！まずはPart1！この記事ではカメラで撮影した写真を表示する機能を説明していくよ！📸📸

目次：
Part1. カメラで撮影した写真を表示する ←ここ！
Part2. OpenAI APIのセットアップ
 Part3. 画像をOpenAIのAPIに送信する

カメラ機能の実装早速していくよーーーーー💨💨

Storyboardで画面の見た目部分を作っていこう！

左の画面（初期画面）に撮影Button、右の画面に撮影した写真を表示する用のUIImageViewを配置しよう！

NavigationControllerを設定しよう！

NavigationControllerとは？
... 画面遷移の管理をしてくれるコントローラー！複数画面を持つアプリではほぼほぼ必須のアイテムだよ！

ここをクリックして、

上のメニューバーから「Editor」を選択 -> 「Embed in」を選択 -> 「Navigation Controller」を選択

こうなったらOK！

1つ目の画面と2つ目の画面を繋ごう！

1つ目の画面の一番左をクリックした状態から、「controll」キーを押しながら2つ目の画面にドラッグ&ドロップしよう！

Segue（画面遷移を表す部品）の種類はShowを選択しよう！

作ったSegueをタップして名前をつけよう！Identifierに「showPhotosViewController」と入れよう！

1つ目の画面のコードを書こう！

ViewControllerのファイルを開いてコードを書こう！

ViewController.swift

import UIKit

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    // カメラを使うためのコントローラー
    let imagePicker = UIImagePickerController()
    
    // 撮った写真を入れておく場所（あとで次の画面にわたす）
    var capturedImage: UIImage?

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // カメラの設定：どこから写真をとるか（今回はカメラ）
        imagePicker.delegate = self
        imagePicker.sourceType = .camera
    }

    // 「写真を撮る」ボタンが押されたときに呼ばれる
    @IBAction func takePhoto(_ sender: UIButton) {
        // カメラが使えるかどうかをチェック
        if UIImagePickerController.isSourceTypeAvailable(.camera) {
            // カメラ画面を表示する
            present(imagePicker, animated: true)
        } else {
            // カメラが使えないときのメッセージ
            print("カメラが使えません")
        }
    }

    // 写真を撮ったあとに呼ばれる
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        // 撮った画像を取り出す
        if let image = info[.originalImage] as? UIImage {
            capturedImage = image  // 撮った写真を保存しておく
        }
        
        // カメラ画面を閉じる → 次の画面へ移動
        picker.dismiss(animated: true) {
            self.performSegue(withIdentifier: "showPhotosViewController", sender: nil)
        }
    }

    // 写真を撮るのをやめたときに呼ばれる
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        // カメラ画面を閉じるだけ
        picker.dismiss(animated: true)
    }

    // 次の画面（写真を表示する画面）へ行く前に呼ばれる
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // 次に行く画面が PhotosViewController のとき
        if segue.identifier == "showPhotosViewController",
           let destVC = segue.destination as? PhotosViewController {
            // 撮った写真を次の画面にわたす
            destVC.takenImage = capturedImage
        }
    }
}

2つ目の画面のコードを書こう！

コードを書く前に、まずは2つ目の画面のコードを書くファイルを作っていくよ！
アプリ名の書いてあるフォルダを二本指クリック -> 「New File from Template...」をクリック！

Cocoa Touch Classをクリック！

ファイル名をPhotosViewControllerにして、「Next」をクリックして「Create」をクリック！

ファイルを作ることができたらコードを書いていこう！

PhotosViewController.swift

import UIKit

class PhotosViewController: UIViewController {

    // Storyboardでつないだ画像を表示する場所（ImageView）
    @IBOutlet weak var imageView: UIImageView!
    
    // 前の画面から受け取る写真（UIImage型）
    var takenImage: UIImage?

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 画面が表示されるときに、受け取った写真を表示する
        imageView.image = takenImage
    }
}