高橋です。
モバイル版のChromeやSafariには、特定のページのショートカットを作る機能がついています。
使ったことがある方もいらっしゃるのではないでしょうか？
僕もキャリアが提供するWebメールなどで、画面をすぐに開けるようにするためによく使っています。
さて、このショートカットを作る機能ですが、サイトによって動作が異なることはご存知でしょうか？
例えば、ショートカット化したAmazonのショッピング画面を開くと、
こんな感じで通常のブラウザ画面で表示されます。
一方、Softbank のS!メールどこでもアクセス をショートカット化すると…
開いたときにスプラッシュ画面が！
ブラウザのアドレスバーの表示も消え、まるでアプリのような見た目になりました。
この表示の違いは、対象のページのheadタグに次のようなmetaタグが入っていると起こります。
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="サイト名">
</head>
この2行を入れておくと、モバイル版のSafari、Chromeで作成したショートカットから起動すると、URLバーが消え、アプリのような表示になるというわけです。
もし、スマホ・タブレット向けに作っているページがあり、Webアプリとして使ってほしい、URLバーを消した状態で使ってほしい、というときに便利です。
一方で、ブラウザ側でこの切替を行う設定は今のところないようなので、ユーザー側ではコントロールを行うことができません。
この点は注意が必要そうです。
モバイル用のWebアプリを作成している方は、一度試してみてはいかがでしょうか。
