Enludus
お問い合わせ

StudyReel の「タイムラプス」と「バックアップ」の中身

勉強の様子を記録する iOS アプリ StudyReel で、タイムラプスをどう撮っているか、顔のモザイクをどこで処理しているか、そして iCloud のバックアップをなぜファイルで作り直したかを書きます。

StudyReel は、机にスマホを置いて勉強すると、その様子をタイムラプスとして残せる iOS アプリです。塾講師をしていたとき、生徒から「家で勉強したことを親に伝えられない」と相談されたのがきっかけでした。

この記事では、アプリの中で実際にどう作っているかを書きます。

タイムラプスは「写真を並べたもの」ではない

タイムラプスというと、一定間隔で写真を撮って並べる方法を思い浮かべるかもしれません。StudyReel は、カメラの映像から N 秒ごとに 1 コマだけ 取り出し、それを 10fps の動画に書き込んでいます。間隔は 2・5・10・30 秒から選べて、標準は 5 秒。画質は 720p か 1080p(標準は 1080p)です。

ポイントは、間隔を「勉強していた時間」で数えていることです。一時停止している間は数えないので、休憩が長くても動画の中の時間の流れは乱れません。

Pro では、全フレームを 30fps で残す「フル録画」も選べます。逆に、撮影したくない人向けに 録画なし のモードもあります。これはユーザーの声を受けて追加しました。

机に置いたままにするための工夫

  • 画面を暗くして撮り続ける。 録画中は画面の明るさを 0.02 まで下げられ、タップすると元に戻ります。電池と発熱を抑え、勉強の邪魔にもなりにくくするためです。
  • 自動ロックを止める。 記録中は画面が勝手に消えないようにしています。
  • アプリを離れたら、カメラだけ止める。 ほかのアプリに切り替えるとカメラは止まりますが、タイマーは動き続け、戻ってきたら再開のカードを出します。
StudyReel の録画画面。机に向かう人のイラストの上に、音を選ぶメニューと残り時間が出ている
録画中の画面

一方で、発熱の状態を見て撮影を調整するような処理はまだ入っていません。長時間の録画では充電しながら使うよう案内しているのが現状で、ここは今後の課題です。

顔のモザイクは端末の中だけで

勉強の様子を共有するとき、顔は隠したいことが多いはずです。StudyReel では、Apple の Vision フレームワークで 0.2 秒ごとに顔の位置を調べ、見失っても 1.5 秒は直前の位置を保ち、顔が見つからないときは上半身の位置で代わりに隠します。

この処理はすべて端末の中で行い、顔の情報を保存したり送ったりはしません。モザイクは無料で使えて、スタンプで隠す方法は Pro の機能です。

録画後の確認画面。イラストの人物の顔にモザイクがかかり、「顔にモザイク」のスイッチがオンになっている
録画後の確認画面で顔にモザイク

iCloud のバックアップを、ファイルで作り直した

記録は SwiftData に保存しています。iCloud が有効な状態だと、SwiftData は自動で CloudKit との同期を始めようとします。ところが StudyReel のデータの形は CloudKit の決まりを満たしていなかったため、同期を始めようとした時点で 起動直後にクラッシュ していました。

そこで、SwiftData の CloudKit 同期は使わないように明示し、バックアップの方法を変えました。

  • 記録を backup.json に書き出し、動画などのメディアと一緒に iCloud Drive にコピーする
  • 自動バックアップは 1 日 1 回まで
  • 復元するときは、まだ手元にない記録だけを追加する(同じものを二重に作らない)
  • メディアは「ファイル」アプリの StudyReel/Media から見られる

同期ほど賢くはありませんが、何がどこに保存されているかが目に見えて、壊れにくい方法です。

設定画面の iCloud バックアップの欄。「自動でバックアップ」がオンで、「今すぐバックアップ」「バックアップから戻す」が並ぶ
設定の iCloud バックアップ

そのほかの機能

  • 教材のバーコード登録:本の裏のバーコード(EAN-13)を読むと、openBD、だめなら国立国会図書館の検索で書名を調べる
  • 1 週間の Vlog:今週・先週の記録を、縦または横の動画に 1 本でまとめる。BGM も付けられる
  • ウィジェット:ホーム画面から 25 分のポモドーロを開始・停止できる

これから

発熱への対応や、記録の振り返りをもっと楽しくすることなど、やりたいことはまだあります。使ってみて気になったことがあれば、ぜひ教えてください。


AVFoundation の時刻の扱い、Vision での顔追跡と補間、CIPixellate の合成、SwiftData と CloudKit の件まで、コードを引用して追った技術編は「StudyReel の録画パイプラインを全部書く」に書きました。