メインコンテンツへスキップ

ガジェット内 JavaScript / CSS の Proxy 経由制御について

  • 更新

概要

ゲソてんのゲームコンテナでは、ガジェット内で参照されている JavaScript / CSS を、デフォルトで弊社 Proxy 経由で配信しています。 ガジェット xml に content-rewrite の設定を追加することで、Proxy を経由せず直接参照に切り替えることが可能です。 本ドキュメントでは、その設定方法と注意事項をご案内します。

デフォルトの動作

ガジェット内で <script src="..."> や <link href="..."> で指定された URL は、自動的にゲームコンテナ経由の URL に書き換えられます。

実際に配信される URL の例:

https://app.gesoten.com/gadgets/proxy?container=default&gadget=...&url=https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.7.1%2Fjquery.min.js

元の指定:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

設定方法

ModulePrefs 内に <Optional feature="content-rewrite"> を追加し、Proxy を経由させたくない URL を exclude-url で指定します。

パターン 1: すべての JS / CSS を直接参照にする

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs title="sample-gadget">
        <Require feature="opensocial-0.8" />
        <Require feature="dynamic-height" />
        <Require feature="views" />
        <!-- ↓ 追加箇所 -->
        <Optional feature="content-rewrite">
            <Param name="exclude-url">your-domain.example.com</Param>
            <Param name="exclude-url">ajax.googleapis.com</Param>
        </Optional>
        <!-- ↑ 追加箇所 -->
    </ModulePrefs>
    <Content type="html" view="default,canvas">
    <![CDATA[
        ...
    ]]>
    </Content>
</Module>

パターン 2: 特定のドメイン・URI のみ直接参照にする

exclude-url にはドメイン名のほか、URL パスの一部を指定できます。 細かく対象を絞りたい場合に有効です。

<Optional feature="content-rewrite">
    <Param name="exclude-url">ajax.googleapis.com</Param>
    <Param name="exclude-url">cdnjs.cloudflare.com</Param>
    <Param name="exclude-url">/news/js/some_script.js</Param>
</Optional>

推奨される切り替え対象

  • 公開 CDN（ajax.googleapis.com, cdnjs.cloudflare.com など）から配信されている共通ライブラリ
  • 自社ドメインから配信されている静的ファイルのうち、クロスオリジン制約の影響を受けないもの

Proxy 経由のままが望ましいケース

  • クロスオリジンを前提としたリクエストを行う処理
  • Cookie や認証情報をゲームコンテナのオリジンで扱う処理
  • その他、Proxy 経由で動作することを前提に実装されている箇所

少しでも影響が出る可能性がある場合は、従来通り Proxy 経由のままにしておくことを推奨します。

動作確認の流れ

  1. サンドボックス環境のガジェット xml に content-rewrite 設定を追加
  2. 表示・動作に問題がないことを確認
  3. 問題がなければ本番ガジェット xml に反映

ガジェット xml 側の変更のみで切り替え可能なため、トライアンドエラーがしやすい構成となっています。

注意事項

  • 過去、Proxy 経由 / 直接参照を切り替えた際に、SP（スマートフォン）表示で外枠の余白が変化した事例があります。 特にレイアウトが CSS の読み込み順や読み込みタイミングに依存している場合、見た目に影響が出る可能性があります。
  • 本番反映前に、必ずサンドボックス環境で PC / SP 両方の表示を確認してください。
  • 切り替えにより、ブラウザのキャッシュ挙動や CORS の挙動が変わる場合があります。

お問い合わせ

設定方法・挙動についてご不明な点がありましたら、弊社担当までお問い合わせください。