気づいたら観葉植物が枯れていた、という経験はないでしょうか。水やりのタイミングを忘れて、1週間後に慌てて大量の水を与えてしまう——そんな日常から生まれるのが「植物ダイアリーアプリ」へのニーズです。
そしてこのアプリ、Rorkを使えば数時間で動くプロトタイプが作れます。写真撮影・水やり記録・リマインダー通知という、一見複雑な機能の組み合わせでも、Rorkのプロンプトで一気に実装できます。このチュートリアルでは、ゼロからアプリを完成させるまでの全工程を順番に紹介します。
完成するアプリの機能
作るのは「緑のともだち」という植物管理アプリです。以下の機能を実装します。
- 植物の登録: 名前・種類・写真をまとめて登録
- 水やり記録: ワンタップで記録し、最後の水やりからの経過日数を表示
- 成長記録タイムライン: 日付つきで写真を積み重ねるギャラリー機能
- リマインダー通知: 次の水やり日時を設定してプッシュ通知（サーバー不要）
この機能セットは、Rorkでの実装練習として絶好の難易度です。カメラ・ローカルデータ保存・ローカル通知という、多くのアプリで繰り返し使う「3大機能」を一度に習得できます。
Step 1: 植物の一覧画面と登録フォームを作る
まず、植物を管理するリスト画面と登録フォームを生成します。次のプロンプトをRorkに貼り付けてください。
「緑のともだち」という植物管理アプリを作ってください。
メイン画面は登録した植物のカードリスト表示。
各カードに植物の写真・名前・「最後の水やりから〇日」という表示が入ります。
右上の「+」ボタンをタップすると植物登録フォームが開きます。
フォームには以下のフィールドを用意してください:
- 植物の名前（テキスト入力）
- 植物の種類（サボテン/多肉植物/観葉植物/草花/その他）
- 写真（カメラ撮影またはライブラリから選択）
- 水やり頻度（毎日/2日に1回/週1回/2週間に1回）
データはローカルストレージ（AsyncStorage）に保存してください。
このプロンプトで、リスト画面・登録フォーム・AsyncStorage保存が一度に生成されます。Rork Companionアプリで確認すると、植物のカードが並ぶメイン画面が表示されるはずです。
ここで「写真が表示されない」という場合は、「画像URIの保存形式を確認して、expo-image-pickerで取得したローカルURIをそのままAsyncStorageに保存するよう修正してください」と追加で指示してみてください。
Step 2: 水やり記録機能を追加する
次に、ワンタップで水やりを記録する機能を追加します。
以下の機能を追加してください。
1. 各植物カードに「水やり💧」ボタンを追加
2. ボタンをタップすると現在の日時を水やり記録として保存
3. 最後の水やりからの経過日数を「○日前」で表示
4. 登録した水やり頻度に基づき「次の水やり: △日後」を計算して表示
5. 水やりが必要な植物（次の水やり日を過ぎている）はカードを赤色で強調表示
水やり履歴はすべて保存し、後から確認できるようにしてください。
「○日前」という相対時間の表示と、赤色の強調表示がポイントです。生成されたコードに、日付計算ロジックが含まれているはずです。
// 水やりから何日経過したかを計算する関数
const getDaysAgo = (lastWateredDate) => {
const now = new Date();
const last = new Date(lastWateredDate);
const diffMs = now - last;
// ミリ秒 → 日数に変換（端数は切り捨て）
return Math.floor(diffMs / (1000 * 60 * 60 * 24));
};
// 次の水やりまでの残り日数を計算
const getDaysUntilNextWatering = (lastWateredDate, frequencyDays) => {
const daysAgo = getDaysAgo(lastWateredDate);
return Math.max(0, frequencyDays - daysAgo);
};この関数で getDaysUntilNextWatering が 0 以下になった植物に赤いバッジを表示します。「見た目は変えたくない、でも水やりが必要な植物をすぐ見つけたい」という自分のニーズから考えると、赤バッジよりカード全体の左ボーダーを赤くする方が洗練されている気がします。「水やりが必要な植物のカード左端に赤いボーダーを追加してください」と追加プロンプトで調整してみてください。
Step 3: 成長記録タイムラインを追加する
植物の成長を写真で記録していくタイムライン機能を追加します。
各植物の詳細画面を作成し、以下を追加してください。
1. 「成長記録を追加」ボタンで写真とメモを記録できる
2. 追加した記録を日付つきのタイムライン形式で表示（新しい順）
3. 写真は3列グリッドで一覧表示できる「写真一覧」タブも用意する
4. 最古の写真と最新の写真を並べて「ビフォーアフター」表示ができる機能
タイムラインは上が新しく、下が古い順にソートしてください。
成長記録タイムラインは、ユーザーが長期間アプリを使い続けるための大切な仕掛けです。「こんなに育った！」という感動がアプリへの愛着につながります。数ヶ月後に見返したとき、小さかった芽が大きく育った写真の並びは、それだけで価値があります。
Step 4: リマインダー通知を設定する
最後に、水やりリマインダーのプッシュ通知を追加します。サーバー不要のローカル通知で実装します。
各植物に水やりリマインダー通知を設定できる機能を追加してください。
1. 詳細画面に「リマインダーを設定」ボタンを追加
2. ボタンをタップすると通知時刻を選択できる（時・分のピッカー）
3. 設定した水やり頻度に基づき、繰り返し通知をスケジュールする
4. 通知テキスト: 「[植物名]に水やりの時間です💧」
5. 通知許可が未取得の場合、許可リクエストダイアログを表示する
expo-notificationsを使ったローカル通知で実装してください（サーバー不要）。
ローカル通知は expo-notifications ライブラリで実装されます。生成されたコードには通知許可リクエスト・スケジューリング・キャンセルが含まれています。
通知機能はシミュレーターでは動作しないことが多いので、Rork Companion アプリを使って実機でテストしてください。初めて実機でプッシュ通知が届いたときは、「このアプリ、ちゃんと動いてる」という達成感があります。
詳細な通知の実装パターンについては、expo-notifications を使ったローカル通知完全ガイドも参考にしてください。
つまずきやすいポイントと対処法
実際に実装してみると、いくつか引っかかりやすいポイントがあります。
写真の表示が遅い・読み込み失敗する場合: 「expo-imageライブラリを使って画像キャッシュを最適化してください」と追加で指示すると改善されます。expo-image は Image コンポーネントより高性能なキャッシュ機能を持っています。
アプリを再起動するとデータが消える場合: データ読み込みのタイミングの問題です。「アプリ起動時（useEffectの[] 依存配列内）でAsyncStorageからデータを読み込むよう修正してください」と指示してみてください。
通知が届かない場合: Expo Goではローカル通知に制限があります。Rork Companionまたは開発ビルドを使って実機テストを行ってください。
全体を振り返って
植物ダイアリーアプリを通じて、カメラ・ローカルデータ保存・プッシュ通知という実用的な3機能を一度に習得できました。これらの機能はほとんどのアプリに応用できます。今日実装したデータ保存ロジックは、日記アプリ・習慣トラッカー・読書記録アプリにも流用できます。
まずは完成したアプリをApp Storeに出してみることを次の目標にしてみてください。申請の手順については、Rorkで作ったアプリをApp Storeに公開する完全ガイドを参考にしてください。
植物の写真認識や病気診断機能など、AIを活用したさらに高度な機能に興味があれば、Rork のAIカメラを使った植物ケア診断アプリ実装ガイドもご覧いただけます。