Skip to content

jphacks/F_2207

Repository files navigation

タイムカプセルアプリ リカプセル

リカプセル

デモ動画(タイムカプセルを埋める)
RPReplay_Final1666415345.mov
デモ動画(タイムカプセルを開ける)
RPReplay_Final1666415345.mov

製品概要

背景(製品開発のきっかけ、課題等)

私たちの日常には、些細だけれど、でも思い返すと大切な思い出がたくさんあります。そして、そんな思い出のある場所は、他の人にとっては何の変哲もない場所であったとしても、自分にとっては特別な場所になり得ます。

しかし、日常の中にある思い出は、全てを覚えておくことはできません。時間の経過とともに忘れてしまうことの方が多いです。そして、そんな思い出を一緒に作ったはずの友達もまた、ライフステージや環境の変化で離れてしまっていることが場合があります。

タイムカプセルアプリ「リカプセル」は 記憶 x Tech サービスです。 日々の中にある素敵な記憶を思い出させると同時に、一度は失われてしまったコミュニケーションのきっかけを提供します。

製品説明(具体的な製品の説明)

サービスの流れは大きく3ステップ。

  1. 埋める

    友達と一緒に、その日の思い出を写真とともに埋めることができます。

    • 代表者が、カプセルの色とその日の思い出を表す絵文字を 1 文字選ぶ
    • 一緒に埋める友達を招待して、一緒に制作
    • お互いに知られないように写真を登録
    • カプセルのタイトルや開ける日、メモを記録

create-flow

  1. 待つ

    地図上で、どこの思い出がいつ開けられるかを見ることができます。

  2. 掘り起こす

    みんなで集まってタイムカプセルを開封しましょう!

    • AR 上でカプセルを探索
    • 発見
    • スマホを振ってカプセルを開封
    • みんなの入れた写真やメモを見ることができる

open-flow

こだわり

単なるデジタル化ではない

  • GPS、AR、加速度センサなどを最大限利用し、デジタルらしい「楽しさ」を演出しました

バーチャルとリアルの良いとこどり

  • 「その場にいる人でないと参加できない」「実際にみんなで訪れないと開けれない」など、本来のタイムカプセルの持つアナログな楽しさを残しながら、地図表示や開封時間の可視化、AR などデジタルならではの特徴を取り入れました。

実装面、デザイン面の両面からユーザー体験を追求

  • UI デザインはもちろん、カプセル開封時の動画や、カプセルの 3D モデルなどを自作。デザインと実装の両面からより良いプロダクトを目指しました。

特長

  1. その場にいるメンバーみんなで参加できる

    • その日その場所にいたメンバーみんなが、一つのタイムカプセルに思い出を残すことができます。
  2. お互いが入れた写真は開封までわからない

    • みんながどんな写真を入れたのかは開封までのお楽しみです。
  3. みんなで集まるきっかけに

    • みんなが集まらないと開けることができません。
    • 一度は離れてしまった友達と、再びコミュニケーションを取るきっかけとなります。

解決出来ること

  • 思い出、特に日常の些細な出来事を忘れてしまう
    • タイムカプセルの存在、そしてその中に入れられたたくさんの写真が、時間の経過とともに忘れてしまった素敵な日常の思い出を思い出させます
  • 学校の卒業など、ライフステージの変化で友達と会わなくなってしまう
    • 「タイムカプセル開けようよ!」が、旧友と再びコミュニケーションを取るきっかけになります

今後の展望

  • カプセルが開けられるようになった際の通知
  • AR 画面における 3D モデルのブラッシュアップ
  • カプセルを埋める・掘り起こす際に動画を撮れるようにする
  • シェア機能

開発技術

活用した技術

API・データ

  • MapQuest
  • MapBox
  • 国土交通省地理院地図

フレームワーク・ライブラリ・モジュール

  • React
  • Next.js
  • tailwind
  • Mantine
  • Three.js
  • Firebase

技術的工夫点

全てのコードはハッカソン期間中に書いています(事前開発は行っていません)

Location-based AR を独自実装

  • 端末の GPS 情報や姿勢情報をもとにカプセルの表示場所を計算し、カメラ映像に重ねる形で Three.js で描画 (実装)

GPS を利用して、近くにいる友達へタイムカプセルの作成を自動通知する

  • 友達を選択するなどの面倒な手順を踏むことなく、ワンタップで参加可能 (実装)
  • 友達の入力内容をリアルタイム同期
Cap.2022-10-23.16.21.17.mov

加速度情報を利用した「スマホを振る」機能

  • 端末の加速度センサを利用し、「スマホを振るとタイムカプセルが開く」アクションを実現 (実装)

3D モデル、アニメーション動画を作成

  • カプセルに思い出が詰まっている様子を 3D モデルで表現しています
capsule_animation.1.mp4