メインコンテンツへスキップ

更新履歴

リリース内容と内部的な改善履歴

ルーレット本体の実装

pre-1.0 · 2026-08-29

12種類のページ、ドラッグできるルーレット、サウンド、共有リンク、そして再描画を抑えたレンダラー。

抽選機能

  • 動く前に抽選。 スピンを開始すると、crypto.getRandomValues と棄却サンプリングによって即座に当選項目が選ばれ、アニメーションはその項目を狙って回転します。強くスワイプしても回転が長くなるだけで、抽選結果が変わることはありません。
  • 公平性の解説ページ。 掲載されている解説文そのものがアルゴリズムです。ページ上に書かれているコードが、実際に実行されているコードそのものです。
  • 比率と重複。 項目の比率は抽選における持ち分であり、実際の当選確率(パーセント)として表示されます。同じテキストの項目が2つあっても2つの項目のまま保持され、勝手に統合されることなく重複件数がリストに明示されます。

ルーレット機能

  • 12種類のページ。 各ページはすでに項目が入力された状態で開き、数値範囲、アルファベット、チーム分け、クラス名簿、抽選履歴ログなど、それぞれの用途に応じた独自のコントロールを1つずつ備えています。
  • ドラッグして離す。 指やカーソルを離した速度が追加の回転力になります。回転中のクリックで早めに停止でき、スペースキーやEnterキーを押せばボタンを探さずにスピンできます。
  • 音声とフィードバック。 ポインターが仕切りを通過するタイミングに合わせた刻み音、確定音、キャンセル可能なカウントダウン、スマートフォンの振動など、それぞれ個別にオン/オフでき、現在の状態もひと目で分かります。
  • プレゼンテーションモード。 サブ操作が非表示になり、ルーレットが画面の短辺の70%以上の大きさに拡大。結果は部屋の後ろからでも見えるハイコントラストなパネルに表示されます。
  • さらに2つの表示形式。 円形が適さない場面のために、スロット形式とカード形式の表示も用意しました。

保存と共有

  • 共有リンクはスナップショット。 ルーレットのデータはURL内に直接エンコードされるため、リンクに有効期限はなく、後からルーレットを編集しても共有相手が開く内容には影響しません。
  • 保存したルーレット、スピン履歴、比率プリセットはすべてブラウザ内に保存され、別の環境へ移行するためのファイルとしてエクスポートできます。アカウント機能が存在しないため、端末間でデータを移行する唯一の手段はこのファイルとなります。

内部構造

  • Canvasレンダラーへの移行。 表示内容が変更されたときに盤面を1度だけ描画し、回転は要素のCSS Transformで行うため、スピン中のフレーム単位の負荷は一切ありません。項目のテキストは非表示の実際のリスト要素として保持されます。Canvasは単なるピクセルであり、スクリーンリーダーが読み上げるためのテキスト構造が必要だからです。
  • 視覚効果を減らす設定への対応。 prefers-reduced-motion: reduce の環境では回転アニメーションをスキップし、即座に結果を通知します。調査した競合3社では、この設定への対応は皆無でした。
  • 結果の読み上げ対応。 当選結果はルーレット上に描かれたピクセルとしてではなく、選択可能なテキストとしてARIAライブリージョンに出力されます。

シンプルなツールサイトへ削ぎ落とす

pre-1.0 · 2026-08-27

このリポジトリのベースとなったSaaSテンプレートの不要な機能を、単に無効化するのではなく完全に削除しました。

TossWheel はSaaSスターターテンプレートから開発が始まりました。そしてこの日の作業の大半は「引き算」でした。

削除したもの

  • アカウント、ダッシュボード、管理画面、各種設定。 ログインするものも、ログインの裏にある機能も存在しないため、単に機能をOFFにするのではなく画面やUIごと完全に削除しました。フラグで無効化された機能であっても、その背後にあるコードは配信されてしまうからです。
  • データベース、オブジェクトストレージ、キーバリューストレージ。 Workerはバインディングを一切持たない構成になりました。リストはお使いのブラウザ内に保持され、共有ルーレットはリンクの中にすべて含まれて渡されます。
  • 決済、ニュースレター、AI機能。 ここではどれも必要ありませんでした。

決定した仕様

  • デザイン方針A「計測器のような佇まい」。 3つの高精度プロトタイプを作成し、1つを選定しました。左側にルーレット、その隣にリスト、ルーレットの下に操作アクションを配置し、ページ上でルーレットだけが唯一の色を持つオブジェクトとなるデザインです。
  • 公開前スイッチ。 公開前チェックリストが完了するまですべてのレスポンスに noindex を付与し、作りかけのページがインデックスされて後からインデックス削除に追われるのを防ぎます。

なぜこれを明文化するのか

後からデータベースやログイン機能を再び導入することは、単なる実装の詳細ではなくプロダクトの根幹に関わる方針変更となります。この厳格な制約があるからこそ、このサイトのルーレットはアカウントを必要とせず、皆様のリストのコピーをサーバーに保持しないのです。