かなり適当な不定期日記(仮)
――日々の思いや出来事の織り成すカオスを言語化してみる。
スポンサーサイト
--月--日 (--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
DMM系ブラウザゲームでマウススクロールを使えるようにする方法(解説付)
07月03日 (木)
DMM系ブラウザゲームの多くは、マウススクロールを使おうとすると、
ページ本体も一緒にスクロールしてしまい、まともに使えない。

なのでこれをChrome+Tampermonkeyと適切なJavascriptで解決する。

(試してないけど多分同JavascriptとFirefox+Greasemonkeyでも行ける筈。)
Firefoxだと何故かpreventDefault()がiFrameに対して期待通りに動作しない様子。
Firefoxの場合の代替案を追記したので、そちら参照。


以下、コード本体と、個人的な勉強を兼ねた似非説明まとめ。


使用するコードはこちらからの借り物。
(function(){
$('#game_frame').bind('mousewheel DOMMouseScroll',
function(e){e.preventDefault();});
})();
(元々これを知ったのはこちら:
chromeでホイールスクロールを有効活用する方法 | 千年戦争アイギスまとめ



以下、解説。



(function(){
$('#game_frame').bind('mousewheel DOMMouseScroll',
function(e){e.preventDefault();});
})();
無名関数の即時実行。
説明はここの簡易纏めとかSOでの簡易説明とか参照。



(function(){
$('#game_frame').bind('mousewheel DOMMouseScroll',
function(e){e.preventDefault();});
})();
JQueryのセレクタでgame_frameのIDを持つフレーム(のJQueryラッパー付)を取得。

game_frameのIDを持つフレームは、Flash本体とその周りのバナー・ヘルプ等を含むフレーム。

JQueryのセレクタが使えるのは、ゲームページが既にJQueryを使っているから?
<script type="text/javascript" src="/_js/jquery.js"></script>

なおこのフレームより細かい部品を取得しようとすると失敗する様子。
多分フレームが親ページと別ドメインで、Same-Origin Policyに引っかかる。
説明はここら辺で。



(function(){
$('#game_frame').bind('mousewheel DOMMouseScroll',
function(e){e.preventDefault();})
;
})();
上記フレーム(のJQueryラッパー付)のマウススクロールイベントに、
既定動作の停止のイベントハンドラを付ける。

.bind.preventDefault()はJQueryの関数。
今回の使用例はここら辺参照。

DOMMouseScrollがあるのでFirefoxにも対応。(説明この辺




以上を踏まえて、Tampermonkeyで期待通りの動作をさせられる事がわかる。



ちなみに、無名関数内に、
window.scrollBy(0,57);
と入れておくと、DMMバーを避ける程度に下スクロールしてくれるので便利。



これらを実際にTampermonkeyに入れた図がこちら。
TampermonkeyへDMMスクロール系コードを入れた状態。
名前付き関数になってるのは単に好み。



今回の勉強で、JQueryがかなり面白そうなのがわかったから、
一度投げたJQueryを、もうちょっと勉強してみようかな…






2014/07/03 09:00 追記:
Firefoxの場合の代替案
Firefoxだと何故かpreventDefault()がiFrameに対して期待通りに動作しない様子。
なので上記例は、そのままだとFirefox+Greasemonkeyで使えない。

グーグル先生にいろいろ聞いてみた結果、以下のSO回答が使えた:
Answer 4593315 : javascript - prevent Scroll "bubbling" from element to window - Stack Overflow

概要を説明すると、対象エリアにマウスが入った時点の画面位置を記憶し、
スクロールが起こったら画面位置をその記憶した位置に即時戻すと言った、
「スクロールを止められないなら、されたスクロールを反転すればいいじゃない」
と言う発想の転換。
脱帽。


これを今回のDMM系ブラウザゲームのページに適応すると、こんなコードになる:
(function(){

// here we store the window scroll position to lock; -1 means unlocked
var forceWindowScrollY = -1;

$(window).scroll(function(event) {
if(forceWindowScrollY != -1 && window.scrollY != forceWindowScrollY) {
$(window).scrollTop(forceWindowScrollY);
}
});

$("#game_frame").hover(function() {
if(forceWindowScrollY == -1) {
forceWindowScrollY = $(window).scrollTop();
}
}, function() {
forceWindowScrollY = -1;
});

})();

一応Firefox+Greasemonkeyでこのコードを適用し、
艦これと千年戦争アイギスで期待通りの動作を確認。
//艦これはゲーム内スクロールがそもそも無いけど…

また、このコードでもChrome+Tampermonkeyで同動作可能。
//先のコードがあるから、使う必要ないけど…



しかし、いろいろとやりようがあるものだ。
これだからコーディングは面白い。



2016/03/30追記:艦隊これくしょん(艦これ)と千年戦争アイギスのブラウザカスタマイズ設定にて類似コードを記述。
コメント
この記事へのコメント
コメントを投稿する
URL:
Comment:
Pass:
<FC2 BLOG の HTTPS 対応まで暫定的にテキストボックスにしています> ...
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック

copyright © 2005- , yk. all rights reserved.
Powered by FC2ブログ.
/ 無料カウンター
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。