Zenn
Open6

2025.1 iOS 動画抽出アプリ開発

Taichi AsakuraTaichi Asakura

ロードマップ

土曜日から翌週金曜までの1週単位で目標を決める

  • 2025.1.11 (土) 〜
    • iOSアプリ開発に慣れる
    • iOS 動画抽出アプリの草案を作る
  • 2025.1.18 (土) 〜
Taichi AsakuraTaichi Asakura

2025.1.11 (土)

Swift の文法を確認

以下のページを見ながら，Swift の基本的な文法を大雑把に把握した．後は必要になった時にその都度見て書いて覚えることにする．
https://swift-ios.keicode.com/lang/

XCode をインストールして新規プロジェクトの作成

以下のページを基に新規プロジェクトを作成
https://swift-ios.keicode.com/ios/hello-world.php

しかし，最初にあるはずのStoryBoardのファイルがなかった．どうやら，(XCodeの初期設定が) SwiftUIという新しいUIフレームワークを使用する設定になっていたということがわかった．上記のサイトでは情報が古いので，SwiftUIを使用しないでUIを構築する方法が記載されているのだと思われる．

SwiftUIの基本的なコンポーネント
https://qiita.com/umashikate/items/105e17c5ff7cd761907d

Taichi AsakuraTaichi Asakura

2025.1.12 (日)

XCodeのiOSシミュレーターが重すぎて使い物にならない．今使っているMacBook ProだとiPhone (実機) でしかデバッグ出来ないと割り切った方が良さそう．

タスク

  • プロジェクト作り直してStoryBoardがある状態を作る => SwiftUIで作ることにする
  • 開発用のApple IDを別のメールアドレスで作る (Web上に普段使いと開発用のApple IDは分けた方が良いという情報があったので) => 別の電話番号がないためApple IDの作成が不可能だった

とりあえずの今週の目標

画面遷移までを実装してみる

参考: Swift 開発でのiOS UIの構築方法

iOS アプリの View 実装方法の関係 (SwiftUI、Storyboard、Xib、UIKit) #Swift - Qiita
https://qiita.com/os1ma/items/a8b946dba891f01ccc4e

Taichi AsakuraTaichi Asakura

2025.1.13 (月)

iOS 動画撮影・抽出アプリ 草案作成

メイン画面の実装

SwiftUIでアプリ起動時のメニュー画面を実装した．

Taichi AsakuraTaichi Asakura

2025.1.14 (火) カメラ機能 (仮) の実装

カメラで動画撮影をする機能 (仮) を実装しました．（今手元にiPhoneがないため，実際に正しく動作するかはまだわかりません．）

カメラ実装には，UIImagePickerController (OS標準のカメラUI) を使用する方法と，AVFoundationを使用する方法の2種類があるらしく，今回は前者を選択しました．

【SwiftUI】UIImagePickerControllerとPHPickerViewControllerを使ってカメラとフォトライブラリから動画を取得する | DevelopersIO
https://dev.classmethod.jp/articles/swiftui-image-picker-phpicker/

  • CameraView アプリのカメラ機能としてのView
  • CameraMoviePickerView 上記ページを参考にしたカメラ自体を制御するView
CameraView.swift
struct CameraView: View {
    
    @Environment(\.dismiss) var dismiss
    @State private var movieUrl: URL?
    @State private var cancelled: Bool = false
    
    var body: some View {
        // 撮影終了後の処理
        if (movieUrl != nil) {
            Text(movieUrl!.absoluteString).font(.title3)
        }
        // 撮影キャンセル後の処理 : 前の画面に戻る
        else if (cancelled) {
            VStack{}.onAppear(perform: {
                dismiss()
            })
        }
        // カメラが使用可能な場合 : カメラを起動する
        else if (UIImagePickerController.isSourceTypeAvailable(.camera)) {
            CameraMoviePickerView(movieUrl: $movieUrl, cancelled: $cancelled)
        }
        // カメラが使用できない場合
        else {
            VStack {
                Text("カメラを起動できませんでした").font(.title3).padding(.vertical,12)
                Button(action: {
                    dismiss()
                }) {
                    Text("前の画面に戻る").font(.title3).bold().padding(.vertical,12)
                }
                #if DEBUG
                Button(action: {
                    var url: URL = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!
                    url = url.appendingPathComponent("xxxx.mp4")
                    movieUrl = url
                }) {
                    Text("強制的に続行 (デバッグビルド)").font(.title3).bold().padding(.vertical,12)
                }
                #endif
            }
        }
    }
}

カメラで撮影した動画は暫定的に端末内に保存され，アプリ側ではファイルURLを取得することができます．今は暫定的に，ファイルURLを撮影完了後に表示するように実装しました．

XCodeのiOS シミュレーターではカメラが使用できないため，カメラが使えない場合を想定した分岐処理を書きました．また，デバッグビルド用に撮影が無事成功したと仮定して架空のファイルURLを設定するボタンも設置しました．（リリースの場合ビルド時に削除されます）

Taichi AsakuraTaichi Asakura

2025.1.15 (水) カメラ機能の実機動作確認と修正

XCodeで作成したアプリをiOS / iPadOS デバイス上で動作確認することができた．

修正箇所

  • カメラ画面のViewのみ縦方向に固定 (撮影自体は縦・横どちらでも可)
    • 横回転時にUIの表示が崩れるため
  • 撮影時の画質を2段階で選択可能に (Apple側が用意した「高」「中」の画質の定数を使用，実際の解像度等は不明)
  • その他バグ修正