埋め込みが無効の場合のみ表示される文章 </object> で、<iframe>タグなら <iframe src="URL" width="横幅" height="高さ"> 埋め込みが無効の場合の...">
fc2ブログ

ゲームをWebサイトに埋め込んだときのスクロールを抑制する

ティラノスクリプトのゲームを、Webサイトの一部として画面に組み込む場合、
<iframe>タグか<object>タグを使って組み込むことになるでしょう。
書き方は、<object>タグなら
<object data="URL" type="text/html" width="横幅" height="高さ">
埋め込みが無効の場合のみ表示される文章
</object>
で、<iframe>タグなら
<iframe src="URL" width="横幅" height="高さ">
埋め込みが無効の場合のみ表示される文章
</iframe>
といった具合ですね。
ちなみにTwitterカードに埋め込んだ場合は<iframe>の動作となります。

で、こうやってゲームを埋め込んだとき、
ゲーム画面上でのマウスホイール動作が問題になってきます。

最近のティラノスクリプトなら下ホイールでテキスト進行ができるんですが、
埋め込み画面上でホイールするとWebページ全体がスクロールしちゃうのですね。
これはめちゃんこ不便なので、対策をしてみようという話です。
やることは簡単で、ゲームのシナリオをちょっと弄ってやれば解決します。
first.ksに次の記述を追加しましょう。
なんかめっちゃ右に飛び出て表示されていると思いますが、気にしないでください。
[iscript]
var scrollEvent = "onwheel" in document ? "wheel" : "onmousewheel" in document ? "mousewheel" : "DOMMouseScroll";
$(document).on(scrollEvent, function(e) {    
    e.preventDefault();
});
[endscript]
こう書いた上で埋め込めば、

【!】ここにゲームが表示されない場合、
こちらのリンクをクリックしてみてください。


このとおり、埋め込み画面上でのホイール動作によって
Webページまでスクロールされてしまうことがなくなります。
Twitterカードは動作確認していないのですが、たぶん同様の挙動を示すはずです。

「ゲームに手を加えたくない」
「ゲーム側の工夫ではなく、埋め込むWebページ側の工夫でなんとかならんか」
ということも考えた(というかそれをまず考えた)のですが、
クロスドメイン問題とかもあって難しそうでした。
何か方法があればコメントでご教示ください~。
スポンサーサイト



コメント

非公開コメント

プロフィール

著者:荻原(@tempura17654)
画像は『King Exit』(©紅唯まと)より、グイーネという登場人物。

全記事表示リンク

全記事表示リンク

検索フォーム

ブロとも申請フォーム

QRコード

QR