🐕

【個人開発】動物年齢翻訳アプリ「見守りレトリバー」🐕ペットは人間でいうと何歳?

に公開

「うちの子、人間でいうと何歳なの?」

そんな素朴な疑問に答えるために、このアプリを作りました。

犬、猫、うさぎはもちろん、ゾウやペンギン、カピバラまで対応!
動物の種類と年齢を入力するだけで、人間換算の年齢が一目でわかります🐕✨

🌟 実際に使ってみる

TL;DR(要約)

技術スタック

  • フロントエンド: Vanilla JavaScript
  • バックエンド: FastAPI (Python)
  • デザイン: レスポンシブ対応のモダンUI

主な機能

  1. 人間年齢換算: 30種類以上の動物に対応
  2. 年齢比較機能: 飼い主とペットの年齢を棒グラフで比較
  3. 記念フォト: 写真に人間年齢のスタンプを自動付与
  4. 健康アドバイス: 年齢に応じたケア情報を表示

なぜ作ったのか

私は子供の頃から色々な動物と暮らしてきました。今はうさぎを飼っているのですが、知人によく聞かれるのがこの質問です。

「うさぎって、人間でいうと何歳なの?」

確かに、犬や猫の年齢換算はよく見かけますが、うさぎやハムスター、ましてやゾウやペンギンとなると、情報が少ない…😅

そこで、あらゆる動物の「人間年齢」がパッとわかるアプリを作ろうと思いました。

短い命だからこそ、大切にしたい

多くのペットは人間より寿命が短いです。だからこそ、今この瞬間の年齢を知り、適切なケアをすることが大切だと考えています。

  • 成長期には栄養管理を
  • 成犬・成猫期には運動を
  • シニア期には体の変化に注意を

「見守りレトリバー」という名前には、「ずっと見守り続けたい」という想いを込めました。

完成したもの

ブラウザだけで動く、シンプルで使いやすい年齢換算アプリです。

主な機能

🐾 30種類以上の動物に対応: 犬(小・中・大型)、猫、うさぎ、ハムスター、鳥類、爬虫類、そして象やクジラまで
📊 年齢比較機能: あなたとペットの年齢を視覚的に比較
📷 記念フォト作成: 写真に人間年齢のバッジを自動で付与
💡 健康アドバイス: 年齢に応じたケア情報と理学療法士視点のアドバイス
🎨 モフモフ度判定: 動物ごとのユニークな特性を数値化

🐕 🦝 🤖

システムアーキテクチャ

全体構成図

データフロー詳細

1. 年齢換算リクエスト

ユーザー入力(動物種類 + 年齢) → /api/retriever/calculate
→ AgeConverter.convert() → 動物別ロジックで計算
→ JSON返却(人間年齢、ステージ、アドバイスなど)
→ UI更新(アニメーション付き)

2. 記念フォト作成

写真アップロード → Canvas API → 画像読み込み
→ 人間年齢バッジを右下に描画 → プレビュー表示
→ ダウンロード or SNSシェア

3. 年齢比較

飼い主年齢入力(任意) → ペット人間年齢と比較
→ 棒グラフの高さ計算 → アニメーション表示
→ 比較メッセージ生成(「〇歳先輩です!」など)

APIエンドポイント

POST /api/retriever/calculate

リクエスト:

{
  "animal_type": "dog_small",
  "age_years": 3,
  "age_months": 6
}

レスポンス:

{
  "human_age": 32,
  "stage": "Adult",
  "emoji": "🐕",
  "advice": {
    "title": "活動的な時期",
    "care": "定期的な運動を心がけましょう。",
    "checkup": "年1回の健康診断を。【PT視点】筋肉量維持のため..."
  },
  "fluffiness": {
    "label": "モフモフ度",
    "score": 85,
    "comment": "安定した上質な手触り。"
  }
}

技術的な工夫

1. 動物別の精密な換算ロジック

単純な掛け算ではなく、成長段階ごとに異なる倍率を適用しています。

うさぎの例

if animal_type == AnimalType.RABBIT.value:
    if total_years < 1: 
        return int(total_years * 21)      # 1歳未満: 急成長
    elif total_years < 2: 
        return 21 + int((total_years - 1) * 6)  # 1-2歳: 成長鈍化
    else: 
        return 27 + int((total_years - 2) * 6)  # 2歳以降: 安定

なぜこうするのか?

  • うさぎは1歳で性成熟(人間の21歳相当)に達します
  • その後は緩やかに年を取ります
  • この生物学的な特性を反映した計算式にしています

犬のサイズ別換算

if animal_type == AnimalType.DOG_SMALL.value: 
    return base_age + int(years_after_2 * 4)   # 小型犬: ゆっくり
elif animal_type == AnimalType.DOG_MEDIUM.value: 
    return base_age + int(years_after_2 * 5)   # 中型犬: 中間
elif animal_type == AnimalType.DOG_LARGE.value: 
    return base_age + int(years_after_2 * 7)   # 大型犬: 早い

大型犬ほど早く歳を取る特性を正確に再現しています。

2. 特殊な動物たちの換算

短命な動物

# 蝶々 (寿命数ヶ月)
if animal_type == AnimalType.BUTTERFLY.value:
    return int(total_years * 12 * 13)  # 1ヶ月 ≈ 13歳

# ハムスター (寿命2-3年)
if animal_type == AnimalType.HAMSTER.value: 
    return int(total_years * 12 * 2.75)

長寿な動物

# リクガメ (寿命100年超)
if animal_type == AnimalType.TORTOISE.value: 
    return int(total_years * 0.8)

# クジラ (人間とほぼ同じ寿命)
if animal_type == AnimalType.WHALE.value: 
    return int(total_years * 1.0)

ロボット(遊び心)

# ロボット (1年 = 1メジャーアップデート)
if animal_type == AnimalType.ROBOT.value:
    return int(total_years * 10)  # 技術進化の速さを表現

3. AIコスト0円の秘密

このアプリは「Gemini」などの生成AIを使っていません!

// 「匂いを嗅いで調査中...」は演出
document.getElementById('loading-overlay').style.display = 'flex';
await new Promise(r => setTimeout(r, 1500));  // 1.5秒待機

計算自体は数ミリ秒で完了しますが、あえて待機時間を入れることで:

  • ユーザーに「しっかり分析している」感を与える
  • 結果表示までの期待感を高める
  • アニメーション演出の時間を確保

なぜAIを使わないのか?

  • コスト削減: 誰でも無料で使えるように
  • 高速レスポンス: 計算ロジックは瞬時に完了
  • 安定性: APIエラーの心配なし
  • 透明性: 計算根拠が明確

ただし、計算ロジック自体はGeminiに書いてもらいました。AIの力を借りつつ、ランニングコストは0円という、いいとこ取りの設計です😊

4. Canvas APIでの写真加工

function drawCanvas(age) {
    if (!uploadedImage) return;
    
    // 画像を描画
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(uploadedImage, 0, 0, canvas.width, canvas.height);
    
    // バッジを描画(右下)
    const badgeW = 120, badgeH = 120;
    const badgeX = canvas.width - badgeW - 10;
    const badgeY = canvas.height - badgeH - 10;
    
    // 円形の背景
    ctx.beginPath();
    ctx.arc(badgeX + badgeW / 2, badgeY + badgeH / 2, badgeW / 2, 0, Math.PI * 2);
    ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
    ctx.fill();
    ctx.strokeStyle = "#8D6E63";
    ctx.lineWidth = 3;
    ctx.stroke();
    
    // テキスト描画
    ctx.fillStyle = "#3E2723";
    ctx.font = "bold 20px 'Noto Sans JP'";
    ctx.textAlign = "center";
    ctx.fillText("人間年齢", badgeX + badgeW / 2, badgeY + badgeH / 2 - 10);
    
    ctx.font = "bold 40px 'Outfit'";
    ctx.fillStyle = "#FF7043";
    ctx.fillText(age + "歳", badgeX + badgeW / 2, badgeY + badgeH / 2 + 30);
}

以前はスタンプ機能(還暦の赤いちゃんちゃんこ、王冠など)もありましたが、画像認識AIを使う必要があったため削除しました。

無料にこだわることで、誰でも気軽に使えるアプリになりました。

5. 年齢比較の視覚化

// 棒グラフの高さ計算(最大120px)
const maxAge = Math.max(ownerAge, petAge, 10);
const userH = (ownerAge / maxAge) * 120;
const petH = (petAge / maxAge) * 120;

setTimeout(() => {
    document.getElementById('comp-user-bar').style.height = userH + "px";
    document.getElementById('comp-pet-bar').style.height = petH + "px";
}, 100);

// 比較メッセージ生成
if (petAge > ownerAge) {
    const diff = petAge - ownerAge;
    resultText = `ペットの方が ${diff}歳 先輩です!🙇`;
} else if (petAge < ownerAge) {
    const diff = ownerAge - petAge;
    resultText = `あなたの方が ${diff}歳 お兄さん/お姉さんです!👶`;
} else {
    resultText = `まさかの同い年(タメ)です!🤝`;
}

6. 健康アドバイスの生成

理学療法士(PT)の視点を取り入れた、実用的なアドバイスを提供しています。

def get_advice(human_age: int, animal_type: str) -> dict:
    pt_baby = "【PT視点】骨格形成の大事な時期。滑りやすいフローリングは関節形成不全のリスクになります。カーペットなどで足元を安定させましょう。"
    
    pt_active = "【PT視点】筋肉量維持のため、平坦な道だけでなく、適度な坂道や砂利道など多様な地面を歩かせ、深層筋(インナーマッスル)を刺激しましょう。"
    
    pt_senior = "【PT視点】関節可動域が狭くなりがちです。無理のない範囲でのストレッチや、温湿布(ホットパック)で血流を促してから動くのがおすすめ。"
    
    # 動物別の個別アドバイス
    if animal_type == AnimalType.CAPYBARA.value:
        advice["title"] = "癒やしの温泉マスター"
        advice["care"] = "のんびり屋ですが水辺が必要です。温かいお湯を用意してあげると喜びます。"

UI/UXデザインの工夫

温かみのあるアースカラー

:root {
    --primary-color: #8D6E63;      /* Warm Brown */
    --secondary-color: #D7CCC8;    /* Light Brown */
    --accent-color: #FF7043;       /* Warm Orange */
    --bg-color: #F5F5F5;
    --card-bg: #FFFFFF;
    --text-main: #3E2723;
    --shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    --radius: 20px;
}

動物と暮らす温かい日常をイメージした配色です。

カウントアップアニメーション

function animateValue(id, start, end, duration) {
    const range = end - start;
    const increment = end > start ? 1 : -1;
    const stepTime = Math.abs(Math.floor(duration / range));
    let current = start;
    
    const timer = setInterval(function () {
        current += increment;
        document.getElementById(id).textContent = current;
        if (current == end) {
            clearInterval(timer);
        }
    }, stepTime);
}

// 0から実際の年齢までカウントアップ
animateValue("human-age-num", 0, data.human_age, 1000);

数字が1ずつ増えていく演出で、ワクワク感を演出しています。

レスポンシブ対応

@media (max-width: 600px) {
    .human-age-value {
        font-size: 2.5rem;  /* モバイルでは少し小さく */
    }
}

スマホでも快適に使える設計です。

対応動物一覧

一般的なペット

  • 🐕 小型犬、中型犬、大型犬
  • 🐈 猫
  • 🐇 うさぎ
  • 🐹 ハムスター・小動物

鳥類

  • 🐦 小鳥(インコ等)
  • 🦜 中型鳥(オカメインコ等)
  • 🦅 大型鳥(オウム等)
  • 🦉 フクロウ
  • 🦩 フラミンゴ
  • 🐧 ペンギン

爬虫類・その他

  • 🐢 リクガメ
  • 🦎 ヤモリ・トカゲ
  • 🐸 カエル
  • 🐍 ヘビ

大型動物

  • 🐘 ゾウ
  • 🦒 キリン
  • 🐋 クジラ

プロジェクト・オールスターズ(遊び心)

  • 🦝 アライグマ
  • 🛀 カピバラ
  • 🕳️ モグラ
  • 🦊 キツネ
  • 🦫 ビーバー
  • 🦇 コウモリ
  • 🦙 アルパカ
  • 🦋 蝶々
  • 🐿️ リス
  • 🧍 ミーアキャット
  • 🤖 ロボット(Voidoll)

合計30種類以上! マニアックな動物も楽しんでください𓃰

健康管理の意識向上

「シニア期に入ったから、関節に気をつけよう」
「まだ成長期だから、栄養しっかり与えなきゃ」

年齢段階を知ることで、適切なケアを意識するきっかけになります。

苦労した点と解決策

1. 換算式の精度

課題: インターネット上の換算表は情報源によってバラバラ

解決策:

  • 複数の獣医学資料を参照
  • 成長段階ごとの生物学的特性を考慮
  • 実際の飼い主の感覚とも照合

2. 珍しい動物の情報不足

課題: ゾウやクジラの「人間換算年齢」は資料が少ない

解決策:

  • 平均寿命から逆算
  • 性成熟年齢を基準に推定
  • 「だいたいこのくらい」という感覚的な理解を優先

3. 無料化とのトレードオフ

課題: 画像認識を使ったスタンプ機能を実装したかったが、AIコストがかかる

解決策:

  • 無料であることを最優先に
  • スタンプ機能(還暦の赤いちゃんちゃんこ、王冠など)は削除
  • シンプルな年齢バッジのみに絞ることで、誰でも手軽に使えるアプリに

今後の展開

機能追加案

  • 成長記録機能: 定期的に診断して成長グラフを作成
  • 多頭飼い対応: 複数のペットをまとめて管理
  • 健康チェックリスト: 年齢に応じた検診項目を提案
  • コミュニティ機能: 同じ年齢のペットを飼っている人と交流

技術的改善

  • PWA化: アプリとしてインストール可能に
  • 多言語対応: 海外のペットオーナーにも
  • 音声入力: 「うちの猫、3歳」と話すだけで診断
  • API公開: 他のペット関連サービスとの連携

まとめ

「見守りレトリバー」が、あなたとペットの時間をより豊かにするお手伝いができれば幸いです。

技術的なポイント:

  • 動物別の精密な換算ロジック(生物学的特性を反映)
  • AIコスト0円の完全無料設計
  • Canvas APIでの写真加工
  • 理学療法士視点の健康アドバイス

UX設計のポイント:

  • 温かみのあるアースカラー
  • カウントアップアニメーションで楽しさを演出
  • 年齢比較機能で飼い主との関係性を可視化
  • 30種類以上の動物に対応

個人開発者としての想い:

  • 無料であることを最優先に
  • シンプルで誰でも使える設計
  • Geminiに計算ロジックを書いてもらい、効率的に開発
  • マニアックな動物も楽しんでもらいたい

おわりに

「うちの子は人間でいうと何歳なの?」

この素朴な疑問に答えるために作った「見守りレトリバー」。
ゾウやペンギンを飼っている方も、是非使ってください𓃰

人間より寿命が短いからこそ、いい相棒として楽しく暮らしたいですよね。
マニアックな動物もこんな感じなんだーと発見してもらえたら幸いです。

大切なのは、今この瞬間を一緒に楽しむこと。
このアプリが、そのきっかけになれば嬉しいです!

🚀 デモ

実際に動くアプリをぜひお試しください!

👉 見守りレトリバーを使ってみる

  • インストール不要、ブラウザだけで動作
  • 完全無料で使えます
  • スマホにも対応

リンク

ソースコードはこちらで公開しています!

https://github.com/miki-mini/my-line-bots

ここまで読んでいただきありがとうございました🐕💕


Google Cloud Innovators メンバー。
実装コードの多くは、Geminiに指示して生成したものです。

Discussion