拙作の「MMD Viewer 改」において、
全画面表示のオン/オフの処理で問題があったので改善してみました。
というか、実はだいぶ以前から問題の件は把握しており、
そのうちにどうにかしようとか思っていたのですが、
激しくすっかり忘れていた次第です・・・(^_^;)
さて、
ビューワー画面下部にある操作バーの右端に、
全画面表示の切り替えボタンがあります。
これを押すと全画面表示に切り替わり、
その状態で再度押すと元の状態に戻るようになっています。
一方、
F11キーを押すことでも全画面表示することができます。
全画面状態でF11かEscキーを押すと元に戻るようになっています。
で、
問題というのが、
F11キー押下で全画面表示した場合に、
下部にある操作バーのボタンを押しても元に戻らないことです。
というかうまく動かなくなってしまっています。
いまひとつ、よく分かっていないのですが、
JavaScriptから制御した場合と、
F11キー押下した場合では内部的に差異があるようです。
JavaScriptで全画面表示させた場合、
F11キー押下で元に戻ったりしますが、
F11キー押下による全画面表示は、
JavaScriptでは元に戻せない・・・なんでや(^_^;)。
JavaScriptによる全画面表示の制御は
こちらに書いてあるようなAPIを使ってやります。
残念ながら現状ではブラウザ毎にAPIが異なってしまっています。
少なくとも現況のChromeにはW3C準拠なAPIが実装されていないようです。
全画面表示の切り替えのコードは以下のような感じになります。
function hasFullscreenElement() {
return document.fullscreenElement || document.webkitIsFullScreen || document.mozFullScreen;
}
function toggleFullscreen() {
var el;
if (hasFullscreenElement()) {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else
if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
} else {
el = document.documentElement;
if (el.requestFullScreen) {
el.requestFullScreen();
} else
if (el.webkitRequestFullScreen) {
el.webkitRequestFullScreen();
} else
if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
}
}
} 上記のコードにあるように、
JavaScriptでやる場合はDOMのElementに対して要求をかけるような作りになっています。
そしてdocumentの特定プロパティの存在をチェックすることで、
全画面かどうかを判別できるようになっています。
ところがF11キー押下による全画面表示では、
hasFullscreenElement()の結果はundefinedとなってしまいます！
う～む。
ところで、
全画面表示かどうかを判別するにはこちらに書いてあるような方法もあります。
具体的なコード例は以下のようになります。
var fullscreen = false;
window.onresize = function() {
fullscreen = window.outerWidth === screen.width && window.outerHeight === screen.height;
};
上記コードを実装すれば、
F11キー押下による全画面表示の判別は、
以下のようなコードでやれそうですね！
function isF11Fullscreen() {
return fullscreen && !hasFullscreenElement();
} なので、
「MMD Viewer 改」においては、
F11キー押下によって全画面表示となっている場合は、
画面下部の操作バーにある全画面切り替えボタンは無効にするようにしました。
F11キー押下をシュミレートして切り替えるというアイデアもあったのですが、
JavaScriptでキーイベントを生成してディスパッチするというのは、
セキュリティ的にいかがなものかと思うので辞めました。
というかブラウザ側でブロックされそうな気がします(^_^;)
ということで、
「MMD Viewer 改」を試すにはこちらからどうぞ。