はじめに
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あたりで勉強してみようと思います。