Spin And Wheel

Webサイトにルーレットを埋め込む

Webサイト、ブログ、クラスのページに、実際に回せるルーレットを1分以内で設置できます。ルーレットを選び、項目を入力して、HTMLを2行貼り付けるだけ。ウィジェットは無料でアカウント不要、訪問者に広告を表示せず、トラッキングCookieも使いません。

埋め込みコードを作成

空欄のままにすると、そのルーレットの標準の項目が使われます。項目はサーバーではなく、コードの中に保存されます。

サイズ

Notion、Google Sitesの「URL で指定」など、HTMLではなくリンクを求めるエディタ用です。

ライブプレビュー

3ステップでルーレットを埋め込む方法

  1. ルーレットを選んで項目を入れます。このページのジェネレーターで、名前ルーレット、イエス・ノールーレット、数字、文字、ツイスター、ご飯ルーレットのどれかを選び、1行に1項目ずつ入力します。リストを空欄にすれば、ルーレットの標準の項目がそのまま使われます。
  2. サイズを選んでコードをコピーします。高さは小が400 px、中が520 px、大が640 pxで、幅は同じ上限まで100%です。コードは標準的なHTMLの<iframe>とリンク1行だけです。
  3. コードをHTMLブロックに貼り付けて公開します。ブロックの名前は、WordPressでは「カスタムHTML」、Wixでは「Embed HTML」、Squarespaceでは「Code」、Shopifyでは「カスタムLiquid」、Webflowでは「Code Embed」です。リンクしか受け付けないエディタ（Notion、Google Sitesの「URL で指定」）には埋め込みリンクを使います。

さくら、はると、ゆいの3項目が入った名前ルーレットを、中サイズで埋め込む場合の完全なコードです。

<iframe src="https://spinandwheel.com/ja/?mode=embed&amp;entries=%E3%81%95%E3%81%8F%E3%82%89,%E3%81%AF%E3%82%8B%E3%81%A8,%E3%82%86%E3%81%84" title="Webルーレット" width="100%" height="520" style="max-width:520px;border:0" loading="lazy" allow="fullscreen; clipboard-write"></iframe>
<p><a href="https://spinandwheel.com/ja/">Webルーレット（Spin and Wheel）</a></p>

項目はsrcのアドレスに入っています（entries=、長いリストでは圧縮されたw=）。mode=embedはルーレットだけを表示する指定です。2行目はルーレットのページへの普通のリンクです。

コードを貼り付ける場所

コードは標準的なHTMLの<iframe>とリンク1つなので、HTMLを受け付けるサイトならどこでも使えます。よく使われるエディタごとの手順は次のとおりです。

WordPress

ブロックエディターでカスタムHTMLブロックを追加し（/htmlと入力）、コードを貼り付けてプレビューをクリックします。自分でホストしているWordPressでは標準でiframeを使えますが、WordPress.comでは有料プランが必要な場合があります。

Wix

Wixエディタで Add Elements（+）→ Embed Code → Embed HTML をクリックし、Code を選んでコードを貼り付け、Update をクリックします。その後、ボックスの高さを520 pxほどにドラッグします。WixはカスタムHTMLを独自の枠の中に表示するため、ルーレットは動きますが、その下のリンクは枠の中で開きます。

Squarespace

ページを編集し、Add Block → Code をクリックします。ブロックはHTMLのままにしてコードを貼り付け、ページを保存します。ルーレットは公開ページに表示されます。エディタ内では、Codeブロックの代わりにプレースホルダーが表示されることがあります。

Shopify

オンラインストア → テーマ → カスタマイズ を開き、セクションを追加 → カスタムLiquid を選んで、Liquidコードの欄にコードを貼り付けて保存します。Dawnなどの無料テーマにもカスタムLiquidセクションがあります。

Webflow

AddパネルからCode Embed要素をページにドラッグし、コードを貼り付けて Save & Close をクリックし、サイトを公開します。カスタムコードの埋め込みには、Webflowの有料サイトプランが必要な場合があります。

Blogger

投稿を開き、鉛筆アイコンのメニューでエディタを作成ビューからHTML ビューに切り替え、ルーレットを表示したい位置にコードを貼り付けて公開します。サイドバーに置く場合は、レイアウト → ガジェットを追加 → HTML/JavaScript を使います。

Google Sites

挿入 → 埋め込む を選びます。「埋め込みコード」にはコード全体を、「URL で指定」には埋め込みリンクを貼り付けます。Google Sitesはすべての埋め込みを独自の枠の中に表示するため、ルーレットは動きますが、その下のリンクは枠の中で開きます。

Notion

/embedと入力し、埋め込みリンク（HTMLコードではありません）を貼り付けて、リンクを埋め込むボタンを押します。ルーレット全体が見えるように、ブロックの角をドラッグして高さを520 pxほどにします。

Canvas、Moodleなどの学習管理システム（LMS）

ページをHTMLエディタで開き（Canvas：</>ボタン、Moodle：AttoまたはTinyMCEエディタのHTMLボタン）、コードを貼り付けます。保存後にルーレットが消える場合は、管理者が他サイトのiframeをブロックしています。spinandwheel.comを許可するよう依頼してください。

一般的なHTMLページ

ページの<body>にコードを貼り付けます。iframeはサイズの上限まで幅100%で、loading="lazy"で読み込まれるため、ページ上部の表示を遅くしません。

埋め込みルーレットのしくみ

ウィジェットの中身は、本物のSpin and Wheelのページを軽量な埋め込みモード（?mode=embed）で表示したものです。表示されるのはルーレットと小さな「Spin and Wheelで開く」リンクだけ。訪問者は中央のボタンで回し、当選結果をカードで確認して、もう一度回したり、当選した項目をリストから外したりできます。ルーレットは与えられたボックスの幅と高さに合わせて、320 pxのスマートフォンからパソコンのサイドバーまでサイズが変わります。

項目はiframeのアドレスに入って届きます。短いリストはentries=、長いリストは圧縮して（deflate-raw、base64url）w=として渡されます。サーバーへのアップロードや保存は一切なく、訪問者のブラウザのストレージにも何も書き込まないため、どの訪問者もあなたのリストから始まります。カスタマイズパネルで設定したカラーテーマ、回転時間、サウンドも同じ方法（cfg=）で引き継がれます。

毎回の回転には、spinandwheel.comと同じくWeb Crypto APIのcrypto.getRandomValuesを使うため、N個の項目それぞれの当選確率は1/Nです。埋め込みは広告を表示せず、トラッキングCookieを設定せず、サービスワーカーもインストールしません。読み込みと回転の回数だけを、Cookieを使わずに匿名で数えています。

ルーレットの下の1行は、spinandwheel.comにあるルーレットのページへの普通のリンクです。任意なので編集や削除もできますが、残しておくと、ほかの先生やクリエイターがこのツールを見つけやすくなります。ルーレットの改良は埋め込みにも自動で反映されます。項目を変えたいときは、新しいコードを作成して古いコードと差し替えてください。

FAQ

埋め込みウィジェットのよくある質問

名前ルーレットを自分のWebサイトに無料で埋め込めますか？
はい。名前ルーレットをはじめ、Spin and Wheelのすべてのルーレットは、個人・学校・商用のサイトにHTML 2行で無料で埋め込めます。アカウントもAPIキーも不要で、利用回数の上限もありません。コードをコピーして貼り付けるだけです。

ウィジェットに広告は出ますか？訪問者を追跡しますか？
いいえ。埋め込んだルーレットには広告が表示されず、トラッキングCookieも設定されず、項目や設定が訪問者のブラウザに保存されることもありません。埋め込みが使われていることを確認するため、読み込みと回転の回数だけをCookieなしで匿名で数えています。

訪問者は埋め込んだルーレットの項目を変更できますか？
訪問者はあなたが選んだ項目でルーレットを回し、次の回転のために当選した項目を外すことができます。リスト全体を編集するには「Spin and Wheelで開く」をクリックします。新しいタブで、あなたの項目が入った完全版のルーレットが開きます。

あとから項目を変更するには？
このページで新しい項目を入れてコードを作り直し、サイトの古いコードと差し替えてください。項目はコードの一部なので、差し替えるまで古い埋め込みは元のリストのままです。

埋め込んだルーレットはランダムで公平ですか？
はい。当選項目はcrypto.getRandomValues（Web Crypto API）で選ばれるため、spinandwheel.comと同じく、毎回N個の項目それぞれがちょうど1/Nの確率で当選します。

どのサイズを選べばいいですか？
ほとんどのブログ記事には中（高さ520 px）が合います。サイドバーや細い列には小（400 px）、全幅のページやプロジェクターには大（640 px）を選んでください。幅は同じ上限まで100%で、ルーレットは常にボックス内に収まります。

埋め込んだルーレットはスマートフォンでも動きますか？
はい。iframeは幅100%で、ルーレットは使える幅と高さに合わせて拡大・縮小します。700 px未満では、当選結果が大きなボタン付きのボトムシートで表示されます。

ライブ配信用にOBSへルーレットを埋め込めますか？
OBS Studioでは、このウィジェットではなく配信専用のリンクを使ってください。透過表示のオーバーレイと操作用のドックがあります。くわしくはOBS設定ガイドで説明しています。