プロダクト一覧へ戻るsumigram

sumigram — ことばを墨の紋様に

入力したことばを、決まったかたちの墨の紋様に変換するジェネレーター。

概要

入力した文章を墨の紋様に変換するジェネレーターです。文章のハッシュが紋様の骨格を、単語のハッシュが一画一画の筆致を決めるため、同じことばはいつでも同じかたちになり、同じ単語はどの文章の中でも同じ筆致で現れます。

日本語の書きかたそのものを描画規則に落とし込みました。助詞などの機能語は細くつながる線(連綿)になり、句読点は筆の間合いとして紋様に空白を作り、4〜8語ごとに墨の濃さが戻る(墨継ぎ)。文末が「。」なら閉じた縁、「?」なら開いた縁になります。書体は墨環・家紋・盆栽の3種類で、それぞれに合う語数の上限を持たせ、入力欄の中で「どこから先が紋様に入らないか」を色分けして示します。

ビルドもフレームワークも使わない素の JavaScript + Canvas 2D で、Cloudflare Workers に静的配信しています。紋様をカードとして贈るときは本文を URL のフラグメントに載せるため、本文がサーバーに届くことはありません(アクセス解析にもフラグメントを渡さない実装で、テストで固定しています)。描画命令列のスナップショットを含む50件のテストを GitHub Actions で自動実行し、公開済みのカードの絵が変わらないことを保証しています。

主な機能

  • 同じことばは、いつも同じ紋様(ハッシュ由来の決定論生成)
  • 墨環・家紋・盆栽の3書体と、日本語・英語の両対応
  • 助詞・句読点・文末記号を筆致に反映する独自の描画規則
  • 本文をサーバーに送らないカード共有(URL フラグメント)
  • 描画命令列のスナップショットテスト50件+CI