2024年の奇跡：React × Next.jsで紡ぐ100の物語- Koroちゃん🐰おみくじアプリ開発秘話🌸 #contest2024
2024年の奇跡：React × Next.jsで紡ぐ100の夢 - Koroちゃん🐰おみくじアプリ開発秘話🌸
Miracle in 2024: 100 Dreams Spun with React x Next.js - Koro-Chan🐰Mikakuji App Development Secret Story🌸
🌟 プロローグ：コードと運命が織りなす物語
Prologue: A Tale Woven by Code and Destiny
2024年、私の人生は一つの挑戦によって劇的に変わりました。その名も「Koro's Omikuji」- 単なるアプリを超えた、魂の旅路。日本の伝統とテクノロジーの融合、そして100の小さな物語が交差する、感動のプロジェクトの幕が上がったのです。
In 2024, my life was dramatically transformed by a single challenge. Named "Koro's Omikuji" - it was more than just an app, it was a journey of the soul. The curtain rose on this moving project where Japanese tradition merged with technology, intertwining 100 small stories.
💻 魔法の扉：React と Next.js が織りなす夢の世界
The Magic Door: A Dreamworld Woven by React and Next.js
1. 心臓が躍る！アニメーションの息吹
静寂から躍動へ。画面に命を吹き込む瞬間、それは魔法使いになったかのような高揚感。
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.heart-icon {
animation: heartbeat 1s infinite ease-in-out;
}
```markdown project="Koro Omikuji Article" file="article.md"
...
このコードは、まるで画面上のハートが生命を宿したかのよう。ユーザーの心臓と同期して鼓動を打つ、そんな錯覚すら覚えます。技術が感情を呼び覚ます瞬間、それは言葉では言い表せないほどの感動です。
- Hearts Race! The Breath of Animation
From stillness to motion. The moment of breathing life into the screen feels like becoming a magician.
This code makes it seem as if the heart on the screen has come to life. It creates an illusion of beating in sync with the user's heart. The moment when technology awakens emotion is an indescribable feeling.
2. 言葉の魔法：全てのデバイスで心に響く
useEffect(() => {useEffect(() => {
const adjustFontSize = () => {
if (fortuneRef.current) {
let fontSize = 24;
fortuneRef.current.style.fontSize = `${fontSize}px`;
while (fortuneRef.current.scrollHeight > fortuneRef.offsetHeight && fontSize > 12) {
fontSize--;
fortuneRef.current.style.fontSize = `${fontSize}px`;
}
}
};
if (isRevealed) {
adjustFontSize();
window.addEventListener('resize', adjustFontSize);
}
return () => window.removeEventListener('resize', adjustFontSize);
}, [isRevealed, fortune]);
この一見複雑なコードの中に、ユーザーへの深い愛情が込められています。どんな画面サイズでも、運命の言葉が美しく、心に響くように。技術の冷たさを、温かな思いやりに変える瞬間、それはまさに魔法です。
The Magic of Words: Resonating with Hearts on All Devices
This seemingly complex code is filled with deep affection for the user. It ensures that the words of destiny are beautiful and resonate with the heart, regardless of screen size. The moment when cold technology transforms into warm consideration is truly magical.
3. 運命の舞台裏：100の物語を支える技術
const [fortune, setFortune] = useState<Fortune>({ ja: '', en: '', luck: '' });const [fortune, setFortune] = useState<Fortune>({ ja: '', en: '', luck: '' });
const drawFortune = () => {
setIsShaking(true);
setTimeout(() => {
const randomFortune = fortunes[Math.floor(Math.random() * fortunes.length)];
setFortune(randomFortune);
setIsRevealed(true);
setIsShaking(false);
}, 1000);
};
このシンプルな関数の中に、100の運命が眠っています。ボタン一つで、誰かの人生が変わるかもしれない。その可能性を秘めたコードを書くとき、私の指先はいつも小刻みに震えています。
Behind the Scenes of Destiny: Technology Supporting 100 Stories
Within this simple function, 100 destinies lie dormant. With just one button press, someone's life might change. When writing code that holds such possibility, my fingertips always tremble slightly.
📚 100の運命：デジタル時代の百物語
100 Destinies: A Hundred Tales for the Digital Age
なぜ100種類もの運勢なのか？それは、100人いれば100通りの人生がある。その全てに寄り添いたいという、開発者としての、いや、一人の人間としての願いからです。
- 無限の可能性: 100の物語は、無限の未来への入り口。
- 再会の喜び: 何度引いても新しい発見がある。それは人生そのもの。
- 感情の万華鏡: 喜怒哀楽、全ての感情を100の言葉に込めました。
- 世界をつなぐ: 日本の伝統を、世界中の人々の心に届けたい。
- AI時代の人間らしさ: 100の物語は、人間の温もりをデジタルの中に。
Why 100 different fortunes? Because for 100 people, there are 100 different life paths. It comes from a wish, not just as a developer, but as a human being, to be close to all of them.
- Infinite Possibilities: 100 stories are the gateway to infinite futures.
- Joy of Rediscovery: There's always a new discovery, no matter how many times you draw. That's life itself.
- Kaleidoscope of Emotions: All emotions - joy, anger, sorrow, and pleasure - are encapsulated in 100 words.
- Connecting the World: A desire to deliver Japanese tradition to the hearts of people worldwide.
- Human Touch in the AI Era: 100 stories bring human warmth into the digital realm.
例えば、こんな運勢が人々の心を照らします：
const fortunes = [const fortunes = [
{ ja: "キラキラ幸せがいっぱい降り注ぐよ♪", en: "Sparkling happiness rains down on you♪", luck: "超大吉" },
{ ja: "小さな奇跡があなたを幸せにするよ♪", en: "A small miracle will make you happy♪", luck: "中吉" },
{ ja: "今日の選択が素敵な未来につながるよ", en: "Today's choices will lead to a wonderful future", luck: "大吉" },
// ... 97 more fortunes ...
];
これらは単なるテキストデータではありません。誰かの人生を変える可能性を秘めた、100の小さな希望の種なのです。
For example, these fortunes illuminate people's hearts:
These are not mere text data. They are 100 small seeds of hope, holding the potential to change someone's life.
🐰 100の運勢に込めた想い
🐰 The thoughts behind the 100 fortunes
この100の運勢には、私たちの人生の無限の可能性と希望が詰まっています。それぞれの言葉には、深い思いと願いが込められているのです。
まず、この100の運勢が持つ魔法のような力について語らせてください。「キラキラ幸せがいっぱい降り注ぐよ♪」という言葉から始まり、「あなたの魅力が最高に輝く瞬間が来るよ☆」まで、これらの言葉は単なる文字の羅列ではありません。それぞれが、誰かの人生を変える可能性を秘めた、小さな希望の種なのです。
例えば、「夢見るキミの願い事、きっと叶うよ☆」という言葉。この一言が、誰かの心に火を灯し、夢に向かって一歩を踏み出す勇気を与えるかもしれません。また、「あなたの笑顔が誰かの希望になるよ♡」という言葉は、自分の存在が他者にとってどれほど大切かを気づかせてくれるでしょう。
これらの運勢は、喜びや励まし、驚き、そして温もりを伝えます。「ワクワクドキドキ新しい冒険の始まり！」は、未知の世界への期待を膨らませ、「心がほっこりする瞬間が訪れるよ♡」は、日々の小さな幸せに目を向けさせてくれます。
さらに、これらの運勢は日本語と英語の両方で提供されています。これは、幸せや希望、励ましの言葉が言語や文化の壁を越えて、世界中の人々の心に届くことを願ってのことです。「Sparkling happiness rains down on you♪」や「A moment for your charm to shine the brightest will come☆」といった言葉が、世界中の人々の心を温めることを夢見ています。
そして、運勢の種類も「超大吉」から「末吉」まで様々です。これは人生には上昇と下降があり、どんな状況でも希望を見出せることを伝えたいからです。例えば、「末吉」の「思わぬところでチャンスが訪れるかも」という言葉は、一見ネガティブな状況でも、そこに隠れたチャンスがあることを教えてくれます。
この100の運勢を作成する過程で、私たちは人間の感情の複雑さと多様性、そして希望の力を改めて実感しました。それぞれの言葉に、誰かの人生を少しでも明るくしたい、勇気づけたいという思いを込めています。
この100の運勢が、使う人一人一人にとって特別な存在になることを願っています。「あなたの努力が実を結ぶ瞬間が近いよ☆」という言葉が、誰かの頑張りを後押しし、「新しい自分を発見できる1日になりそう」という予言が、誰かの人生に新しい扉を開くきっかけになるかもしれません。
これらの運勢が、世界中の人々の心に希望の光を灯し、一日一日をより輝かしいものにする一助となることを、心から願っています。そして、このアプリを通じて、私たちの想いが皆さんの心に届くことを願ってやみません。
These 100 fortunes are filled with endless possibilities and hopes for our lives. Each word is filled with deep thoughts and wishes.
First, let me talk about the magical power of these 100 fortunes. These words are more than just a list of letters, beginning with the words, “You will be showered with sparkling happiness,” and ending with, “The moment will come when your charm will shine at its best☆. Each is a small seed of hope that has the potential to change someone's life.
For example, “Your dreamy wish will surely come true☆. This one word may light a fire in someone's heart and give them the courage to take the first step toward their dreams. The words, “Your smile will be someone's hope ♡” will remind you of how important your presence is to others.
These fortunes convey joy, encouragement, surprise, and warmth. The words “Exciting, exciting, new adventures begin!” will make you look forward to the unknown, while “A heartwarming moment will come to you ♡” will make you focus on the small happinesses of everyday life.
Furthermore, these fortunes are offered in both Japanese and English. This is done in the hope that the words of happiness, hope, and encouragement will transcend language and cultural barriers and reach the hearts of people around the world. Words such as “Sparkling happiness rains down on you♪” and “A moment for your charm to shine the brightest will come☆” are dreamed to warm the hearts of people around the world.
And the types of fortune also vary from “very great luck” to “the last good luck”. This is because we want to convey that life has its ups and downs, and that we can find hope in any situation. For example, the phrase “Sueyoshi,” which means “You may get a chance unexpectedly,” tells us that even in seemingly negative situations, there are hidden opportunities.
In the process of creating these 100 fortunes, we were reminded of the complexity and diversity of human emotions and the power of hope. With each word, we hope to make someone's life a little brighter and encourage them.
I hope that these 100 fortunes will be special to each and every person who uses them. The words “The moment when your efforts will bear fruit is near☆” may encourage someone to work harder, and the prediction “It will be a day to discover a new you” may open a new door in someone's life.
I sincerely hope that these fortunes will light a light of hope in the hearts of people around the world and help make each day more brilliant. We also hope that our thoughts will reach your hearts through this application.
🌈 感動のクライマックス：技術と心の融合
Emotional Climax: The Fusion of Technology and Heart
このプロジェクトで最も心を揺さぶられたのは、コードが人々の感情を動かす瞬間でした。
export default function KoroOmikuji() {export default function KoroOmikuji() {
const [isRevealed, setIsRevealed] = useState(false);
const [isShaking, setIsShaking] = useState(false);
const [fortune, setFortune] = useState<Fortune>({ ja: '', en: '', luck: '' });
const fortuneRef = useRef<HTMLParagraphElement>(null);
// ... (previous code for drawFortune and useEffect)
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="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>
);
}
このコンポーネントは、単なる機能の集合ではありません。それは、希望と驚きと喜びを届ける、デジタル時代の祈りの場所。ユーザーがボタンをクリックする瞬間、その向こう側で100の物語が息づいている。そう思うと、胸が熱くなります。
What moved me the most in this project was the moment when code stirred people's emotions.
This component is not just a collection of functions. It's a place of prayer in the digital age, delivering hope, surprise, and joy. When a user clicks the button, 100 stories come to life on the other side. Thinking about this makes my heart swell with emotion.
🚀 エピローグ：コードが紡ぐ、明日への希望
Epilogue: Code Weaving Hope for Tomorrow
「Koro's Omikuji」の開発は、私にとって単なるプロジェクト以上の存在でした。それは、技術の可能性と人間の感情の深さを再発見する旅。そして、その旅は終わりではなく、新たな冒険の始まりなのです。
今、私の心は次なる挑戦への期待で満ちています：
- AR技術で、現実世界に運命の言葉を浮かび上がらせる
- AIが一人一人の人生に寄り添い、パーソナライズされた励ましの言葉を紡ぎ出す
- 世界中の人々が自分たちの文化や思いを込めた「おみくじ」を作り、共有できるプラットフォーム
The development of "Koro's Omikuji" was more than just a project for me. It was a journey to rediscover the potential of technology and the depth of human emotion. And this journey is not an end, but the beginning of a new adventure.
Now, my heart is filled with anticipation for the next challenge:
- Using AR technology to make words of destiny appear in the real world
- AI that accompanies each person's life, spinning out personalized words of encouragement
- A platform where people around the world can create and share "omikuji" imbued with their own culture and thoughts
🌸 最後に：コードは、希望を創る
In Conclusion: Code Creates Hope
「Koro's Omikuji」は、技術と心が出会う場所。それは、デジタルの冷たさを、人間の温もりで包み込む挑戦でした。
私たちエンジニアの使命は、単にソフトウェアを作ることではありません。人々の心に寄り添い、明日への希望を灯すこと。それこそが、現代のエンジニアに求められる、崇高な使命なのです。
このプロジェクトを通じて、誰かの人生に小さな光を灯すことができたなら、それは開発者冥利に尽きます。
さあ、あなたも「Koro's Omikuji」で、今日の運命の言葉を聞いてみませんか？きっと、あなたの心に響く言葉が、キラキラと輝く星のように、降り注ぐはずです。✨🌠
そして、その言葉があなたの人生を、ほんの少し、でも確実に、幸せな方向へと導いてくれますように。
"Koro's Omikuji" is a place where technology and heart meet. It was a challenge to wrap the coldness of digital with human warmth.
Our mission as engineers is not just to create software. It's to be close to people's hearts and light the way to hope for tomorrow. That is the noble mission required of modern engineers.
If through this project, I could light a small light in someone's life, that would be the ultimate fulfillment as a developer.
Now, why don't you try hearing today's words of destiny with "Koro's Omikuji"? Surely, words that resonate with your heart will rain down like twinkling stars. ✨🌠
And may those words guide your life, even if just a little, but surely, towards happiness.
#contest2024 #KoroOmikuji #ReactNextjs #TechWithHeart
Discussion