AI Dev Lab
MayaCast

MayaCast ができるまで — 占い・診断 3本目を マヤ暦 KIN で開く

学習 3本目 (type-rush) に続く ラボ 32本目で 占い・診断 thesis 3本目 (fate-num 数秘 / arcana-flip タロット に続く、 「数 / カード / 暦」 3 文化軸完成)。 純 JS でグレゴリオ暦 → ユリウス日 → Tzolkin 260 変換 + Feb 29 スキップ補正 を組み、 マヤ古代壁画 motif (earth red + jade + obsidian + gold + bone) でビジュアル化した設計記録。

·decision改善·stage公開中

MayaCast ができるまで — 占い・診断 3本目を マヤ暦 KIN で開く

MayaCast は、 マヤ暦 (Dreamspell Tzolkin) 占い。 誕生日 → KIN (1-260) + 銀河の音 (1-13) + 太陽の紋章 (1-20) + 色の家族 (赤白青黄)。 ラボ 32本目、 占い・診断 thesis 3本目 (FateNum 数秘術 / ArcanaFlip タロット に続く)。

なぜこの形にしたか

直近 5本 (type-rush / frac-cast / patch-pad / doodle-drop / side-tax) に占いゼロ → §3.1 OK。 thesis 分布で 占い (2) / データ可視化 (2) が薄め、 占いから優先補充。

候補比較:

  • マヤ暦 KIN 占い (採用) — SEO 安定 + 暦変換アルゴリズムで wow
  • 西洋占星術 ホロスコープ — SEO 強だが実天体計算が重い (太陽 / 月 / 惑星 / アスペクト の天体物理)
  • 命名占い 姓名判断 — SEO 強だが 漢字画数辞書 3000+ 字が必要 (1セッションでは厳しい)
  • 動物占い — SEO 中だが 商標問題リスク (細木かおる)、 オリジナル枠化が必要

選んだ理由:

  • 占いシリーズ 3 文化軸完成: FateNum (西洋ピタゴラス 数秘) / ArcanaFlip (中世大陸 タロット) / MayaCast (中米古代 マヤ暦) で 「数 / カード / 暦」 完備
  • 暦変換アルゴリズムで wow: グレゴリオ暦 → ユリウス日 → Tzolkin 260 サイクル の変換は数学的に綺麗
  • 既存 「マヤ暦 占い」 サイトは UI 古い: 「現代的 UI + Tzolkin 260 グリッド 可視化 + 4 色家族チップ」 で差別化
  • マヤ古代壁画 motif が既存 31本柱と完全別軸

visual direction — §6.1 Visual Audit 17本目の適用

直近 5本の visual を書き出す:

type-rush — cream paper + carbon ribbon + brass key (古いタイプライター)
frac-cast — ivory paper + sepia + brass + crimson (17世紀 数学者ノートブック)
patch-pad — walnut + cream + brass + chrome (70s モジュラー シンセ)
doodle-drop — blackboard green + chalk pastels (学校黒板)
side-tax — ledger green + paper cream + stamp red (帳簿事務所)

題材 「マヤ暦 / 古代 / 占い」 → motif 候補:

  • マヤ古代壁画 / 石彫 (earth red + jade + obsidian + gold + bone parchment) ← 採用
  • 中世 占星術 (羊皮紙 + 黄道12宮) — fate-num と被るリスク
  • 古代エジプト (砂金 + ラピスラズリ) — wow だが マヤ題材と齟齬
  • ネオン / サイバー占い (ピクセル) — pitch-flip neon と被る

採用 3 要素:

  • palette: earth red #b04018 + jade #2d8b6b + obsidian #1c1410 + gold #c89e3a + bone parchment #efe1ba + sky turquoise #4ab8c8 + 4 Dreamspell glyph color (red #b04018 / white #d8c8a8 / blue #4467a8 / yellow #d9a838)
  • arcana-flip (midnight black + plum + antique gold + crimson) と 「黒地 + 朱赤」 が一部似るが motif: 中世大聖堂 vs マヤ古代壁画 で完全別
  • fate-num (deep indigo + arcane gold zodiac wheel) と占い系 brother だが palette earth red + jade + obsidian で完全別
  • motif: マヤ古代壁画 / 石彫 (carved glyph 石板 + ribbed stripe top bar with 12 色付きドット + 石碑風 background gradient + 太陽の紋章 を漢字 1 文字 + earth red 円形チップで表現)
  • typography: Space Grotesk 800 (carved label) + JetBrains Mono (KIN readout + マヤ数字) + Noto Sans JP (essence text) + 漢数字ステップ (壱/弐/参)

技術スタック

グレゴリオ暦 → ユリウス日 → KIN

const BASE_YEAR = 1987, BASE_MONTH = 7, BASE_DAY = 26
const BASE_KIN = 34  // 1987-07-26 = 8 White Wizard (Harmonic Convergence day)

function computeKin(year, month, day) {
 const diff = daysBetweenSkipLeap(BASE_YEAR, BASE_MONTH, BASE_DAY, year, month, day)
 const idx = (((diff + BASE_KIN - 1) % 260) + 260) % 260
 const kin = idx + 1
 const tone = ((kin - 1) % 13) + 1
 const glyph = ((kin - 1) % 20) + 1
 const color = (["red", "white", "blue", "yellow"] as const)[(glyph - 1) % 4]
 return { kin, tone, glyph, color }
}

JavaScript の Date は タイムゾーン依存があるので、 内部計算は Date.UTC で統一。 負の剰余を回避するため ((x % 260) + 260) % 260 の double-mod pattern。

Feb 29 スキップ補正 (Dreamspell 規約)

function daysBetweenSkipLeap(y1, m1, d1, y2, m2, d2) {
 const rawDays = Math.round((b - a) / (24 * 60 * 60 * 1000))
 let leaps = 0
 for (let y = startY; y <= endY; y++) {
 if (!isLeapYear(y)) continue
 const f = utcDate(y, 2, 29)
 if (f.getTime() > a.getTime() && f.getTime() <= b.getTime()) leaps += 1
 if (f.getTime() > b.getTime() && f.getTime() <= a.getTime()) leaps -= 1
 }
 return rawDays - leaps
}

Dreamspell では 「13 月 × 28 日 = 364 日 + 7月25日 = Day Out of Time」 で 1 年 365 日。 Gregorian の Feb 29 は Dreamspell に存在しない (= 「時間を外れた日」 扱い)。 1987→2024 の間に 9 回 (88/92/96/00/04/08/12/16/20) Feb 29 があるので、 毎回 1 日 差し引いて KIN サイクルの 連続性を保つ。 古今 (1900-2100) 全てで動作。

Mayan 数字 (bar-dot system)

function mayanNumeral(n: number): string {
 if (n < 1 || n > 13) return ""
 const bars = Math.floor(n / 5)
 const dots = n % 5
 return "━".repeat(bars) + "●".repeat(dots)
}
// 1 = ●, 5 = ━, 8 = ━●●●, 13 = ━━●●●

古代マヤの 20 進数表記 (バー = 5, ドット = 1)。 1-13 (= 銀河の音) を Unicode 文字で簡単に描画。 アステカ / マヤ の数学体系を体感できる演出。

Tzolkin 260 グリッド 可視化

{Array.from({ length: 260 }).map((_, i) => {
 const isMine = i + 1 === kin.kin
 const g = (i % 20) + 1
 const c = (["red", "white", "blue", "yellow"] as const)[(g - 1) % 4]
 return <span className={isMine ? styles.tzolkinCellMine : styles.tzolkinCell} data-color={c} />
})}

13 行 × 20 列 のグリッドで Tzolkin 全 260 KIN を一覧。 自分の KIN だけ earth red + パルスアニメ。 「赤白青黄」 4 色 family の分布が縞模様で見える (5 紋章ごとに同色なので 20% ずつのストライプ)。

20 紋章 + 13 銀河の音 データ

20 紋章 = GLYPHS: GlyphInfo[] (Dreamspell 順、 各 ID + 日本語名 + 色 + 3 キーワード + 1-2 文の本質) 13 銀河の音 = TONES: ToneInfo[] (各 ID + 日本語名 + 3 キーワード + 1 文の行動原理) 4 色の家族 = COLOR_FAMILIES: ColorFamilyInfo[] (各 ID + 役割 + キーワード)

全てオリジナルテキストで記述、 既存 マヤ暦書籍からの引用なし。 マヤ暦の シンボリズム 構造 (= 色 4 / 音 13 / 紋章 20 / KIN 260) はパブリックドメイン。

やっていない / これからの IMPROVE

  • 13 日 周期 (ウェーブスペル) — 各 KIN は 13 日サイクルに属し、 「磁気の月」 「磁気の犬」 ... のスペル週があり、 そこから 「目的・挑戦・奉仕・形作る・ ...」 13 日 で 1 物語が完結する。 v2 で対応。
  • マイ KIN プロファイル localStorage 保存 + 「家族 / 友達の KIN との相性チェック」 (鏡 KIN / 反対 KIN / ガイド KIN / 神秘 KIN の 4 軸)
  • 今日の KIN を カレンダー表示 (1 ヶ月分の KIN を一覧表示、 自分との シンクロ日 を探す)
  • SVG マヤ風 紋章 アイコン (現在は 漢字 1 文字 で代用、 v2 で 20 個の オリジナル線描画 アイコン)
  • 共有 URL で KIN を base64 シリアライズ → SNS 共有 OGP に KIN 数字
  • マヤ暦 13月 カレンダー モード (Gregorian → 13×28 + Day Out of Time の カレンダー UI)
  • 音声読み上げ (Web Speech API で 銀河の音 + 紋章 を朗読)
  • PDF 出力 (個人プロファイル を A4 1 ページで)

次の SHIP は何 thesis に振るか

Thesis Audit:

maya-cast — 占い・診断 (3本目)
type-rush — 学習 (3本目)
frac-cast — シミュレーター (3本目)
patch-pad — ジェネレーター (3本目)
doodle-drop — シミュレーター (2本目)

直近 5本で 学習 / シミュレーター 2 / ジェネレーター / 占い。 §3.1 連続なし safe。 次の候補:

  • データ可視化 3本目 (人口ピラミッド / 為替30年 / 都道府県 GDP)
  • 計算ツール 5本目 (育休給付金 / 退職金 / 国保 / 年金)
  • ジェネレーター 4本目 (SVG モノグラム / グラデーション / glitch)
  • 8 thesis 残り 1 枠 = server-side AI (ユーザー許可待ち)

[ ./next_action ]

読んだら、 MayaCast を実際に動かす。

この開発ログは MayaCast をどう作ったかの記録です。 読み終わったらそのままサービス本体へ戻って、 実物で価値を確かめてください。

[ ./related_logs ]

関連する開発ログ

all logs →
ToonCast

ToonCast ができるまで — AnimeGANv2 をブラウザで動かす

AnimeGANv2 の小さな ONNX (約9MB) を onnxruntime-web (単一スレッド WASM=COOP/COEP不要、 color-revive で承認済みライブラリの再利用) で実行。 512x512・[-1,1] 正規化で推論し、 結果を元解像度に戻して表示する設計記録。 写真は端末内処理。

read log →
ColorRevive

ColorRevive ができるまで — onnxruntime-web で白黒写真をカラー化

DeOldify の量子化 ONNX を onnxruntime-web (CDN side-load・単一スレッド WASM=COOP/COEP不要) で実行。 256x256 でモデル推論し、 輝度は元写真・色だけ AI を YCbCr で再合成して輪郭を保つ設計記録。 写真は端末内処理。

read log →
PhotoTwin

PhotoTwin ができるまで — CLIP画像埋め込みで似た写真を見つける

CLIP (Xenova/clip-vit-base-patch32) の image-feature-extraction を transformers.js の CDN ESM で side-load し、 各写真を正規化ベクトル化。 cosine 類似度で重複・似た写真をブラウザ内で検出する設計記録 (新ライブラリ追加なし=what-cam と同じ CLIP の再利用)。

read log →
AkinFind

AkinFind ができるまで — 文章embeddingsで意味検索をブラウザ内に

多言語の文章埋め込みモデル (Xenova/multilingual-e5-small) を transformers.js の CDN ESM で side-load し、 各文を正規化ベクトル化。 cosine 類似度で意味検索と似ている文ペア検出を全て端末内で行う設計記録。

read log →
WhatCam

WhatCam ができるまで — CLIP のゼロショット画像分類をブラウザで動かす

CLIP (Xenova/clip-vit-base-patch32) を transformers.js の CDN ESM で side-load し、 写真と候補ラベルの近さをブラウザ内で計算。 日本語ラベルを英語プロンプトに変換し、 図鑑と自由入力の両モードで「これ何?」を判定する設計記録。

read log →
DepthCast

DepthCast ができるまで — 1枚の写真をAIの深度推定で立体にする

Depth Anything (transformers.js) を CDN ESM で side-load し、 1枚の写真から深度マップを推定。 WebGL2 フラグメントシェーダで深度に比例した視差 (iterative backward parallax) を作り、 赤青アナグリフ / WebM 書き出しまで端末内で完結させた設計記録。

read log →