LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@5naokichi

【ClaudeCode開発】古米度診断ツールで年齢を楽しく表現してみた【WordPress × JavaScript】

Posted at

はじめに

誕生日を入力するだけで、あなたの年齢を「古米」で表現するユニークな診断ツールを開発しました。例えば25歳なら「古古古古古古古古古古古古古古古古古古古古古古古古古米」といった具合に、年齢分だけ「古」を並べてお米の名前を生成します。

本記事について

今回の古米度診断開発およびこの記事執筆は、Claude Code（Anthropic社のAI）との協業で進めました。AI時代の新しい開発スタイルの実践例として参考になれば幸いです。

この記事で分かること

  • JavaScriptによる年齢計算とDOM操作の実装
  • WordPressでの使用回数カウンター機能の作り方
  • レスポンシブ対応の日付選択UIの実装
  • シンプルで効果的なシェア機能の作り方

この記事の対象者

  • JavaScript初心者から中級者
  • WordPressでインタラクティブなコンテンツを作りたい方
  • ユニークなWebアプリのアイデアを探している開発者

動作環境・使用技術

  • 開発環境: Windows 11
  • 言語: HTML5, CSS3, Vanilla JavaScript
  • CMS: WordPress
  • 開発AI: Claude Code
  • レスポンシブデザイン対応（iPhone SE～デスクトップ）

自己紹介

ホネグミ代表、応用情報技術者の資格を持つエンジニア×マーケターです。
これまでIT系の会社役員を4年、独立して4年目になります。
クライアントワークでは「こうしたい」を技術で形にすることを専門としていますが、最近は思想駆動型サービス開発の第一人者として、AIを活用した様々なサービス開発を続けています。

完成品・デモ

image.png

実装した機能：

  • 年/月/日の3段階日付選択
  • リアルタイム年齢計算
  • 年齢に応じた「古米」名生成
  • 累計診断回数カウンター
  • SNSシェア機能（X、LINE）
  • レスポンシブ対応

技術構成

アーキテクチャ概要

フロントエンド（JavaScript）
  ├─ 日付選択UI
  ├─ 年齢計算ロジック
  ├─ 古米名生成機能
  └─ シェア機能

WordPressバックエンド（PHP）
  ├─ Ajax カウンター機能
  └─ DiagnosisCounterSystem

使用技術スタック

  • フロントエンド: HTML5, CSS3, Vanilla JavaScript (ES6)
  • バックエンド: WordPress (PHP 8.2)
  • Ajax通信: WordPressの標準Ajax機能
  • UI: カスタムCSS（レスポンシブ対応）

実装手順

1. 基本的なHTML構造の作成

rice-checker.html
<div id="rice-checker-container">
    <h1>🌾 あなたの【古米度】診断</h1>
    <p>誕生日を入力すると、現在の正確な年齢分だけ「古」が並んだお米の名前を教えます！</p>
    
    <div class="input-section">
        <label>誕生日を選択してください：</label>
        <div class="date-inputs">
            <select id="riceChecker-year"><option value="">年</option></select>
            <select id="riceChecker-month"><option value="">月</option></select>
            <select id="riceChecker-day"><option value="">日</option></select>
        </div>
        <button id="riceChecker-checkButton">古米度を診断する</button>
    </div>
    
    <div id="riceChecker-result" class="result-section">
        <!-- 結果表示エリア -->
    </div>
</div>

2. 年齢計算ロジックの実装

age-calculation.js
function calculateAge(birthDate, currentDate) {
    let age = currentDate.getFullYear() - birthDate.getFullYear();
    const monthDiff = currentDate.getMonth() - birthDate.getMonth();
    
    // 誕生日前の場合は年齢を1つ減らす
    if (monthDiff < 0 || (monthDiff === 0 && currentDate.getDate() < birthDate.getDate())) {
        age--;
    }
    
    return age;
}

この関数のポイント：

  • 単純な年の差分だけでなく、月日も考慮して正確な年齢を計算
  • 誕生日前かどうかの判定で精密な年齢算出を実現

3. 古米名生成機能の実装

rice-name-generator.js
function generateRiceName(age) {
    let riceName = '';
    let className = 'fresh';
    
    if (age === 0) {
        riceName = '新米';
        className = 'fresh';
    } else if (age === 1) {
        riceName = '古米';
        className = 'old';
    } else if (age === 2) {
        riceName = '古古米';
        className = 'old';
    } else {
        riceName = '古'.repeat(age) + '米';
        className = 'very-old';
    }
    
    return { riceName, className };
}

4. レスポンシブ対応の実装

responsive-design.css
/* iPhone SE (375px以下) 対応 */
@media (max-width: 380px) {
    .date-inputs {
        justify-content: center;
        gap: 5px;
    }
    
    select {
        width: 65px;
        font-size: 14px;
        padding: 8px 4px;
        min-width: 60px;
    }
    
    button {
        width: 100%;
        font-size: 16px;
    }
}

/* 一般的なスマホサイズ */
@media (max-width: 600px) and (min-width: 381px) {
    select {
        width: 80px;
        font-size: 15px;
        padding: 10px 8px;
    }
}

5. WordPressとの連携（カウンター機能）

functions.php
// 古米度診断用カウンター機能
function rice_checker_counter_increment() {
    DiagnosisCounterSystem::increment_counter('rice_checker');
}

function rice_checker_counter_get() {
    DiagnosisCounterSystem::get_counter('rice_checker');
}

// Ajax アクション登録
add_action('wp_ajax_rice_counter', 'rice_checker_counter_increment');
add_action('wp_ajax_nopriv_rice_counter', 'rice_checker_counter_increment');
add_action('wp_ajax_rice_get_count', 'rice_checker_counter_get');
add_action('wp_ajax_nopriv_rice_get_count', 'rice_checker_counter_get');
counter-integration.js
// カウンター更新機能
function updateUsageCounter() {
    fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'action=rice_counter'
    })
    .then(response => response.text())
    .then(count => {
        document.getElementById('total-count').textContent = count;
        // カウント更新時のアニメーション効果
        const countElement = document.getElementById('total-count');
        countElement.style.transform = 'scale(1.2)';
        setTimeout(() => {
            countElement.style.transform = 'scale(1)';
        }, 300);
    });
}

工夫したポイント・苦労した点

1. 日付選択UIの使いやすさ

  • 年・月・日を別々のセレクトボックスに分けることで、スマートフォンでも操作しやすい設計
  • 月が選択されたら、その月の日数に応じて日の選択肢を動的に更新
  • うるう年も正確に対応

2. レスポンシブ対応の徹底

iPhone SE（375px）という小さな画面でも快適に使えるよう、以下の工夫を実施：

  • セレクトボックスの幅とフォントサイズを画面サイズに応じて調整
  • ボタンはスマホでは全幅表示
  • 文字サイズとパディングを最適化

3. 年齢計算の精度

単純な年の差分ではなく、月日まで考慮した正確な年齢計算を実装。これにより「まだ誕生日が来ていない場合」も正確に処理できます。

4. エンターテイメント性の追求

  • 50歳以上は「レジェンド級」、30歳以上は「ベテラン」などの特別メッセージ
  • 年齢に応じた色分け表示（新米=緑、古米=オレンジ、古古米以上=赤）
  • シェア機能で結果を友人と共有しやすい設計

まとめ

古米度診断は、シンプルなアイデアから始まったユニークなWebアプリケーションです。技術的には決して複雑ではありませんが、以下の学びがありました：

  1. UXの重要性: どれだけシンプルなアプリでも、使いやすさが利用者数に直結する
  2. レスポンシブ対応の必要性: スマートフォンユーザーを意識した設計は必須
  3. エンターテイメント性: 技術だけでなく、「楽しさ」が拡散の鍵
  4. 継続的な改善: ユーザーフィードバックを基にした機能改善の大切さ

今回の開発を通じて、Claude Codeとの協業による効率的な開発プロセスも体験できました。AIを活用することで、アイデアから実装まで大幅に時間短縮できるのは大きなメリットです。

サービスはこちら

免責事項

本ツールはエンターテイメント・パロディ目的で作成された診断ツールです。診断結果は架空のものであり、実際のお米の品質や保存状態とは一切関係ありません。本ツールの使用により生じた損害について、制作者は一切の責任を負いません。

0
1
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
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?