たびぽん - TABIPON

https://github.com/Tanakee/progate-20266-oogishima

―

GitHub

TypeScript

React

Python

PostgreSQL

思い出の写真をスタンプに変換しコレクションするアプリ

たなけー

beni

Ccc

推しアイデア

スマホを振ってスタンプを押せる体験

作った背景

観光した思い出をスタンプで残せたら、「それって素敵だな...」と思ったから

推し技術

OpenCVによる画像加工 加速度センサーでスタンプ押し体験

プロジェクト詳細

挑戦すること

濱平佳汰（べに） 初のモバイル開発頑張ります。

卯西萌寧（Ccc） ネイティブアプリもバックエンドも初です！！たくさん吸収します

たなけー 画像処理とスマホのセンサー触るの初めてなので頑張ります

たびぽん - TABIPON

概要

どんな場所の写真でもオリジナルスタンプに変換できるアプリ。 観光地だけでなく、思い出の場所や日常のスポットを撮影してスタンプ化し、スマホを水平に持って振り下ろしてスタンプを押すというユニークな体験を提供する。

役割分担

卯西萌寧（Ccc）

担当：アイデア出し・デザイン作成・フロントエンド実装全般・スケジュール管理など

コメント：昨今のAIの発達で、100%AIによってデザインされたプロダクトをよく見かけますが、情報の優先順位が考慮されていない配置・必要以上の色数が使用されているなどのUI/UXを見かけます。特にハッカソンでは、時間が限られているため、切り捨ててしまいがちな部分ですが、せっかくのアイデアの魅力を最大限伝えるには、おろそかにしてはならないと考えていました。 特に今回の開発では、「スマホを振ってスタンプを押せる」という体験を重視していたため、この体験のノイズにならないように、また最大限楽しめるような画面構成を目指して作成しました。 また、プロジェクトマネジメントの部分でも、たくさん学びがありました。 これ以上書くと長くなるので、そのうち自分のブログにまとめようと思います（笑）

濱平佳汰（べに）

コア機能以外の大体のAPIを作りました。 それに伴いDBについても関わりました。

田中渓都（たなけー）

コア機能・デプロイなどバックエンド周りを作りました。

コメント：打ち上げで食べたマグロカツ美味しかった

アプリのフロー
  1. スポットへ行き、スマホカメラで写真を撮影
  2. 円形ガイド内に収まるよう写真を調整
  3. 撮影写真を円形にトリミングし、スタンプ調に加工
  4. スマホを水平に持ち、振りかぶって振り下ろすとスタンプが押される（端末の向きに応じて傾いて押される）
  5. 作成したスタンプがアルバムに保存される

image

画面構成

 
カメラ画面
├─ 撮影画面
├─ 調整画面
├─ スタンプを押す画面
└─ スタンプを押しました画面

アルバム画面
└─ スタンプ詳細画面

マイページ画面
├─ 言語設定画面
├─ プライバシー画面（未実装）
├─ 通知設定画面（未実装）
└─ ヘルプ画面（未実装）

ワイヤーフレーム

image

カラーUI

デザイン一覧 image

カメラ画面

デザイン image

実機

撮影画面 image

調整画面 image

スタンプを押す画面 image

アルバム画面

デザイン image

アルバム一覧画面 image

スタンプ詳細画面 image image

マイページ画面

デザイン image

実機 image

使用技術

フロントエンド
  • 言語： TypeScript
  • フレームワーク： React Native / Expo
  • ライブラリ類
    • expo-camera — カメラ撮影
    • expo-image-manipulator — 円形トリミング・リサイズ
    • react-native-gesture-handler — ドラッグ・ピンチ操作
    • react-native-reanimated — スタンプ押印アニメーション
    • expo-sensors (DeviceMotion) — 加速度センサーによる振り検知・コンパス方向取得
    • expo-haptics — 振動演出
    • expo-av — スタンプ押印時の効果音
    • expo-location — GPS位置情報取得
    • react-native-webview / Google map API — スタンプ詳細画面の地図表示
  • デザイン
    • pencil.dev：ワイヤーフレーム・UIの作成

バックエンド
  • 言語：Python
  • フレームワーク：FastAPI
  • ライブラリ類
    • OpenCV — スタンプ調画像加工（グレースケール・エッジ強調・二値化・回転・掠れ効果）

インフラ
  • APIサーバー：Railway（GitHubへのpushで自動デプロイ）
  • DB：Supabase Postgres
  • ストレージ： Supabase Storage

現在できていること
  • カメラ撮影 -> スタンプ押印 ->アルバム保存の一連のフローが動く
  • OpenCVによるスタンプ調画像加工（色4種・フレーム4種から選択可能）
  • スタンプ押下前に選択中のフレーム・カラーと向きガイドをプレビュー表示
  • 加速度センサーによる振り操作（水平持ち、振り上げ→振り下ろしで検出）
  • コンパス方向（DeviceMotion）に連動したスタンプの傾き
  • 押しつけの強さに応じた掠れ具合の自動調整
  • スタンプ押印時の効果音・ハプティクス・バイブレーション演出
  • Supabaseへの画像保存・DB登録
  • GPS位置情報の取得とスタンプへの紐付け
  • アルバム画面でのスタンプ一覧表示・詳細表示
  • RailwayによるCI/CD（mainブランチへのマージで自動デプロイ）

今後の展望
  • グループ内でのスタンプ共有機能
  • ランドマーク名をスタンプ中央に表示する機能
  • マイページの「通知設定」「プライバシー」「ヘルプ」画面の作成
  • UIの軽微な調整

たなけー

@tanakeeeeee