世界に一つの印影をブラウザで無料で作れるサービスを作った — inkan.teraren.com

const zeroToOne = z.number().min(0).max(1)
const negOneToPlusOne = z.number().min(-1).max(1)
const hexColor = z.string().regex(/^#[0-9a-fA-F]{6}$/)

export const StampConfigSchema = z.object({
  version: z.literal(1),

  text: z.string(),
  textLayout: z.enum(['auto', 'vertical', 'horizontal', 'grid', 'perimeter']),

  shape: z.object({
    kind: z.enum(['circle', 'rect']),
    width: z.number().int().min(100).max(1000),
    height: z.number().int().min(100).max(1000),
    cornerRadius: zeroToOne,
    borderWidth: zeroToOne,
  }),

  ink: z.object({
    style: z.enum(['shu', 'haku']),  // 朱文 / 白文
    color: hexColor,
  }),

  font: z.object({
    family: z.string().min(1),
    weight: z.number().int().min(400).max(900),
  }),

  // 全体強度（0..1）
  effects: z.object({
    rotate: zeroToOne,
    jitter: zeroToOne,
    sizeVar: zeroToOne,
    strokeNoise: zeroToOne,
    edgeChip: zeroToOne,
    inkBleed: zeroToOne,
    stretch: zeroToOne,
  }),

  // 文字ごとの個別値（-1..+1）
  perChar: z.array(
    z.object({
      rotate: negOneToPlusOne,
      jitterX: negOneToPlusOne,
      jitterY: negOneToPlusOne,
      sizeVar: negOneToPlusOne,
      stretchX: negOneToPlusOne,
      stretchY: negOneToPlusOne,
    }),
  ),
})

export type StampConfig = z.infer<typeof StampConfigSchema>

finalRotation(i) = perChar[i].rotate * effects.rotate * MAX_ROTATION  // 15°
finalJitterX(i)  = perChar[i].jitterX * effects.jitter * cellWidth * 0.15
// ...

export function encodeConfig(cfg: StampConfig): Uint8Array {
  const w = new ByteWriter()

  // header
  w.u8(cfg.version)
  w.u8(SHAPE_KIND[cfg.shape.kind])
  w.u16(cfg.shape.width)
  w.u16(cfg.shape.height)
  w.u8(quantizeU8(cfg.shape.cornerRadius))
  w.u8(quantizeU8(cfg.shape.borderWidth))
  w.u8(INK_STYLE[cfg.ink.style])
  w.u24(Number.parseInt(cfg.ink.color.slice(1), 16))
  w.u8(TEXT_LAYOUT[cfg.textLayout])
  w.u16(FONT_FAMILY_TO_ID[cfg.font.family] ?? 1)
  w.u16(cfg.font.weight)

  // effects (7 × u8)
  w.u8(quantizeU8(cfg.effects.rotate))
  w.u8(quantizeU8(cfg.effects.jitter))
  // ... 残り 5 つ

  // text (UTF-8)
  const textBytes = new TextEncoder().encode(cfg.text)
  w.u16(textBytes.length)
  w.bytes(textBytes)

  // perChar entries (6 × i8 each)
  for (const c of cfg.perChar) {
    w.i8(quantizeI8(c.rotate))
    w.i8(quantizeI8(c.jitterX))
    w.i8(quantizeI8(c.jitterY))
    w.i8(quantizeI8(c.sizeVar))
    w.i8(quantizeI8(c.stretchX))
    w.i8(quantizeI8(c.stretchY))
  }

  return w.toBytes()
}

const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v))

export function quantizeU8(v: number): number {
  return Math.round(clamp(v, 0, 1) * 255)
}

export function quantizeI8(v: number): number {
  return Math.round(clamp(v, -1, 1) * 127)
}

function parseCurrentUrl(): { config: StampConfig; error: UrlError | null } {
  const result = searchParamsToConfig(new URLSearchParams(window.location.search))
  if (result.ok) return { config: result.config, error: null }
  // 失敗時はデフォルトに戻してバナーを出す（サイレントフォールバック禁止）
  return { config: DEFAULT_CONFIG, error: { reason: result.reason } }
}

export function useUrlState() {
  const [state, setState] = useState(parseCurrentUrl)

  useEffect(() => {
    const onPop = () => setState(parseCurrentUrl())
    window.addEventListener('popstate', onPop)
    return () => window.removeEventListener('popstate', onPop)
  }, [])

  const setConfig = useCallback((cfg, opts) => {
    const params = configToSearchParams(cfg)
    const url = `${window.location.pathname}?${params.toString()}`
    if (opts?.pushHistory) window.history.pushState(null, '', url)
    else window.history.replaceState(null, '', url)
    setState({ config: cfg, error: null })
  }, [])

  return { config: state.config, error: state.error, setConfig }
}

// 永続契約：id は一度採番したら変えない。削除時は deprecated + fallback で残す。
export const FONT_REGISTRY: readonly FontEntry[] = [
  { id: 1, key: 'shunju-tsu', /* ... */ },
  { id: 2, key: 'noto-serif-jp', /* ... */ },
  { id: 3, key: 'shippori-mincho', /* ... */ },
  // ... 17 種
]

describe('v1 fixtures', () => {
  for (const f of files) {
    it(`${f} decodes to expected config`, () => {
      const { v, p, expectedConfig } = JSON.parse(readFileSync(...))
      const params = new URLSearchParams()
      params.set('v', v)
      params.set('p', p)
      const r = searchParamsToConfig(params)
      expect(r.ok).toBe(true)
      if (r.ok) expect(r.config).toEqual(expectedConfig)
    })
  }
})

function decideStrategy(cfg: StampConfig, n: number): Strategy {
  if (cfg.textLayout === 'auto') {
    if (n === 1) return 'center'
    if (n === 2) return 'vertical'
    if (n <= 4) return 'grid'
    return 'perimeter'  // 5 文字以上は円周配置
  }
  // ... 明示指定もある
}

const segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' })

export function splitGraphemes(text: string): string[] {
  return Array.from(segmenter.segment(text), (s) => s.segment)
}

// FNV-1a 32-bit
export function hashString(s: string): number {
  let h = 0x811c9dc5
  for (let i = 0; i < s.length; i++) {
    h ^= s.charCodeAt(i)
    h = Math.imul(h, 0x01000193)
  }
  return h >>> 0
}

// mulberry32: 決定的 32-bit PRNG
export function mulberry32(seed: number): () => number {
  let a = seed >>> 0
  return () => {
    a = (a + 0x6d2b79f5) >>> 0
    let t = a
    t = Math.imul(t ^ (t >>> 15), t | 1)
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61)
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

export function deriveSeed(cfg: StampConfig): number {
  let h = 0x811c9dc5
  const mix = (b: number) => {
    h ^= b & 0xff
    h = Math.imul(h, 0x01000193)
  }

  const textBytes = new TextEncoder().encode(cfg.text)
  for (const b of textBytes) mix(b)
  mix(0) // separator

  for (const c of cfg.perChar) {
    const values = [c.rotate, c.jitterX, c.jitterY, c.sizeVar, c.stretchX, c.stretchY]
    for (const v of values) {
      const q = quantizeI8(v)
      mix(q < 0 ? q + 256 : q)
    }
  }
  return h >>> 0
}

const SAMPLES = 64

function perturbCircle(cx, cy, r, strokeWidth, opts): string {
  const pts: [number, number][] = []
  const amp = strokeWidth * 0.4 * opts.edgeChipStrength
  for (let i = 0; i < SAMPLES; i++) {
    const t = (i / SAMPLES) * Math.PI * 2
    const nx = Math.cos(t)
    const ny = Math.sin(t)
    const d = opts.noise(Math.cos(t) * 2, Math.sin(t) * 2) * amp
    pts.push([cx + nx * (r + d), cy + ny * (r + d)])
  }
  // M ... L ... Z で閉じる
  return /* ... */
}

export function applyStrokeNoise(ctx, width, height, strength, seed): void {
  if (strength <= 0) return
  const noise = makePerlin2D(seed)
  const img = ctx.getImageData(0, 0, width, height)
  const data = img.data
  const threshold = -0.6 + strength * 1.2
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      const i = (y * width + x) * 4
      if (data[i + 3]! === 0) continue  // 透明ピクセルはスキップ
      const n = noise(x * 0.04, y * 0.04)
      if (n < threshold) {
        data[i + 3] = Math.max(0, Math.floor(
          data[i + 3]! * Math.max(0, (n - threshold) * 3 + 1)
        ))
      }
    }
  }
  ctx.putImageData(img, 0, 0)
}

export function applyInkBleed(ctx, width, height, strength, ...) {
  if (strength <= 0) return
  const radius = 0.5 + strength * 3
  const off = offscreenFactory(width, height)
  // ... offscreen に現在のピクセルをコピー
  ctx.save()
  ctx.filter = `blur(${radius.toFixed(1)}px)`
  ctx.globalAlpha = Math.min(1, strength * 1.2)
  ctx.drawImage(off, 0, 0)
  ctx.restore()
}

export function buildSvg(l: LayoutResult, cfg: StampConfig): string {
  // URL 形式に正規化（i8/u8 に量子化）してから seed を作る
  const normalized = normalizeConfig(cfg)
  const seed = deriveSeed(normalized)
  const noise = makePerlin2D(seed)
  const effects = computeCharEffects(l, normalized)
  const font = getFontByKey(normalized.font.family)

  const frameSvg = buildFrame(l.frame, normalized.ink.color, normalized.ink.style, {
    edgeChipStrength: normalized.effects.edgeChip,
    noise,
  })
  const charsSvg = buildChars(l.chars, fontSpec, normalized.ink.color, normalized.ink.style, {
    rotations: effects.rotations,
    jittersX: effects.jittersX,
    /* ... */
  })

  return serializeSvg({ width: l.canvas.width, height: l.canvas.height, body: frameSvg + charsSvg })
}

export async function renderToCanvas(l, cfg, canvas, scale = 2) {
  const normalized = normalizeConfig(cfg)
  const svg = buildSvg(l, normalized)
  await rasterizeSvgToCanvas(svg, canvas, l.canvas.width, l.canvas.height, scale)
  const ctx = canvas.getContext('2d', { willReadFrequently: true })!
  const seed = deriveSeed(normalized)
  applyStrokeNoise(ctx, canvas.width, canvas.height, normalized.effects.strokeNoise, seed)
  applyInkBleed(ctx, canvas.width, canvas.height, normalized.effects.inkBleed)
}

async function main() {
  const entries = loadMyojiData('data/myoji.json')

  // 一覧ページ
  writeFileSync(join(OUT_ROOT, 'index.html'), renderIndex(entries), 'utf8')

  // 詳細ページ × 100
  for (const entry of entries) {
    const variants = renderVariants(entry.surname)  // 3 種類の SVG + 編集 URL
    const related = findRelated(entry, entries, 5)  // rank ±5 の関連苗字
    const dir = join(OUT_ROOT, entry.surname)
    mkdirSync(dir, { recursive: true })
    writeFileSync(join(dir, 'index.html'), renderDetail(entry, variants, related), 'utf8')
  }

  // OG 画像 × 100（Playwright で生成）
  const browser = await chromium.launch()
  for (const entry of entries) {
    const out = join(OUT_ROOT, entry.surname, 'og.png')
    await generateOgImage(browser, entry, out)
  }
  await browser.close()

  // サイトマップ
  writeFileSync('public/sitemap.xml', renderSitemap(entries), 'utf8')
}

export function findRelated(entry, entries, count): MyojiEntry[] {
  const sorted = [...entries].sort((a, b) => Math.abs(a.rank - entry.rank) - Math.abs(b.rank - entry.rank))
  return sorted.filter((e) => e.surname !== entry.surname).slice(0, count)
}

describe('no Math.random in pure layers', () => {
  const PURE_DIRS = ['src/state', 'src/layout', 'src/render']
  for (const dir of PURE_DIRS) {
    it(`${dir} has no Math.random`, () => {
      const offenders: string[] = []
      for (const file of walk(dir)) {
        const contents = readFileSync(file, 'utf8')
        if (/Math\.random\s*\(/.test(contents)) offenders.push(file)
      }
      expect(offenders).toEqual([])
    })
  }
})

it('produces byte-identical SVG for the same config', () => {
  const cfg = withAllEffects('佐藤太郎')
  const l = layout(cfg)
  const a = buildSvg(l, cfg)
  const b = buildSvg(l, cfg)
  expect(a).toBe(b)
})

it('survives URL round-trip', () => {
  const cfg = withAllEffects('佐藤太郎')
  const decoded = decodeConfig(encodeConfig(cfg))
  const l = layout(decoded)
  expect(buildSvg(l, decoded)).toBe(buildSvg(layout(cfg), cfg))
})