見出し画像

思い出の写真をウィジェットに表示したい REALITY Advent Calendar 2023

はじめに

この記事はREALITY Advent Calendar 2023の11日目の記事です。
昨日はサーバー3チームの「REALITYに郵便番号検索機能を付けてみたよ!」でした。

かむいです。昨年に引き続き、開発合宿でiOSのウィジェットの仕組みを使い、REALITYであったら面白そうな機能開発にチャレンジしてみました。

※本記事の画像はデモプレイ用のものであり、リリースを確約するものではない旨ご了承ください。

思い出ウィジェット機能

これは家族アルバムアプリ『みてね』で提供している機能で、その機能をREALITYでも導入してみたい!と刺激を受けたのがキッカケでした。

アプリ上に投稿した過去の写真を、x年前の今日、xヶ月前の今日といったタイミングでウィジェットを通してホーム画面上に表示し、ふとした瞬間に懐かしい思い出に浸れるエモofエモな機能です。

REALITYも配信画面のスクショ撮影・画像保存機能があり、その画像は端末の写真アプリ上に保管されています。みてねの様に懐かしい思い出に浸れる体験は出来ないかと思いチャレンジしてみました。

実際に作成したウィジェットは以下のようなものです。

ラスラン後のチェキ会の思い出📷
誕生日枠でお祝いした思い出🎂
ルームでフォロワー達とオタ芸した思い出💃

いかがでしょうか。iPhoneのホーム画面に配置することで、ふとしたタイミングで懐かしい思い出に出会うことが出来ます。

仕組みについて

処理の流れは以下のようなフローで行っています。
(みてねアプリを参考にしていますが厳密には異なる部分があると思います)

  • 写真アルバムのパーミッション確認

    • 拒否されている場合は写真を取得できずデフォルト画像を表示

  • REALITYフォルダのスクショ画像取得

  • 現在の日付からxヶ月前 or x年前の今日の写真をランダムで1枚取得

    • 撮影日とタイトル「xヶ月 or x年前の今日」 を表示

  • 上記の条件に該当しない場合はフォルダ全体からランダムで1枚取得

    • 撮影日とタイトル「ハイライト」を表示

  • 画像の更新は1時間ごとに実施

実装してみた感想

主にUIとデバッグの2点で苦労しました。

まずUIは画像のサイズ比の問題です。iPhoneのカメラアプリで撮影される画像のサイズ比率は4:3 / 16:9 / 1:1とありますが、REALITYフォルダ上にある画像はスクショ画像のため19.5:9等といった縦長サイズとなります。

ウィジェットの形は4種類ありmedium(横長)以外は正方形サイズです。枠いっぱいに画像が収まるように画像の上下部分を切り捨てることも出来ますが、スクショ画像の場合上下部分を切り捨て過ぎると思い出の肝心な箇所が表示されないという懸念があり、結果としてサイズ比を維持した上で全て表示する方針としました。

ZStack {
  HStack {
    // テキスト部割愛
  }
  .padding([.horizontal, .bottom], contentPadding)
}
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
.background(Image(uiImage: entry.getImage()).resizable().scaledToFit())
.background(Image(uiImage: entry.getImage()).resizable().scaledToFill().blur(radius: 10))

しかし縦長の画像を当て込むだけだと左右の隙間が味気なくなるため、画像のbackgroundにブラー処理した画像を配置しました。
見栄えが良くなるブラー処理も、SwiftUIだと簡単に実現できるのが良いですね。

2点目がデバッグです。LLDBとの相性の問題なのかもしれませんが、ブレークポイントやログなどがなかなか落ちず実装が思うように進まないことがありました。原因解明の時間が惜しいため、合宿中はロジック部をREALITYアプリ側のファイルに移し動作検証するという苦し紛れの対応で乗り切りました。

昨年のウィジェット開発ではREALITYアプリ側とのデータ共有・取得ロジックがあったため、昨年ほどこの苦労は少なかったのですが、これを念頭に置いてウィジェット開発は取り組まないといけないのが苦しいところです。

やり残したこと

合宿期間中に間に合わなかったのがウィジェットに表示された画像をシェアする機能です。既存の機能とかけ合わせることで実現は可能なのですが、惜しくも時間切れでした。ウィジェットをタップした後のユーザー体験も詰められると要件は満たせるので、もう一踏ん張りといった感じです。

最後に

デザイン・技術面でまだ課題はありつつも、自分が欲しい機能を形にできるのは楽しく、開発合宿ではとても有意義な時間を作ることができました。来年は別の技術にチャレンジしようと思いますが、ウィジェットの知見はどこかで活かしたいので、今回の機能はREALITYでいつか利用できるといいなと思っています。

明日はエンジニアではなくPMのむくどりんさんが投稿します!お楽しみに!