🎀✨ Koroちゃんの超かわいいおみくじアプリ 🐰🔮
🎀✨ Koro-chan's Super Cute Fortune-Telling App 🐰🔮
🌸Koro's Kawaii Omikuji🌸
React で作る超可愛い365日運勢アプリ 🎋
Super cute 365-day fortune app made with React 🎋
100種類の日本語&英語バイリンガル翻訳🎌
100 different bilingual Japanese & English translations 🎌
MarkdownAI (v0,ChatGPT,Gemini,Claude,Copilot AI etc...)
Koroちゃん（兎耳コロちゃん）です🐰
今日は、Next.jsを使って、とってもキラキラで可愛いKoroちゃんのおみくじアプリを一緒に作っちゃいましょう🌟
Hi, I'm Koro-chan (Usamimi Koro-chan) 🐰
Today, let's create a super sparkly and cute Koro-chan's fortune-telling app together using Next.js! 🌟
🌈 このアプリの魅力ポイント
🌈Charm Points of This App
- 💖 100種類以上の日本語と英語のおみくじメッセージ！運勢たくさん！
Over 100 enchanting fortune messages in both Japanese and English! So many destinies to discover! - 🎉 ふわふわハートとキラキラエフェクトでめちゃかわいい！
Ultra-adorable with fluffy floating hearts and twinkling sparkle effects! - 🌙 お昼も夜も使えるダークモード対応！
Usable day and night with our magical dark mode transformation! - 📱 スマホでもパソコンでも、どこでも占えちゃう！
Divine your fortune anywhere - on your pocket crystal ball (smartphone) or your desktop magic mirror (computer)! - 🔤 おみくじの文字サイズが自動で調整されるの、すごい！
The fortune message magically resizes itself - how wonderfully clever!
🍭 使った技術
🍭 Our Spellbinding Toolkit
-
Next.js (App Router)
- Webアプリの魔法の杖✨
- The magic wand for crafting web app wonders ✨ -
Tailwind CSS
- 見た目をかわいくする魔法の絵の具🎨
- The enchanted paintbrush for creating cuteness 🎨 -
shadcn/ui
- 便利な魔法のUIコンポーネント箱📦
- A treasure chest of handy magical UI components 📦 -
Lucide Icons
- かわいいアイコンがいっぱいの宝石箱💎
- A jewelry box overflowing with the cutest little icons 💎 -
React Hooks
- アプリをもっと賢くする魔法の呪文書📜
- The spell book for making our app extra smart and savvy 📜
🎨 完成形はこんな感じ
🎨 Here's What the Finished Product Looks Like
かわいいでしょ？😍 それじゃあ、コードを見ていきましょう！
Isn't it cute? 😍 Now, let's take a look at the code!
📝魔法のコード全文
📝Full text of the magic code
まずは、KoroOmikuji.tsxというファイルを作って、以下のコードを書いてね！
First, create a file called KoroOmikuji.tsx and write the following code!
'use client'
import { useState, useEffect, useRef } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Heart, Sparkles, Star } from 'lucide-react'
import Image from 'next/image'
export default function KoroOmikuji() {
const [isRevealed, setIsRevealed] = useState(false)
const [isShaking, setIsShaking] = useState(false)
const [fortune, setFortune] = useState({ ja: '', en: '', luck: '' })
const fortuneRef = useRef<HTMLParagraphElement>(null)
const fortunes = [
{ ja: "キラキラ幸せがいっぱい降り注ぐよ♪", en: "Sparkling happiness rains down on you♪", luck: "超大吉" },
{ ja: "夢見るキミの願い事、きっと叶うよ☆", en: "Your dreamy wish will surely come true☆", luck: "大吉" },
// ... (他のおみくじメッセージ)
];
const drawFortune = () => {
setIsShaking(true)
setTimeout(() => {
const randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)]
setFortune(randomFortune)
setIsRevealed(true)
setIsShaking(false)
}, 1000)
}
useEffect(() => {
const adjustFontSize = () => {
if (fortuneRef.current) {
let fontSize = 20;
fortuneRef.current.style.fontSize = `\${fontSize}px`;
while (fortuneRef.current.scrollWidth > fortuneRef.current.offsetWidth && fontSize > 10) {
fontSize--;
fortuneRef.current.style.fontSize = `\${fontSize}px`;
}
}
};
if (isRevealed) {
adjustFontSize();
window.addEventListener('resize', adjustFontSize);
}
return () => window.removeEventListener('resize', adjustFontSize);
}, [isRevealed, fortune]);
return (
<Card className="w-full max-w-md bg-gradient-to-br from-pink-50 to-purple-50 dark:from-pink-950 dark:to-purple-950 overflow-hidden">
<CardContent className="p-6">
<div className="flex flex-col items-center gap-6 text-center relative">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{[...Array(12)].map((_, i) => (
<Heart
key={i}
className="absolute text-pink-200 animate-float"
style={{
left: `\${Math.random() * 100}%`,
top: `\${Math.random() * 100}%`,
animationDelay: `\${Math.random() * 5}s`,
width: `\${Math.random() * 20 + 10}px`,
height: `\${Math.random() * 20 + 10}px`
}}
/>
))}
</div>
<div className="space-y-2">
<h1 className="text-4xl font-bold text-pink-400 font-serif tracking-wide">Koro's Omikuji</h1>
<p className="text-lg text-pink-300">キラキラ☆おみくじ</p>
</div>
<div className="relative w-64 h-64">
<Image
src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/S__66600971.jpg-T8RIoerNLqMDUjhk8KNN1p4yD5rQYP.jpeg"
alt="Koro-chan"
width={256}
height={256}
className={`rounded-full border-4 border-pink-200 shadow-xl \${isShaking ? 'animate-shake' : ''}`}
/>
<Sparkles className="absolute top-0 right-0 text-yellow-300 animate-pulse" />
<Star className="absolute bottom-0 left-0 text-yellow-300 animate-pulse" />
</div>
<div className="relative w-full min-h-[180px] flex items-center justify-center">
{!isRevealed ? (
<Button
onClick={drawFortune}
className="bg-pink-400 hover:bg-pink-500 text-white px-8 py-4 rounded-full shadow-lg transform transition hover:scale-105 font-medium text-lg"
>
おみくじを引く♪
</Button>
) : (
<div className="bg-white/95 dark:bg-black/95 p-4 rounded-2xl shadow-xl w-full transform animate-unfold">
<div className="mb-2">
<span className="text-2xl font-bold text-pink-500">{fortune.luck}</span>
</div>
<p
ref={fortuneRef}
className="text-xl font-medium text-pink-500 dark:text-pink-300 mb-2 whitespace-nowrap overflow-hidden"
>
{fortune.ja}
</p>
<p className="text-sm text-pink-400 dark:text-pink-200">
{fortune.en}
</p>
<div className="flex justify-center gap-2 mt-3">
<Heart className="text-pink-400 w-5 h-5 animate-bounce" fill="currentColor" />
<Heart className="text-pink-300 w-5 h-5 animate-bounce delay-100" fill="currentColor" />
<Heart className="text-pink-200 w-5 h-5 animate-bounce delay-200" fill="currentColor" />
</div>
</div>
)}
</div>
{isRevealed && (
<Button
onClick={() => setIsRevealed(false)}
variant="ghost"
className="text-pink-400 hover:text-pink-500 hover:bg-pink-50"
>
もう一度占う♡
</Button>
)}
<div className="text-sm text-pink-300">
@KoroVRM
</div>
</div>
</CardContent>
<style jsx global>{`
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(20deg); }
}
@keyframes unfold {
0% { transform: scaleY(0.1); opacity: 0; }
100% { transform: scaleY(1); opacity: 1; }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
.animate-float {
animation: float 3s ease-in-out infinite;
}
.animate-unfold {
animation: unfold 0.6s ease-out;
}
.animate-shake {
animation: shake 0.2s ease-in-out 5;
}
`}</style>
</Card>
)
}
🪄 魔法のコードの解説
🪄 Explanation of the Magical Code
次に、このかわいい魔法のコードの中身を、詳しく見ていきましょう💖
Next, let's take a closer look at what's inside this cute magic code 💖
1. おみくじメッセージの宝箱 📜
１. Treasure Box of Fortune Messages 📜
const fortunes = [
{ ja: "キラキラ幸せがいっぱい降り注ぐよ♪", en: "Sparkling happiness rains down on you♪", luck: "超大吉" },
{ ja: "夢見るキミの願い事、きっと叶うよ☆", en: "Your dreamy wish will surely come true☆", luck: "大吉" },
// ... (他のおみくじメッセージ)
];
これが、Koroちゃんが用意したおみくじメッセージの宝箱だよ！日本語と英語のメッセージ、そして運勢が入ってるんだ。全部で100個くらいあるから、いろんなメッセージが出てくるよ✨
This is the treasure box of fortune messages that Koro-chan prepared for us! It contains Japanese and English messages, as well as the fortune level. There are about 100 messages in total, so you'll get a variety of fortunes✨
2. おみくじを引く魔法の呪文 🎐
２. The Magic Spell for Drawing a Fortune 🎐
const drawFortune = () => {
setIsShaking(true)
setTimeout(() => {
const randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)]
setFortune(randomFortune)
setIsRevealed(true)
setIsShaking(false)
}, 1000)
}
この関数がおみくじを引く時の魔法の呪文だよ！まず、Koroちゃんの画像がゆれるようにして（setIsShaking(true)）、1秒待ってから（setTimeout）、ランダムにおみくじを選んで表示するんだ。わくわくするね🌟
This function is the magic spell for drawing a fortune! First, it makes Koro-chan's image shake (setIsShaking(true)), then waits for 1 second (setTimeout), and finally selects and displays a random fortune. It's so exciting🌟
3. 文字サイズを自動調整する魔法 📏
３. The Magic of Auto-Adjusting Font Size 📏
useEffect(() => {
const adjustFontSize = () => {
if (fortuneRef.current) {
let fontSize = 20;
fortuneRef.current.style.fontSize = `\${fontSize}px`;
while (fortuneRef.current.scrollWidth > fortuneRef.current.offsetWidth && fontSize > 10) {
fontSize--;
fortuneRef.current.style.fontSize = `\${fontSize}px`;
}
}
};
if (isRevealed) {
adjustFontSize();
window.addEventListener('resize', adjustFontSize);
}
return () => window.removeEventListener('resize', adjustFontSize);
}, [isRevealed, fortune]);
これは、おみくじの結果がきれいに表示されるようにする魔法の呪文だよ！長いメッセージも短いメッセージも、ぴったりのサイズで表示されるんだ。すごいでしょ？😊
This is the magic spell that makes sure the fortune results are displayed beautifully! Whether the message is long or short, it will be shown in just the right size. Isn't that amazing?😊
4. かわいいデザインの魔法 🎨
４. The Magic of Cute Design 🎨
カラーパレット
Color Palette
- メインカラー：優しいピンク (
#F9A8D4)
Main color: Gentle pink (#F9A8D4) - アクセントカラー：パープル (
#E9D5FF)
Accent color: Purple (#E9D5FF) - テキストカラー：ダークピンク (
#EC4899)
Text color: Dark pink (#EC4899)
レスポンシブ対応
Responsive Design
スマートフォンでもPCでも最適な表示になるよう、Tailwind CSSのユーティリティクラスを活用：
Utilizing Tailwind CSS utility classes for optimal display on both smartphones and PCs:
<div className="w-full max-w-md mx-auto">
ダークモード対応
Dark Mode Support
<Card className="bg-gradient-to-br from-pink-50 to-purple-50 dark:from-pink-950 dark:to-purple-950">
フォーチュンカード
Fortune Card
<Card className="w-full max-w-md bg-gradient-to-br from-pink-50 to-purple-50 dark:from-pink-950 dark:to-purple-950 overflow-hidden">
{/* ... */}
</Card>
このカードが、おみくじアプリ全体を包み込んでるんだ。ピンクから紫のグラデーションで、とってもかわいい感じになってるよ！ダークモードにも対応してるから、夜でも使えるんだ🌙✨
This card wraps the entire fortune-telling app. With a gradient from pink to purple, it gives a very cute feel! It also supports dark mode, so you can use it at night too🌙✨
5. ふわふわハートを作る魔法 🎀
５. The Magic of Creating Fluffy Hearts 🎀
{[...Array(12)].map((_, i) => (
<Heart
key={i}
className="absolute text-pink-200 animate-float"
style={{
left: `\${Math.random() * 100}%`,
top: `\${Math.random() * 100}%`,
animationDelay: `\${Math.random() * 5}s`,
width: `\${Math.random() * 20 + 10}px`,
height: `\${Math.random() * 20 + 10}px`
}}
/>
))}
これが、画面上をふわふわ浮かぶハートを作る魔法だよ！ランダムな位置とサイズで12個のハートが浮かんでるように見えるんだ。とってもロマンチック💕
This is the magic that creates the fluffy floating hearts on the screen! It makes 12 hearts appear to be floating with random positions and sizes. It's so romantic💕
6. Koroちゃんの魔法の鏡 🐰
６. Koro-chan's Magic Mirror 🐰
<div className="relative w-64 h-64">
<Image
src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/S__66600971.jpg-T8RIoerNLqMDUjhk8KNN1p4yD5rQYP.jpeg"
alt="Koro-chan"
width={256}
height={256}
className={`rounded-full border-4 border-pink-200 shadow-xl \${isShaking ? 'animate-shake' : ''}`}
/>
<Sparkles className="absolute top-0 right-0 text-yellow-300 animate-pulse" />
<Star className="absolute bottom-0 left-0 text-yellow-300 animate-pulse" />
</div>
ここがKoroちゃんの魔法の鏡を表示する部分だよ。丸い形にして、ピンクの枠をつけてるんだ。おみくじを引く時にはanimate-shakeクラスがつくから、ゆれるようになるんだよ。キラキラとお星様のアイコンもついてて、とってもかわいいでしょ？✨
This is the part that displays Koro-chan's magic mirror. It's made into a circular shape with a pink frame. When drawing a fortune, the animate-shake class is added, making it shake. With sparkling and star icons, it's super cute, isn't it?✨
7. おみくじ結果を表示する魔法の巻物 📜
７. The Magic Scroll Displaying Fortune Results 📜
<div className="bg-white/95 dark:bg-black/95 p-4 rounded-2xl shadow-xl w-full transform animate-unfold">
<div className="mb-2">
<span className="text-2xl font-bold text-pink-500">{fortune.luck}</span>
</div>
<p
ref={fortuneRef}
className="text-xl font-medium text-pink-500 dark:text-pink-300 mb-2 whitespace-nowrap overflow-hidden"
>
{fortune.ja}
</p>
<p className="text-sm text-pink-400 dark:text-pink-200">
{fortune.en}
</p>
<div className="flex justify-center gap-2 mt-3">
<Heart className="text-pink-400 w-5 h-5 animate-bounce" fill="currentColor" />
<Heart className="text-pink-300 w-5 h-5 animate-bounce delay-100" fill="currentColor" />
<Heart className="text-pink-200 w-5 h-5 animate-bounce delay-200" fill="currentColor" />
</div>
</div>
ここがおみくじの結果を表示する魔法の巻物だよ。運勢、日本語のメッセージ、英語のメッセージが順番に表示されるんだ。下にはかわいくはずむハートもついてるよ。animate-unfoldクラスのおかげで、結果がふわっと現れるようになってるんだ。素敵でしょ？🌸
This is the magic scroll that displays the fortune results. The fortune level, Japanese message, and English message are displayed in order. There are cute bouncing hearts at the bottom too. Thanks to the animate-unfold class, the result appears with a soft unfolding animation. Isn't it lovely?🌸
8. アニメーションの魔法の呪文 💫
８. The Magic Spells for Animations 💫
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(20deg); }
}
@keyframes unfold {
0% { transform: scaleY(0.1); opacity: 0; }
100% { transform: scaleY(1); opacity: 1; }
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
これらが、アプリをもっとかわいく動かすための魔法の呪文だよ。ふわふわ浮かぶハート、ふわっと広がる結果表示、ゆれるKoroちゃんの画像、全部ここで定義されてるんだ。これらの魔法のおかげで、アプリがとってもキュートに動くんだよ🎀
These are the magic spells that make the app move in a cuter way. The fluffy floating hearts, the softly expanding result display, the shaking Koro-chan image - they're all defined here. Thanks to these spells, the app moves in a super cute way🎀
🚀 デプロイ
🚀deploy
このKoroちゃんおみくじアプリは、Vercelにデプロイされています。実際に動くアプリを見ていただけます！
This Koro Chan Omikuji application is deployed on Vercel. You can see the application in action!
Next.jsとTailwind CSSを使うことで、見た目も機能も充実した可愛いおみくじアプリを作ることができました。
By using Next.js and Tailwind CSS, I were able to create a lovely fortune-telling application that looks and functions well.
このプロジェクトを通じて、モダンなWeb技術とかわいいデザインの融合について多くの学びがありました。
Through this project, I learned a lot about blending modern web technology with cute design.
🎈 まとめ
🎈 Summary
これで、Koroちゃんの超かわいいおみくじアプリの完成🎉
And with that, Koro-chan's super cute fortune-telling app is complete🎉
このアプリは：
This app:
- Next.jsとReact Hooksの魔法で、動きのあるアプリを作ったよ
Uses the magic of Next.js and React Hooks to create an interactive app - Tailwind CSSとshadcn/uiの魔法で、見た目をキラキラ可愛くしたの
Uses the magic of Tailwind CSS and shadcn/ui to make the appearance sparkly and cute - たくさんのアニメーションの魔法で、楽しい体験を作れたね
Creates a fun experience with lots of animation magic - 日本語と英語のバイリンガル対応で、みんなが使えるようになってるよ
Is bilingual in Japanese and English, so everyone can use it
みんなも、この魔法のコードを使って自分だけのかわいいおみくじアプリを作ってみてね🌈✨
Everyone, try using this magical code to create your own cute fortune-telling app🌈✨
🌟 カスタマイズのアイデア
🌟 Customization Ideas
- 🎨 色やグラデーションを変えて、自分好みの魔法の世界を作ってみよう
Try changing the colors and gradients to create your own magical world - 🐇 Koroちゃんの画像を自分のお気に入りキャラクターに変えてみるのも楽しいかも
It might be fun to change Koro-chan's image to your favorite character - 🌌 新しいアニメーションの魔法を追加して、もっと華やかにしてみよう
Try adding new animation magic to make it even more glamorous - 📱 SNSシェア機能をつけて、みんなに運勢を教えられる魔法をかけるのも面白いね
It could be interesting to add a social media sharing feature so you can share your fortune with everyone
Koroちゃんと一緒に、楽しい魔法のコーディングしようね💖🐰
Let's do some fun magical coding with Koro-chan💖🐰
Happy magical coding✨🌈🎀
🔗 参考リンク
🔗 Reference Links
🐇 作者について
🐇 About Author
- Twitter: @KoroVRM
- GitHub: このプロジェクトのリポジトリ
🪄Next.js × Tailwind CSS で作る🐰
100種類の癒し系日本語&英語バイリンガルAIおみくじアプリ💝