埋め込みガイド
Squads のフォーメーションを、あなたのブログや Web サイト、アプリに埋め込めます。無料でご利用いただけます(利用規約をご確認ください)。方法は目的に合わせて3つあります。
1. コードを貼るだけ(ブログ・CMS 向け)
Squads でフォーメーションを作り、ヘッダーの </> ボタン(スマホは共有メニュー内)から「埋め込みコード」を開きます。高さを選び(左右向きの盤面は低めの高さが既定になります)、「コードをコピー」して記事の HTML に貼り付けるだけです。「サンドボックス」で、ブログ記事に貼ったときの見え方を事前に確認できます。
<iframe src="https://squads.xxox-xxox-xxox.jp/embed#d=…" width="100%" height="600" style="border:0" loading="lazy" title="フォーメーション"></iframe>
- 盤面のデータは URL の
#d=…に含まれます。サーバーには保存されません。 - 盤面の向き(縦・横)は、作成したとおりに表示されます。
- 埋め込み先では閲覧のみです(コマは動かせません)。
?edit=1を付けると編集できますが、変更は保存されません。 - 表示言語は、ダイアログの「言語」で選べます。「自動」なら見る人のブラウザの言語(日本語なら日本語、それ以外は英語)で表示されます。日本語・English を選ぶと、URL に
?lang=ja/?lang=enが付きます。 - URL が非常に長くなると、サイトによっては切り捨てられます。その場合は下の方法 2 を使ってください。
- フォーメーションを更新したら、コードを作り直して貼り替えてください。
2. SDK で連携する(アプリ開発者向け)
自分のアプリからデータを渡し、操作結果を受け取れます。データの保存はホストアプリ側で行います。
<div id="pitch" style="height: 600px"></div>
<script type="module">
import { mount } from 'https://squads.xxox-xxox-xxox.jp/embed-sdk.js'
const embed = mount(document.getElementById('pitch'), {
src: 'https://squads.xxox-xxox-xxox.jp/embed',
squad, // 盤面のデータ
options: { mode: 'edit', lang: 'ja' }, // lang を省くと見る人のブラウザの言語
onChange: (squad) => save(squad), // 保存はホスト側で
})
</script>
3. postMessage を直接使う
SDK を使わず、iframe に squads:init を送る方法です。
window.addEventListener('message', (e) => {
if (e.source !== iframe.contentWindow) return
if (e.data?.type === 'squads:ready') {
iframe.contentWindow.postMessage({ type: 'squads:init', v: '1.0', squad }, ORIGIN)
}
})
方法 2・3 のメッセージ仕様(オプション、PNG 書き出しなど)は「Squads 埋め込みプロトコル v1」を参照してください。
対戦(2チーム)を埋め込む
2つのスカッドを並べた対戦も、上のどの方法でも埋め込めます。
- 方法 1: Squads で対戦を開いた状態で「埋め込みコード」を作ると、対戦のまま埋め込まれます。対戦の中で動かしたコマの位置・ボール・隠したコマも、そのまま表示されます。
- 方法 2・3:
opponentにもう1つのスカッドを渡します。同じスカッド同士の対戦にするときは、squadと同じ id のスカッドを渡します。 - 編集できる埋め込み(方法 1 の
?edit=1、方法 2・3 のmode: 'edit')では、コマとボールをドラッグして相手のハーフにも動かせます。 - 動かした配置は、スカッドとは別の
layoutとして届きます。スカッド(選手・フォーメーション)は変わりません。 - ボールを出す・コマを隠すといった配置は、ホストから
layoutで指定できます(埋め込みの画面では切り替えられません)。
let layout = null // 保存してある配置があれば入れておく
const embed = mount(document.getElementById('pitch'), {
src: 'https://squads.xxox-xxox-xxox.jp/embed',
squad, opponent, layout, // opponent を渡すと対戦になる
options: { mode: 'edit' },
onChange: (squad, opponent, next) => {
layout = next // 対戦の配置(単体では null)
save(squad, opponent, layout) // スカッドと一緒に保存する
},
})
// ホスト側でスカッドを差し替えるときは、受け取った配置を渡し直す
embed.set(updatedSquad, opponent, layout)
layout を渡さずに差し替えると、配置は初期状態(フォーメーションどおり・ボール無し)に戻ります。相手チームを別のスカッドに替えるときは、配置がそのスカッドに合わないので渡さないでください。layout の形と座標の向きは「Squads 埋め込みプロトコル v1」を参照してください。
Claude や ChatGPT などの AI アシスタントから盤面を作る方法は「AI アシスタント連携ガイド」をご覧ください。
お願い
- 埋め込みページ右下の「Squads」リンクは、消さずにそのままにしてください。
- 公序良俗に反するサイトへの埋め込みはお断りしています。