都営大江戸線のおみくじを作った
大江戸線の駅名と運勢を組み合わせたおみくじシステム。
38駅 × 9種類の運勢 × メッセージパターンで、膨大な組み合わせ。Web Componentsで実装して、再利用できるようにした。
作ったもの
「おみくじを引く」ボタンを押すと、大江戸線の駅名と運勢が表示される。
「新宿駅で大吉」「光が丘駅で中吉」のような結果。駅名ごとに異なるメッセージが生成される。
大江戸線のマゼンタカラー（#D0007C）をベースにしたデザイン。環状線をイメージしたアニメーションも入れた。
なぜ作ったか
山手線おみくじ（midori212）を作った経験がある。それの別路線版。
大江戸線は環状線。都庁前から光が丘まで、38駅ある。各駅に個性がある。それをおみくじに活かせないか。そう思った。
おみくじは組み合わせが命。駅が多いほど、バリエーションが増える。これだ。
Web Componentsで実装
カスタム要素として定義した。
class ToeiOedoSenOmikuji extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
/* スタイル定義 */
</style>
<div id="omikuji-section">
<!-- おみくじのUI -->
</div>
`;
}
}
customElements.define('toei-oedo-sen-omikuji', ToeiOedoSenOmikuji);
Shadow DOMでスタイルをカプセル化。他のページのCSSと干渉しない。
使う時は、HTMLタグを配置するだけ：
<toei-oedo-sen-omikuji></toei-oedo-sen-omikuji>
これで、どのページにも簡単に追加できる。
駅名データの定義
大江戸線の全38駅を配列で定義。
const stations = [
'都庁前', '新宿', '東新宿', '若松河田', '牛込柳町',
'牛込神楽坂', '飯田橋', '春日', '本郷三丁目',
'上野御徒町', '新御徒町', '蔵前', '両国', '森下',
'清澄白河', '門前仲町', '月島', '勝どき', '築地市場',
'汐留', '大門', '赤羽橋', '麻布十番', '六本木',
'青山一丁目', '国立競技場', '代々木', '新宿西口',
'中野坂上', '東中野', '中井', '落合南長崎',
'新江古田', '練馬', '豊島園', '練馬春日町', '光が丘'
];
38駅。最初は主要駅だけ（10駅くらい）にしようかと思った。でも、それだと面白くない。全駅入れることにした。
運勢レベルの定義
9種類の運勢を定義した。
const fortunes = [
'超大大吉', '大大吉', '大吉', '中吉', '小吉',
'末吉', '凶', '大凶', '超大凶'
];
通常のおみくじより多い。「超大大吉」と「超大凶」は遊び心で追加。
確率は均等。どの運勢も1/9の確率で出る。意図的に偏らせなかった。完全にランダム。
メッセージ生成のロジック
運勢ごとに異なるメッセージパターンを用意。
const messages = {
'超大大吉': {
effects: [
'奇跡的な出会いと素晴らしい発見の旅が待っている',
'予想を超える幸運があなたを包む',
// ... 複数のパターン
],
timings: [
'今日から明日にかけて',
'週末に',
// ... 複数のパターン
],
activities: [
'新しいことに挑戦してみよう',
'人との繋がりを大切に',
// ... 複数のパターン
]
},
// ... 他の運勢も同様
};
effects（何が起こるか）、timings（いつ起こるか）、activities（どうすべきか）の3要素を組み合わせる。
ランダムに1つずつ選んで、文章を組み立てる。同じ運勢でも、毎回違うメッセージになる。
組み合わせの計算
おみくじの総組み合わせ数を計算してみた。
- 駅数：38駅
- 運勢：9種類
- effects：運勢ごとに10-15パターン
- timings：運勢ごとに8-12パターン
- activities：運勢ごとに8-12パターン
保守的に見積もっても、38 × 9 × 10 × 8 × 8 = 約22万通り。
実際にはもっと多い。effectsやtimingsのパターン数は運勢によって違うから。
これだけあれば、何回引いても同じ結果はほぼ出ない。
デザインの工夫
大江戸線のマゼンタカラー（#D0007C）をメインに使った。
背景には環状線をイメージしたアニメーション。円形のグラデーションが回転する。60秒で1周。
最初は10秒で1周させた。でも、速すぎて目がチカチカする。60秒にしたら、ゆっくりで良い感じになった。
駅マーカーの装飾も追加。小さな円を画面の端に配置。大江戸線の駅を表現している。
ハマったところ
Shadow DOMのスタイルが、外部のCSSに影響されない。これは良い。
でも、逆に外部から スタイルを変更できない。CSSカスタムプロパティ（CSS Variables）を使って解決。
:host {
--oedo-color: #D0007C;
--oedo-light: #FFE6F2;
--oedo-dark: #AA0064;
}
外部から--oedo-colorを変更すれば、コンポーネント内部の色も変わる。柔軟性が出た。
試してみた
何回かおみくじを引いた。
「代々木駅で大吉」「練馬駅で中吉」「六本木駅で凶」。毎回違う駅名と運勢。メッセージも違う。
同じ「大吉」でも、駅名が変わると印象が変わる。「都庁前で大吉」と「光が丘で大吉」。なんとなく雰囲気が違う。
システム全体の流れ
使ってみて
都営大江戸線のおみくじシステムとして、完成した。
ポイントは以下の3つ：
- Web Componentsで再利用可能なコンポーネント化
- 38駅 × 9運勢 × メッセージパターンで約22万通りの組み合わせ
- Shadow DOMでスタイルをカプセル化、CSSカスタムプロパティで柔軟性を確保
おみくじは組み合わせの多さが楽しさにつながる。駅名というテーマ性があると、さらに面白くなる。
路線をテーマにしたおみくじを作りたい方の参考になれば嬉しいです。
まとめ
今回は、都営大江戸線をテーマにしたおみくじシステムを作りました。
ポイントは以下の3つ：
- Web Componentsで実装し、HTMLタグ1つで使える
- 38駅すべてを定義し、豊富なバリエーション
- メッセージを3要素（effects、timings、activities）で組み立て
Web Componentsなら、他のページにも簡単に追加できる。山手線、総武線など、別の路線版も作りやすい。
さらに深く学ぶには
この記事で興味を持った方におすすめのリンク：
自分の関連記事：
最後まで読んでくださり、ありがとうございました。