🐟

【iPhone アプリ】ランキング動画を作成できるiPhoneアプリを作ってみた

2021/10/13に公開

iOS

はじめに

初めまして🐕 私は普段、iPhoneアプリ開発をしています。
アプリを開発している途中にiOS15が発表され、一部のUIがうまく表示されなくなってしまったりと、リリースで詰まった部分などを書いていきたいと思います。よろしくお願いします🙇‍♀️

作ったアプリについて

今回私が作成したのは 「○○ランキング動画」 が項目を並び替えるだけで、簡単に作成ができるアプリです。TikTokやYouTubeショートなどで稀に作成している人がいますが、皆さんは見たことありますでしょうか...?

作った理由について

身内ネタ的に、何かをランキングにして動画にできてSNSで送ったりしたら楽しいかなと思ったのがきっかけです。例えば 「好きなプログラミング言語ランキング」 や 「ウチのペットの可愛い瞬間まとめ」 など。もしよろしければ、UIなどを触って動画を作って頂けたら嬉しいです。😭

こだわりポイント

動画の完成イメージをプレビューできる

iOSでの動画の書き出しは、iPhone13の登場など、最近は処理能力も上がって速いのですが、
編集の度に毎回書き出しては大変なので、UIView.animate(withDuration:)で動画のように見せる工夫をしています。

動画開始と終了に表示されるテキストを変更できる

オープニング文字列

動画の始まりと終わりに好きな文字を入れられることで、「チャンネル登録よろしく！」のような、いかにも動画っぽい感じにできました。

インフォメーション画面のロゴが押せる

こちらは、アプリの「バージョン」や「お問い合わせ」を表示する画面なのですが、開発者のロゴをタップすると、お魚🐟が飛び出すアニメーションをします。アプリのメイン機能にはまったく関係がないのですが、こういう遊びがあるアプリは個人的には好きで、今回つけてみました。(笑)
iOSでは、CAEmitterLayerというパーティクル表現ができるものがあります。SpriteKitの.sksファイルを使わずにこのような表現ができるのは楽しいです。

CAEmitterLayer Apple Developer

技術的な話について

開発環境

iOS 15.0.1
Apple Swift version 5.5
Xcode Version 13.0

開発期間

1ヶ月くらいです。記事を書いてみたり、UIに困ったり、色々と時間が掛かってしまいました。。
でも1番大変なのって、ストア用の画像を用意したり、アイコンを考えたりする時間だったりするんですよね😂(気持ちわかる！って方がいらしたらコメント頂けると嬉しいです。)

使用したライブラリなど

Friebase(広告トラッキングやアナリティクスのため)
Google-Mobile-Ads-SDK

アプリでは、以下のように150×150ptサイズに画像を切り取る画面があるのですが、ここの部分はライブラリにするか迷いました。しかし、切り取った画像をCGImageとして扱い、サイズや向きなどを気をつけながら動画内で利用しなければならなかったので、今回はUIScrollViewとUIImageViewで切り取り部分を作成をしました。

画像を切りとる画面

動画の合成について

iOSの動画について、AVFoundationを利用してCALayerのアニメーションで行っています。パーツ構成は以下の通りです。

ランキングを構成するパーツ

右から左へと流れるように、ベースとなるCALayerに画像やテキストを一緒に乗せてアニメーションさせています。

animation.swift

// アニメーションの設定
let anim = CABasicAnimation(keyPath: #keyPath(CALayer.position))
anim.fromValue = CGPoint(x: baseLayer.frame.origin.x, y: 0)
anim.toValue = CGPoint(x: 0 - baseLayer.frame.size.width, y: 0)
anim.duration = baseVideoAsset.duration.seconds
anim.beginTime = AVCoreAnimationBeginTimeAtZero
anim.isRemovedOnCompletion = false
anim.fillMode = .forwards
baseLayer.add(anim, forKey: nil)

ハマりポイントとしては、AVFoundationのアニメーション時にbeginTimeに0を指定したい場合、ただの0.0だと正しくアニメーションされないので、AVCoreAnimationBeginTimeAtZeroを指定します。

AVCoreAnimationBeginTimeAtZero Apple Developer

iOS15でNavigationBarの色が無くなる

開発中ではiOS14.5.1でした。しかし途中でiPhone13の発表と共にiOS15が正式にリリースされ、
iOS15で見てみたところ、NavigationBarが表示されなくなってしまいました。。。

こちらの記事を参考に、StoryBoardで設定対応しました。

さいごに

iOS15でバグを踏んでしまったり、AVFoundationで苦しんだりと、途中途中大変なところはありましたが、無事にリリースできて良かった〜！🐕 アプリを使ってくださってくれる方にとても感謝しています🙇‍♀️
また、ご意見などあればメッセージ等頂けると嬉しいです。
見て頂いてありがとうございます！🎉