狐の窓 ガイド

サイトに埋め込む

狐の窓は独立したページとしてだけでなく、既存のWebサイトの一部として埋め込むこともできます。方法は2つあります。

iframe 方式 エンジン直接読み込み方式
手軽さ HTMLを数行書くだけ JavaScript の記述が必要
仕組み デプロイ済みの窓を別窓として表示 エンジンを埋め込み先ページに直接読み込む
ドメイン 別ドメインでもOK 別ドメインでもOK
向いている用途 手軽に設置したいとき全般 ページの一部として自然に溶け込ませたいとき

方法1: iframe で埋め込む（かんたん）

デプロイ済みの窓のURLを iframe で読み込むだけです。埋め込み先のサイトと窓が別ドメインでも動きます。

<iframe
  src="https://あなたのVercel URL/"
  width="100%"
  height="500"
  style="border: none; border-radius: 8px;"
></iframe>

サイズの調整

width と height を変えるだけです。レスポンシブにしたい場合はCSSで囲みます。

<div style="max-width: 600px; margin: 0 auto;">
  <iframe
    src="https://あなたのVercel URL/"
    width="100%"
    height="500"
    style="border: none; border-radius: 8px;"
  ></iframe>
</div>

方法2: エンジンを直接読み込む

窓のエンジンを埋め込み先のページに直接読み込む方法です。同じVercelプロジェクト内のページ（たとえばトップページに窓を組み込みたい場合など）に向いています。

<div class="kitsune-window" id="kitsune-window"></div>

<script type="module">
  import("https://あなたのVercel URL/embed.js").then(() => {
    KitsuneWindow.init({
      world: "あなたのワールド名",
      container: document.getElementById("kitsune-window")
    });
  });
</script>

エンジンが自動でCSSを注入し、背景グラデーション・吹き出し・口パクなどを描画します。コンテナの高さはスマートフォンで250px、PCで400pxが自動設定されます。

この方式では、エンジンがデプロイ先のVercel URLから素材やシナリオを fetch で読み込みます。別ドメインのサイトからでも動作しますが、iframe 方式よりセットアップが複雑です。Live2Dなど高度な機能を使う場合や、ページの一部として深く統合したい場合に向いています。

レイアウトのヒント