ESKEES の作品を自分のサイトに置く

アルファ版（2026 年 9 月時点）の内容です。予告なく変更される場合があります。

動作例

下は、このページに <eskees-player> で置いた「かさねて 2048」です。押すと始まります（矢印キー・スワイプで操作）。

1. showcase の作品を埋め込む

showcase の作品のページで「埋め込む」を押すと、貼り付けるコードが表示されます。作品の URL が https://showcase.eskees.com/w/作品の ID なら、次のとおりです。

<iframe src="https://showcase.eskees.com/embed/作品の ID"
  style="width: 100%; aspect-ratio: 16 / 9; border: 0"
  allow="autoplay; fullscreen; gamepad" loading="lazy"></iframe>

• 押すまで作品を読み込みません（ページを開いただけでは通信しません）。
• スコアが出ると、その場でランキングに載せられます（押したときだけ送ります）。
• 公開をやめた作品は「この作品は見つかりません」と表示されます。

2. 自分の .eskx を置く（ESKEES Player）

ESKEES の「エクスポート ▾」で出力した .eskx を自分のサーバーに置き、次のように書きます。

<script type="module" src="https://showcase.eskees.com/player/1/eskees-player.js"></script>

<eskees-player src="/games/my-game.eskx" style="width: 800px; aspect-ratio: 16 / 9"></eskees-player>

属性

大きさはページの側で決めます。指定しなければ、横幅いっぱい・16:9 で表示します。作品のキャンバスと同じ縦横比（aspect-ratio）にすると、余白が出ません。

イベント

document.querySelector('eskees-player').addEventListener('eskees-score', (e) => {
  console.log(e.detail.board, e.detail.value);
});

JavaScript から置く

<script type="module">
  import { mount } from 'https://showcase.eskees.com/player/1/eskees-player.js';
  const game = await mount(document.getElementById('game'), '/games/my-game.eskx', { autoplay: true });
  // game.restart() で最初から、game.togglePause() で一時停止、game.destroy() で外す
  // 背景を透明にするときは { autoplay: true, transparent: true, fit: 'contain' }
  // Twitch のチャットにつなぐときは { twitch: 'チャンネル名' }。自分でイベントを流すときは game.live({ kind: 'chat', source: 'test', user: 'たろう', text: '草', amount: 0 })
</script>

作品の変数に値を入れる

ページやアプリが持っている値（声の大きさ・アプリの状態など）を、作品に渡せます。<eskees-player> の要素にも、mount の戻り値にも同じメソッドがあります。

const orb = await mount(el, '/orb.eskx', { autoplay: true, transparent: true, fps: 30, scale: 0.75 });
orb.set('state', 2);      // 作品の側は on change state で受ける
orb.set('level', 0.8);    // var level = 0 to 1 と宣言しておく

Player をアプリやサイトに同梱する

ネットにつながない環境（スマートフォンのアプリの中など）では、Player のファイルを自分で置けます。

• 置くファイル: eskees-player.js と、同じ場所の chunks/ フォルダを丸ごと置きます。ESKEES CLI を入れた場所の engine/play/ にも同じものがあります。chunks/ の中身は、物理（planck.js）か文字の演出（JIZURA）を使う作品のときだけ読み込まれます
• 作品の渡し方: mount(el, ArrayBuffer, …) で .eskx の中身をそのまま渡せます（URL から取りに行かない）
• file:// では動きません（ES モジュールと import() をブラウザが止めるため）。https:// か、アプリの組み込みのサーバー（Capacitor の https://localhost など）から開きます
• WebGL2 が必要です（代わりの描き方はありません）
• ネットを使うのは、Google Fonts の書体を使う作品・JIZURA の書体・twitch / relay を指定したときだけです。スコアの送信や計測はしません
• 画面が隠れている間は描画もスクリプトも止まります。一時停止中と、開き終わる前に流した live() は捨てられます。前面に戻ったら、状態を set で入れ直すと確実です（set の値は捨てられません）
• ESKEES Player は中断データ（続きから再開）を残しません。saves が決めるのは、スクリプトの save を残す場所だけです
• 同梱して配布するときは、LICENSE.md と NOTICE.md（ESKEES CLI を入れた場所にあります）も一緒に入れてください

3. Studio から Web ページとして書き出す

ESKEES Studio の「エクスポート ▾」→「Web ページとして書き出す（HTML）」で、作品を埋め込んだ HTML 1 ファイルができます。

• その HTML をサーバーに置くだけで遊べます。.eskx を別に置く必要も、CORS の設定も要りません。
• 再生は ESKEES Player（CDN）です。見る人のブラウザが showcase.eskees.com から Player を読み込みます。
• 作品は HTML の中に入るので、ファイルは作品の 4/3 ほどの大きさになります。大きな作品は、2. の方法（.eskx を置いて <eskees-player src>）のほうが軽くなります。

置けるサイト・置けないサイト

• 置ける: HTML と JavaScript を自分で書けるところ（自分のサーバー・レンタルサーバー・GitHub Pages・Netlify・Vercel・Cloudflare Pages など）。自分で運営する WordPress では、カスタム HTML のブロックに書けます。
• 置けない: 記事に <script> を書けないサービス（ブログや技術記事の投稿サイトの多く）。iframe を貼れるサービスなら、1. の埋め込みを使ってください。
• CSP（Content-Security-Policy）で外部のスクリプトを止めているサイトでは、script-src に https://showcase.eskees.com を加える必要があります。

注意

• .eskx を別のドメインに置く場合は、その置き場所で CORS を許可してください（ESKEES Player が fetch で読み込むため）。同じサイトに置けば設定は不要です。
• 1 つのページに複数置けます。キー操作を受けるのは、最後に押した 1 つだけです。
• 物理を使う作品では、物理のライブラリ（planck.js）を、そのときだけ追加で読み込みます。
• /player/1/ の間は、属性・イベント・mount の形を変えません。中身（不具合の修正など）は予告なく更新されます。互換性のない変更をするときは /player/2/ を用意します。
• EMG の部分（絵とアニメーション）だけを表示すればよい場合は、公開リポジトリの EMG の CDN プレイヤーも使えます。こちらは .eskx の拡張データ（スクリプトなど）を動かしません。