このWebコンポーネントのソースコードはこちらからご覧いただけます。
HTMLファイルに以下のようにコンポーネントを配置するだけで、おみくじ機能を実装できます。
<!-- コンポーネントの読み込み -->
<script src="libs/omikuji-component.js"></script>
<!-- おみくじコンポーネントの配置 -->
<yamanote-omikuji></yamanote-omikuji>💡 コンポーネントは自動的にスタイリングされ、レスポンシブデザインに対応しています。 追加のCSSは必要ありません。
このおみくじは、山手線の各駅をモチーフにした独自の運勢占いシステムです。 重み付けされた運勢レベルと、駅固有の特徴を組み合わせて結果を生成します。
運勢レベルは、伝統的なおみくじの要素を残しながら、より詳細な段階分けを実現しています。 特に良い運勢（超大大吉、大大吉）と悪い運勢（大凶、超大凶）は出現確率を低く設定し、 中程度の運勢が最も出やすい自然な分布を実現しています。
// 運勢レベルの重み付け定義
const luckWeights = {
'超大大吉': 5, // 5%
'大大吉': 10, // 10%
'大吉': 20, // 20%
'中吉': 25, // 25%
'小吉': 20, // 20%
'末吉': 10, // 10%
'凶': 7, // 7%
'大凶': 2, // 2%
'超大凶': 1 // 1%
};
より公平で予測困難な結果を生成するため、複数のシード値を組み合わせたXORShift方式を採用しています。 時間要素を含む3つの異なるシード値を使用することで、より自然な乱数分布を実現しています。
3段階の処理により、高品質な乱数を生成します：
このシステムは以下の特徴を持ちます：
generateRandomNumber(max) {
const now = new Date();
// 複数のシード値を使用
let seed1 = now.getTime();
let seed2 = performance.now() * 1000000;
let seed3 = timeComponents.reduce((acc, val) => acc * 31 + val, 0);
// XORShiftを適用
for (let i = 0; i < 3; i++) {
seed1 ^= seed1 << 13;
seed1 ^= seed1 >> 17;
seed1 ^= seed1 << 5;
// seed2, seed3も同様に処理
}
// 3つのシード値を組み合わせて最終的な乱数を生成
const combinedSeed = (seed1 ^ seed2 ^ seed3) >>> 0;
return combinedSeed % max;
}
山手線をイメージした緑を基調としながら、和風の要素を取り入れた現代的なデザインを採用。 アニメーションや絵文字を効果的に使用し、おみくじを引く際の期待感を演出しています。
以下の要素を重視してデザインを構築：
様々な画面サイズに対応するため、以下の工夫を実装：
ユーザー体験を向上させる3つの主要なアニメーション：
#omikuji-section {
text-align: center;
padding: 20px;
background: linear-gradient(135deg, rgba(255,253,245,0.98), rgba(255,248,238,0.98));
border-radius: 15px;
box-shadow: 0 0 30px rgba(0,128,0,0.3);
border: 5px double #008000;
}
.loading-train {
font-size: 30px;
animation: trainMove 3s linear infinite;
}
@keyframes trainMove {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
各運勢レベルに対して、山手線の特徴を活かした豊富なメッセージパターンを用意。 駅名、時期、効果、推奨活動を組み合わせることで、多様な占い結果を生成します。
各運勢レベルに対して、以下のような要素を組み合わせて結果を生成します：
// 運勢レベルごとのメッセージ構成例
const messageStructure = {
'超大大吉': {
tone: '非常に明るく活気のある口調',
keywords: ['素晴らしい', '運命的な', '最高の'],
patterns: 50 // メッセージパターン数
},
'大吉': {
tone: '前向きで期待感のある口調',
keywords: ['良い', '幸せな', '楽しい'],
patterns: 40
},
'中吉': {
tone: '穏やかで落ち着いた口調',
keywords: ['穏やかな', '心地よい', '安らかな'],
patterns: 30
}
// ... 他の運勢レベル
};
// 駅固有の特徴データ例
const stationCharacteristics = {
'渋谷': {
features: ['若者文化', 'エンターテイメント', 'ファッション'],
activities: ['ショッピング', 'カフェ巡り', 'スクランブル交差点散策']
},
'上野': {
features: ['文化施設', '公園', '下町情緒'],
activities: ['美術館巡り', '公園散策', '商店街探索']
}
// ... 他の駅
};
運勢レベルに応じて、以下のような要素でメッセージのトーンを調整します：