シミュレーター埋め込み利用ガイド - サイトスワップマスター

概要

サイトスワップマスターは、URLにパラメータを追加することで表示や動作をカスタマイズできます。シミュレーション設定を事前に指定してリンクを共有したい場合やサイトにシミュレータを埋め込みたい場合に便利です。

対応ページ
URLパラメータは以下のページでのみ使用できます：

Simulation(多機能シミュレーター): https://umejugg.com/siteswapmaster/simulation
Viewer(表示、埋め込み専用): https://umejugg.com/siteswapmaster/viewer
Embed(埋め込み専用): https://umejugg.com/siteswapmaster/embed

基本的な使用方法
URLの末尾に「?」を付けてパラメータを指定します。複数のパラメータは「&」で区切ります。

GitHubでの公開
本ツールは GitHub でソースコードを公開しています。リポジトリからダウンロードしてご自身のサーバーに配置し、埋め込んで利用することも可能です。

例：

<div style="max-width: 300px;width:100%;"><!-- ここのwidthを変更することで表示サイズを変更可能 -->
                        <iframe 
                        src="https://umejugg.com/siteswapmaster/embed?pattern=97531&speed=90&object=club"
                        style="width: 100%; aspect-ratio: 3 / 5; border:0;" 
                        scrolling="no">
                        </iframe>
                    </div>

パラメータ一覧

画面幅が狭い端末の場合、横スクロールでテーブルを確認してください

パラメータ	説明	設定値	デフォルト	使用例
pattern	サイトスワップを入力	英数列のみで表されるサイトスワップ	なし	?pattern=db97531
encoded-pattern	URLエンコードされたサイトスワップを入力	URLエンコードされたサイトスワップ	なし	?encoded-pattern=(6x%2C4)(%5B48%5D%2C6x)
speed	アニメーション速度	0~200の数値	100	?speed=150
camera	視点位置	-100~100の数値	0	?camera=50
object	オブジェクトの種類	ball, ring, clubなど	ball	?object=ring
text	テキスト表示位置(複数指定可能)	none, bottom, top, side (複数指定可)	top	?text=top,side
show-header	ヘッダーを表示するか	true, false	true	?show-header=false
show-player	棒人間を表示するか	true, false	true	?show-player=false
random-color	ランダムカラーを使用するか	true, false	false	?random-color=true
background-color	背景色の指定	6桁カラーコード	5a5a5a	?background-color=FF0000
object-color	オブジェクトの色指定	6桁カラーコード	FFFFFF	?object-color=00FF00
player-color	棒人間の色指定	6桁カラーコード	000000	?player-color=0000FF
side-text-color	サイドテキストの色指定	6桁カラーコード	FFFFFF	?side-text-color=FFFFFF

URLエンコードについて

サイトスワップに英数列以外の記号（カンマ、角括弧など）が含まれる場合、encoded-patternパラメータを使用してURLエンコードされた形式で指定する必要があります。

なぜURLエンコードが必要？
URLには使用できない特殊文字があります。例えば、括弧やカンマなどはURL内で別の意味を持つため、そのまま使用すると正しく解釈されません。これらの文字をURLで安全に使用するために、エンコード（変換）が必要です。

エンコード済みURLの作成方法

方法1: 共有機能を使用

https://umejugg.com/siteswapmaster/share のページで、サイトスワップを入力すると、エンコード済みのURLが自動生成されます。

方法2: プログラムで生成（開発者向け）

JavaScriptのencodeURIComponent()関数を使用してパターンをエンコードできます。

const pattern = "(6x,4)*"; const encodedPattern = encodeURIComponent(pattern); const url = `https://umejugg.com/siteswapmaster/embed?encoded-pattern=${encodedPattern}`; // 結果: https://umejugg.com/siteswapmaster/embed?encoded-pattern=(6x%2C4)*

使用例

Viewer①

サイトスワップ(6x,4)*、テキスト表示なし。(Viewerは速度変更バーあり)

Viewer②

サイトスワップ441、ダークブルーの背景、赤いオブジェクト、青い棒人間、ヘッダー無し。(Viewerは速度変更バーあり)

埋め込み専用①

サイトスワップ97531、速度120、リング、テキストを下部表示、視点を右に25移動

埋め込み専用②

サイトスワップ534、速度80、クラブ、棒人間非表示、黒背景に金色オブジェクト、テキストをサイドに表示