Webアプリというと何だかカッコいいですが、ここで紹介するのは単純にフルスクリーン表示させるだけです。本気でWebアプリを開発しようという方にはごめんなさい。PWA とかで検索してみてください。
さて、Webサイトの内容によっては、ブラウザ内ではなくアプリ的に全画面表示できると使い勝手が上がるケースがあると思います。天気予報のような日々使うページなんかはそうじゃないでしょうか？普通にブックマークにすると見るたびに新しいタブが増え、いつの間にやら100近いタブが…
ところがアプリ風にするとそのタブ問題が一発解決！ブラウザのUIも非表示になるので画面が広く使える！といいこと沢山なにそれすごい。そんな設定が、なんと meta タグをちょろっと追加するだけでできるんですねー ということで HTML コードのご紹介。
meta タグ
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">アイコン
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" type="image/png" href="android-chrome-192x192.png">Favicon Generator for perfect icons on all browsers とかで favicon を生成して上の3つを埋め込めばOKです。
これで iOS なら Safari で「ホーム画面に追加」とすると、ホーム画面に指定したアイコンでブックマークが追加され、それをタップするとフルスクリーンでサイトが表示されます。（ちなみに Android は未確認。手元に Android 実機がない…なんてこった…）
おわりに
とまぁとっても簡単にできるんですが、フルスクリーンにするか否かはあくまでもユーザーに選択権があるべきだと思ったりもします。ブラウザ表示時でもスクリプトで強制的に全画面表示させるってのがありましたが、それは提供側の都合の押しつけじゃないかな？と。ので、実はこの設定も本来はあまりよろしくはないのかなぁ？と思ったりはします。それこそスクリプトやらなんやらで選択できるようにするとか？でもそれはそれでよく分からないことを選択させられることになり、逆に使いにくくなる？うーん、使いやすさって難しい…
こういうユーザーに何かを押し付ける設定は、できる限り注意して実装したいですね。