モバイル版Chrome/SafariでWebページをWebアプリケーション表示させる方法

takahashi 著者:takahashi

モバイル版Chrome/SafariでWebページをWebアプリケーション表示させる方法

高橋です。

モバイル版の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アプリを作成している方は、一度試してみてはいかがでしょうか。

  • この記事いいね! (0)

著者について

takahashi

takahashi administrator

Webエンジニア。 趣味で自宅サーバーを稼働中。 ファンタジーが好き。