JavaScriptでアドレスバーとタスクバーを非表示になるように実装

https://developer.mozilla.org/ja/docs/Web/API/Window/open#%E3%83%84%E3%83%BC%E3%83%AB%E3%83%90%E3%83%BC%E3%81%A8_chrome_%E3%81%AE%E7%89%B9%E6%80%A7 https://developer.mozilla.org/ja/docs/Web/API/Window/locationbar この辺りをご回答しようかと思っていたのですが、最新のブラウザだとクライアントの設定でブロックされますね…… すみませんが、これもできないという根拠が示せないので回答は控えます。他の方の回答をお待ちください。また、「できない、という回答は不要です」などと、ご質問に追記しておけば、私のようなうるさいことを言う回答者が寄り付くこともないと思いますので、老婆心ながらおすすめしておきます。お騒がせして申し訳ありませんでした。

ryutaro0112

2020/07/14 09:43

いえいえ、ご回答の程ありがとうございます。こちらのURLでのやり方も検討します。

Lhankor_Mhy

2020/07/14 09:56

某所で、「フルスクリーンモードにすればいい」と教えてもらいました。ご希望の動作に合致しますか？ https://developer.mozilla.org/ja/docs/Web/API/Fullscreen_API

行動規範の内容に同意します

回答2件

PC であれば全画面表示にする事でアドレスバーやタスクバーを見えなくする(消すの意味ではありません)ことは出来ます。以下のコードをご自分の JavaScript に貼って toggleFullSCreen() を呼び出すといいでしょう。もう1回呼び出すと全画面表示から戻ります。

javascript
1function toggleFullScreen() {
2  var doc = window.document;
3  var docEl = doc.documentElement;
4
5  var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
6  var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
7
8  if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
9    requestFullScreen.call(docEl);
10  }
11  else {
12    cancelFullScreen.call(doc);
13  }
14}

投稿2020/07/14 09:52

編集2020/07/14 09:59

mattn

総合スコア5030

miyabi_pudding

2020/07/14 09:59 編集

toggoleFullSCreen と、スペルが間違っておりますので、修正をした方がいいかと・・・！全画面にする、はナイスですね。

mattn

2020/07/14 09:59

指摘ありがとうございます。

ryutaro0112

2020/07/15 00:56

ご回答の程、ありがとうございます。

ryutaro0112

2020/07/16 02:40

実際に上記のJSのコードでためしたのですが、「requestFullScreen.call(docEl);」のcall(docEl);で赤線が引かれてしまいエラーメッセージが出てしまいました。このエラーをどうやって解決したらいいですか？ちなみに、エラーメッセージは「Uncaught (in promise) TypeError: fullscreen error　at toggleFullScreen」です

行動規範の内容に同意します

質問修正依頼でのやりとりのように、JavaScript側からブラウザのUIに干渉するようなコントロールは現代では特にできません。

なので、
PWAの導入を検討されてはいかがでしょうか？
これは、
Webサイトをスマートフォンのローカルアプリケーションとして動かす（ユーザーにはアプリとしてインストールしてもらう）というもので、
ネイティブでないとできないような様々なコントロールを可能にする技術です。
もちろん、タスクバーも、アドレスバーの非表示も可能になります。
ポートフォリオを作成となれば、
PWAを実装してる時点で、
めちゃくちゃポイント高いです。

ただし、今のところは、スマートフォン限定です。

PCとなると、別にWebビューアプリケーションを自作する、くらいしか方法ないかと・・・。
（一昔前だとFlashでいけたのですが）

投稿2020/07/14 09:31

miyabi_pudding

総合スコア9555

ryutaro0112

2020/07/14 09:48

ご回答の程、ありがとうございます。代打案も物凄く勉強になりました。自分で詳しく調べておきます。ただ、一つだけご質問があります。それは、なぜJavaScriptでアドレスバーとタスクバーを非表示になるように実装が現代ではできないのでしょうか？お手数ですが、ご回答の程宜しくお願い致します。

miyabi_pudding

2020/07/14 09:54

セキュリティのために、ブラウザ側で、JavaScriptで行えることに制限をかけているからかと思われます。 Web上の、JavaScriptからブラウザ（デスクトップなりの、デバイスのアプリケーション）のあれこれに干渉できてしまうと、デバイスの様々なものに対して、悪いことをいっぱい容易に出来るようになってしまいます。よって、ブラウザ側で、かなりの制限をかけているはずです。アドレスバーがなんでセキュリティ干渉なの？と思うかもしれませんが、そこに干渉できるのがセキュリティホールとなり、ブラウザのアプリケーション自体の破壊や、そこからデバイスのLANに侵入して、悪さをするということも可能になる恐れがあります。ので、昔よりさらにブラウザのJavaScriptに対してのセキュリティ措置は厳密になっているのです。

mattn

2020/07/14 09:57

ブラウザで動作する様な JavaScript はブラウザを制御する事しかできません。なのでタスクバーは消せません。例えばあるサイトに訪れただけでタスクバーが勝手に消されてしまったら怖いですよね。またアドレスバーが消せない理由は「アドレスバーが常に見えていないといけないもの」だからです。知らない間に思っていたサイトと違うサイトに移動してしまっていて「信じていたサイト」のつもりで大事な情報を入力してしまったら危ないですよね。これらの様にブラウザの機能は全て「安全側」に倒されています。なお全画面表示にすることでアドレスバーを「見えなくする」ことは出来ます。

ryutaro0112

2020/07/15 01:04 編集

そうなんですね！だから、JavaScriptで干渉できないのですね。ご回答の程ありがとうございます。