#はじめに
Android/iOSのWebブラウザのアドレスバーを非表示にする方法です。
ネットで調べて出てくることには出てくるのですが、なかなかたどり着かなかったのでQiitaに投稿しておきます。
#やりたいこと
据え置きのタブレット端末でWebアプリを動作させるときに、アドレスバーを非表示にしたい。
↓
調べたところ、Webブラウザの設定でフルスクリーン(アドレスバー非表示)にするのは無理そう。
(フィッシングサイトによる悪用などを考慮している?)
↓
**Webブラウザの設定変更以外の方法でアドレスバーを非表示にしたい。**←今回やりたいこと
#結論
以下のサイトを参考にしました。
[HTML5] フルスクリーンの開始と解除
対象ページのheadタグ内に以下のmetaタグを記述します。
<!-- iOS用 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Android用 -->
<meta name="mobile-web-app-capable" content="yes">
対象ページへのショートカットをホーム画面に追加し、ホーム画面から対象ページに移動するとアドレスバーが表示されなくなります。
AndroidのChromeブラウザであれば、対象ページを開いた状態でブラウザのメニューから「ホーム画面に追加」を選択することでショートカットを作成できます。
作成したショートカットから対象ページに移動するとアドレスバーが非表示になります。
(スクショ撮るのにXperia 1を使ってるので画面が長い。。。)
ちなみに、普通に表示したとき(アドレスバーあり)はこんな感じです。
Androidを例にしましたが、iOSでも同様です。
#おわりに
Android/iOSのWebブラウザのアドレスバーを非表示にすることで、Webアプリをネイティブアプリっぽくすることができました。
初めからネイティブアプリで作っていれば、こんなことに煩わされなくて済むんですけどね。
モバイルアプリ開発の知見がまだないので、時間があるときにUdemyあたりで勉強してみようと思います。