ルーレットをブログやサイトに埋め込み
項目を入力して、色とサイズを選び、コードを1行コピー。HTMLや埋め込みリンクが使えるページなら、その場で回せるルーレットになります。
カラーテーマ
<iframe src="https://randompickerwheel.app/ja/embed/wheel?t=%E8%AA%B0%E3%81%8B%E3%82%89%E3%81%AB%E3%81%99%E3%82%8B%EF%BC%9F&items=%E3%81%95%E3%81%8F%E3%82%89%2C%E3%81%AF%E3%82%8B%E3%81%A8%2C%E3%82%86%E3%81%84%2C%E3%81%9D%E3%81%86%E3%81%9F%2C%E3%82%81%E3%81%84%2C%E3%82%8A%E3%81%8F&theme=prism" width="420" height="540" style="border:0;max-width:100%" title="誰からにする？" loading="lazy"></iframe>
https://randompickerwheel.app/ja/embed/wheel?t=%E8%AA%B0%E3%81%8B%E3%82%89%E3%81%AB%E3%81%99%E3%82%8B%EF%BC%9F&items=%E3%81%95%E3%81%8F%E3%82%89%2C%E3%81%AF%E3%82%8B%E3%81%A8%2C%E3%82%86%E3%81%84%2C%E3%81%9D%E3%81%86%E3%81%9F%2C%E3%82%81%E3%81%84%2C%E3%82%8A%E3%81%8F&theme=prism- 授業ページ・学習サイトGoogleサイトやMoodleの授業ページに、指名ルーレットやお題ルーレットを置けます。
- Notionのチームページ掃除当番、ランチ、朝会の発表順をNotionの中でそのまま決められます。
- ブログの企画記事今日の献立、ブログのお題、読者参加型の抽選ネタに。
- サークル・イベントの告知ビンゴ前の余興やアイスブレイク、次に遊ぶゲーム決めに。
1分でルーレットを埋め込む
項目を入力
タイトルと項目を1行ずつ入力します。右のプレビューは実際の埋め込みと同じなので、回して確認できます。
ページに合わせて調整
4種類のカラーテーマとサイズから選択。タイトルや紙吹雪、クレジットリンクは不要ならオフにできます。
コピーして貼り付け
iframeコードをHTMLブロックに貼り付けます。Notionのようにリンクしか受け付けないサービスでは、リンクだけをコピーしてください。
このルーレットを埋め込むメリット
サービス別の貼り付け方
多くのブログサービスやサイト作成ツールでは、HTMLを入力できる場所にiframeコードを貼れます。Notionのようにリンクだけを受け付けるサービスもあります。iframeが使えない場合も、リンクを貼れば新しいタブで開いて使えます。
| サービス | 貼り付ける場所 | ポイント |
|---|---|---|
| WordPress(ブロックエディタ) | カスタムHTMLブロックにコードを貼る | 自分でサーバーに設置したWordPressならそのまま表示されます。WordPress.comはプランによってiframeが削除されることがあります。 |
| はてなブログ | 編集画面の HTML編集 タブに貼る | 見たままモードでは崩れることがあるので、HTML編集で貼り付けてください。 |
| Googleサイト | 挿入 → 埋め込む → 埋め込みコード | コードを貼って 次へ → 挿入 。角をドラッグして大きさを調整します。 |
| Notion | /embed と入力し、コードではなくリンクを貼る | ブロックの下端を540px程度まで広げると、回すボタンまで表示されます。 |
| Moodle | ページやラベルのエディタでHTMLソース表示に切り替える | 保存後に消える場合、iframeの使用が制限されている可能性があります。管理者に確認してください。 |
| Wix | 追加 → 埋め込み → HTML埋め込み | コードを選んで貼り付け、要素の幅と高さを合わせます。 |
| note、アメブロ | iframeは使えません | リンクを貼り、読者には新しいタブで開いてもらいます。 |
リンクに含まれる設定
設定はすべてURLの一部です。毎週メンバーが変わる場合なども、このページに戻らずURLを直接書き換えて使えます。
| パラメータ | 例 | 意味 |
|---|---|---|
| items | items=A%2CB%2CC | 項目。カンマ区切りでURLエンコードします。2つ以上必要です。 |
| t | t=%E8%AA%B0%E3%81%8B%E3%82%89 | ルーレット上のタイトル。空にすると表示しません。 |
| theme | theme=ocean | prism、ocean、candy、mono のいずれか。 |
| title | title=0 | タイトル行を非表示にします。 |
| confetti | confetti=0 | 当選時の紙吹雪をオフにします。 |
| brand | brand=0 | Made with Random Picker Wheel のリンクを非表示にします。 |
項目はリンクの中にそのまま入るため、ページのソースを見れば誰でも読めます。成績や連絡先などの個人情報は入れないでください。
サイズの選び方
サイズはコードの幅と高さを決めます。中のルーレットは枠いっぱいに拡大縮小し、スマホでは max-width により画面幅まで縮むので、大サイズでも横スクロールは発生しません。
| サイズ | 枠 | 向いている場所 |
|---|---|---|
| 小 | 320 × 440 px | サイドバー、Notionの狭いカラム |
| 中 | 420 × 540 px | ブログ記事、Googleサイト、授業ページ |
| 大 | 560 × 680 px | 全幅のページ、教室のプロジェクター投影 |
よくある質問
埋め込みルーレットは無料ですか？
はい。アカウント登録も利用回数の制限もなく、枠内に広告も表示されません。
Notionにルーレットを入れるには？
リンクのみ の欄からリンクをコピーし、Notionで /embed と入力してリンクを貼り、埋め込みを作成します。ブロックの下端を540px程度まで広げると全体が見えます。
埋め込んだ後に項目を変更できますか？
項目はリンクに含まれているので、変更するには新しいコードに貼り替えます。ここで作り直すか、URLの items 部分を直接書き換えてください。
iframeコードが消えてしまうのはなぜ？
WordPress.comの一部プランやnote、権限が制限されたMoodleなど、セキュリティのためにiframeを削除するサービスがあります。その場合はリンクを貼って、新しいタブで開いてもらいましょう。
結果は本当にランダムですか？
はい。止まる位置は訪問者のブラウザで crypto.getRandomValues を使って決まるので、どの項目も同じ確率です。サイト運営者が結果を操作することはできません。
スマホでも使えますか？
使えます。枠は画面幅まで縮み、ルーレットも一緒に縮小します。幅280px程度まで読みやすく、回すボタンも押しやすい大きさです。
Made with のリンクは消せますか？
はい。コードをコピーする前に Made with リンクを表示 をオフにしてください。残していただけると励みになります。