1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

React Native + Expoで、読書記録を3D物理演算で視覚化するアプリ「YomiReco」を作ってみた⁠

1
Posted at

1. はじめに(プロダクトの紹介)
「読書管理アプリってたくさんあるけど、文字やグラフの羅列ばかりで、入力するのがだんだん面倒になりませんか?
本を読んだ達成感を、もっと直感的に、現実の世界みたいに『積み上がっていく楽しさ』として感じたい。そんな思いから、3D物理演算を取り入れた読書管理アプリ**『YomiReco(ヨミレコ)』**を個人開発しました!」

2. どんなアプリ?

  • バーコードをカメラで読み取って本の情報を取得し、登録できる
  • 3D 表現や WebView を使って本の可視化・表示演出もある
  • 読了した本と未読本を管理する「本棚」機能
  • 読書状況をグラフや統計で確認できる「統計」画面
  • 通知リマインダーやカテゴリ管理ができる「設定」画面

プレゼンテーション1 (3).gif

3. 主な技術スタック

  • Expo / Expo Router
    • クロスプラットフォームアプリ構築とタブナビゲーションに使用
  • React Native
    • モバイル UI、アニメーション、ジェスチャー、標準コンポーネント利用
  • TypeScript
    • 型安全な開発と静的チェック
  • Supabase JS
    • バックエンド API / データ保存連携
  • Expo Camera
    • バーコードスキャン / カメラ機能
  • react-native-webview
    • WebView 内での 3D 描画 / 物理表現表示
  • @shopify/react-native-skia / matter-js / three.js / cannon-es
    • 物理表現・描画関連(本の積み重ね表示など)
  • expo-notifications
    • 通知リマインダー機能

4. こだわったポイント・技術的な挑戦

  • バーコード読み取りで本を自動登録
  • expo-camera と ISBN 取得で本の情報を引いてくる仕組み
  • 本の表紙色や色調を抽出して UI に反映
  • 画像からカラーを解析し、棚やカードの配色に活用
  • 3D・物理表現を WebView で実装
  • react-native-webview 経由で three.js / cannon-es っぽい物理スタック表示を動かす
  • タブ切り替えで広告表示制御
  • react-native-google-mobile-ads のインタースティシャルを回数管理して出す
  • 通知リマインダーと設定保持
  • expo-notifications / expo-secure-store で通知スケジュールとユーザー設定を管理

5. 最後に
AppStoreにてリリース済みになっております!

是非!是非!下記のリンクからダウンロードしてみてください!
視覚的にも楽しめるアプリになっていますので
お子さんの本管理にもお使いください^^

ダウンロードリンク
https://apps.apple.com/us/app/yomireco/id6762505531

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?