1. はじめに(プロダクトの紹介)
「読書管理アプリってたくさんあるけど、文字やグラフの羅列ばかりで、入力するのがだんだん面倒になりませんか?
本を読んだ達成感を、もっと直感的に、現実の世界みたいに『積み上がっていく楽しさ』として感じたい。そんな思いから、3D物理演算を取り入れた読書管理アプリ**『YomiReco(ヨミレコ)』**を個人開発しました!」
2. どんなアプリ?
- バーコードをカメラで読み取って本の情報を取得し、登録できる
- 3D 表現や WebView を使って本の可視化・表示演出もある
- 読了した本と未読本を管理する「本棚」機能
- 読書状況をグラフや統計で確認できる「統計」画面
- 通知リマインダーやカテゴリ管理ができる「設定」画面
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
