子育てのテンプレート

Storyloom AI Bedtime Story App

A React Native app for parents: pick a hero, a place and a gentle lesson, and Gemini writes, illustrates and reads aloud a bedtime story. Runs on sample stories until you connect Supabase.

18画面
iOS & Android
サンプルデータ
2026年11月4日更新
検証済みリリース
1件のコピー

無料でコピー · ソース全体 · クレジットカード不要

画面

実際に動作するアプリの6画面。

含まれる内容

Story builder: a child or animal friend, six places, eight lessons, 3/5/8 minutes and four narrator voices
Three Gemini tasks in a Supabase Edge Function: write the story, draw each page, read each page aloud
Honest staged progress: writing, each picture as it lands, recording; keeps going if you leave the screen
Reader with read-along word lighting, narration playback, sleep timer, text size and a slowly dimming end
For parents: drawn avatars only, a grown-up number check before plans and deleting data, no ads or analytics
Sample mode with no backend: two sample children, six stories and 73 bundled illustrations

このテンプレートについて

Overview

Storyloom is a bedtime story app used by parents with their child. The parent picks who the story is about (their child by first name, or one of six animal friends), where it happens, what it gently shows and how long it is. The app writes the story, draws a picture for every page and reads it aloud, then keeps it in a family library with favourites and collections.

Out of the box it runs in sample mode: no backend, everything stored on the device. Connect Supabase and a Gemini key and the same screens make real stories.

Key features

Library with tonight's idea for one of the children, keep reading, a favourites shelf, Calm/Brave/Friendship collections and every story
Builder with drawn hero and place pickers, lesson chips, an optional one-line detail, length and narrator, and the cost shown before Create
Creating screen that shows each real step and each picture as it arrives; failures get their own words and next step
Story page with Read or carry on, a pages strip, favourite, edit a page's words, draw a missing picture, share the text and delete
Reader that lights each word as it is read (recorded narration or read-along pacing), with page bars, a sleep timer and text size
Kids profiles with drawn avatars built from skin tone, hair and pajama colour, never photos
You tab with the week's free story, reader settings, the grown-up check, restore purchases and Delete my data
In-app Privacy Policy and Terms of Use, and an About screen

Screens

Welcome, add your first child, Stories (library), New story, Creating, Story, Reader, The end, Collection, Kids, a child's profile, Add a child, You, the grown-up check, Storyloom Pro, Privacy Policy, Terms of Use and About: 18 screens, all built and tested in light and dark.

AI and backend

AI runs on the server through one Supabase Edge Function (`ai`) that calls Google Gemini with your key. The app signs each install in anonymously, so there is no visible account.

write-story (2 units): title and pages with a picture brief each, JSON output, a children's safety prompt; saves the story and its pages
illustrate-page (2 units a page): one flat picture-book style, later pages drawn against page 1 so the hero stays the same
narrate (1 unit a page): each page read slowly in the chosen voice, saved as audio
A six-page story uses 20 units; the daily allowance, Pro limits and the free plan's one story a week are checked on the server
Tables kids, stories and pages with row-level security; pictures and narration in a private storage bucket, shown through signed URLs

In sample mode, Create returns a designed sample story for the chosen place and hero, with bundled pictures. Sample stories have no recorded voice: the reader's read-along lights the words at a bedtime pace.

Monetisation

Free makes one new story a week and includes Storyloom's own stories, read by one voice. Pro (monthly and yearly) makes unlimited stories in all four voices. Purchases go through RevenueCat; until you connect it, the paywall shows sample prices and says subscriptions open in the App Store version. The plans screen sits behind the grown-up check.

Setup

Connect Supabase and apply the two migrations, add the Gemini key and deploy the functions, then connect RevenueCat to sell Pro. Each step below includes the request for your coding agent.

aibedtime storieskidsparentingstory generatortext to speechgeminisupabaserevenuecatreact nativeexpo

含まれるもの

ソース全体 — TypeScript の Expo と React Native。ワークスペース内のアプリとして届きます。
ライブプレビュー — 変更をブラウザやスマートフォンですぐ確認できます。
検証済みリリース — コンパイルでき、すべての画面がエラーなく開きます。
AI アシスタント — チャットで何でも変更できます。変更ごとにクレジットを使います。
ビルドとストアへのアップロード — iOS と Android のビルドを、公開から App Store と Google Play に送れます。
コピーにクレジット不要 — コピー自体は無料です。

最新バージョンの FluxNative で作られています。

必要なもの

FluxNative アカウント — Free プランはアプリを2つまで持てます。
始めるのにバックエンド不要 — 自分のものを接続するまでサンプルデータで動きます。
Creator 以上 — ネイティブビルドとストアへのアップロード用です。
ストアアカウント — 公開には Apple Developer Program（年額 99 米ドル）と Google Play（1回 25 米ドル）が必要です。

ソースに含まれるもの

画面: 18
ファイル（コピーに含まれる）: 442
行（このアプリのために書かれたコード）: 6,550
個の既製 UI コンポーネント: 142

アプリのテキスト: 英語、ベトナム語

技術スタック

Expo SDK: 57.0.22
React Native: 0.86.3
React: 19.2.8
TypeScript: 6.0.3
Expo Router: 57.0.21
Supabase JS: 2.112.3
RevenueCat: 10.9.1

このリリースの package.json より。

デザインシステム

見出し: Outfit
本文: システムフォント

ライト・ダーク両対応
Liquid Glass
カプセル型ボタン
フラットなカード

フォーク後のセットアップ

コピーは、それを作った AI アシスタントと一緒に開きます。手順を順に進めてください。手順が求めるものは Server で接続し、各プロンプトを送ります。

Connect Supabase
Server › Backend › Supabase. Apply both migrations, turn on anonymous sign-ins in the Supabase dashboard, and write the public URL and anon key to .env. Until then the app runs on sample stories.
AI へのプロンプト
Connect this app to the Supabase project under Server › Backend › Supabase. Apply supabase/migrations/20261019000000_ai_kit.sql and then supabase/migrations/20261019010000_storyloom.sql. Write EXPO_PUBLIC_SUPABASE_URL and EXPO_PUBLIC_SUPABASE_ANON_KEY to .env. Remind me to turn on Authentication › Sign In / Providers › "Allow anonymous sign-ins" in the Supabase dashboard and to keep the anonymous sign-in rate limit low. Then confirm the kids, stories and pages tables exist with row-level security.
Turn on the AI
Server › API keys & secrets: add GEMINI_API_KEY (a billing-enabled key; image models have no free tier). Deploy the ai function. Keep AI_FREE_UNITS_PER_DAY at 30 or more so a 9-page story fits.
AI へのプロンプト
Under Server › API keys & secrets, check that GEMINI_API_KEY is set, and set AI_FREE_UNITS_PER_DAY to 30 and AI_PRO_UNITS_PER_DAY to 500 unless I say otherwise. Deploy the Supabase Edge Function ai (supabase/functions/ai) and push its secrets. Invoke it with { "task": "usage" } as a test user and show me the answer. Then make one story from the New story tab and tell me whether writing, drawing and narration all succeeded.
Sell Pro
Server › Monetization: connect RevenueCat with a monthly and a yearly product in one offering, entitlement pro. Save the webhook secret and deploy the revenuecat-webhook function.
AI へのプロンプト
Connect RevenueCat under Server › Monetization for Storyloom Pro: one offering with a monthly and a yearly product and the entitlement pro. Write EXPO_PUBLIC_REVENUECAT_IOS_KEY and EXPO_PUBLIC_REVENUECAT_ANDROID_KEY to .env. Create a long random REVENUECAT_WEBHOOK_SECRET under Server › API keys & secrets, deploy supabase/functions/revenuecat-webhook with JWT verification off, push the secret, and give me the webhook URL and Authorization header to paste into RevenueCat › Integrations › Webhooks. Update PLAN_PREVIEW in src/services/iap/index.ts to match my real prices.
Choose the stories and voices
Places, lessons, narrator voices and animal friends live in src/services/catalog; Storyloom's own six stories are in templates.ts. The server's task list (functions/ai/tasks.ts) must match.
AI へのプロンプト
Show me the places, lessons, narrator voices and animal friends in src/services/catalog/index.ts and the voice mapping in the server's ai function (functions/ai/tasks.ts). Apply the changes I ask for in both files so the app and the server stay in step, keep the safety prompt in write-story, and re-run the typecheck.
Set your icon, store IDs and legal pages
Rename the app, replace the icon, retune the colours and point the legal links at your own pages. Rewrite the in-app Privacy Policy and Terms of Use for your business.
AI へのプロンプト
Rename the app to the name I give you in app.json and the visible copy. Replace assets/icon.svg and assets/adaptive-icon.svg with my icon and render icon.png, adaptive-icon.png and favicon.png. Change brandSeed and the overrides in src/theme/brand.ts to my colours, keeping text contrast. Set EXPO_PUBLIC_PRIVACY_POLICY_URL, EXPO_PUBLIC_TERMS_URL and EXPO_PUBLIC_SUPPORT_URL in .env, and update src/features/legal/PrivacyScreen.tsx and TermsScreen.tsx with my company's details.

このテンプレートの使い方

テンプレートを使うと、ソースコード付きの編集できるコピーがワークスペースに作られます（テンプレート）。
変えたいことを AI アシスタントにふだんの言葉で頼みます（アシスタントと作業する）。
変更はライブプレビューやスマートフォンで確かめます（プレビュー）。
Creator 以上のプランで、iOS と Android 向けにビルドしてストアに提出します（公開の概要）。

ライセンスとサポート

ライセンス

あなたのために作られたアプリはあなたのものです。テンプレートのコードは InspireUI に帰属し、あなたのアプリで使うためにライセンスされます（利用規約 › 当社の知的財産）。

ヘルプ

テンプレート、アシスタント、公開のガイド。
ヘルプからサポートに問い合わせ。通常1〜2営業日以内に返信します。
コピーでは、どの画面やファイルでも AI アシスタントに聞けます。

FluxNative 制作

サポートポリシー

質問

無料ですか？

無料テンプレートのコピーはクレジットも含め無料です。Premium はウェブサイトごとに1回の購入です。チャットでの変更とビルドにはクレジットを使います。

何を所有しますか？

あなた向けに作られたアプリはあなたのものです。テンプレートのコードは InspireUI のもので、あなたのアプリで使うライセンスが付与されます（利用規約 › 当社の知的財産）。

コードの知識は必要ですか？

いいえ。普通の言葉でアシスタントに変更を頼めます。必要ならソース全体も使えます。

バックエンドは付属しますか？

いいえ。完全なアプリは必要なバックエンドを示し、サーバーで自分のものを接続します。デザインはサンプルデータで動きます。

デザインは変更できますか？

はい。デザインタブでブランドカラー、色、フォント、角をクレジットなしで設定できます。残りはアシスタントが変更します。

公開にはどのプランが必要ですか？

Creator 以上で、ご自身の Apple と Google のアカウントでビルドとストアへのアップロードができます。Premium テンプレートのアプリは、ウェブサイトを接続すればどのプランでもビルドできます。

ソースをダウンロードできますか？

はい。ワークスペースでプラン、クレジット、有料テンプレートのいずれかを購入済みなら、ソースをダウンロードまたは GitHub にプッシュできます。Premium テンプレートのアプリはウェブサイトの接続も必要です。

以前の FluxNative で作った場合は？

コピーはそのまま動きます。アプリの言語や通貨などの新機能に更新するにはアシスタントに頼んでください。最後のセットアップ手順です。

自分のアプリにしてみませんか？

Storyloom AI Bedtime Story App から始めて、チャットで何でも変更できます。コピーには完全なソースコードが含まれます。

無料でコピー。クレジットカード不要。