メニュー

JavaScript

ホーム画面からの起動か判別する

便利なプロトタイプツールはたくさんある。その中でも、AdobeのXDとSketchは、個人的にはトップ2。でも導線確認するには、もっとリアルな感じで作った方がいいなと思うことはよくある。
そんなときは、html+CSS+JavaScriptでマークアップした方がより具体的な完成をイメージすることができる。

アドレスバーを非表示にする

一旦ブラウザでページを開いた後に、そのページをホーム画面に追加する。以降は、ホーム画面から起動すると、アドレスバーを非表示にしたアプリライクな画面を用意することができる。今回は、そのためのミニマムなソースの備忘録。

サンプル：ホーム画面からの起動か判別する

index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ホーム画面からの起動か判別する</title>
    <link rel="manifest" href="manifest.json" />
  </head>
  <body>

    <script>
    /**
     * ホーム画面からの起動か判別する
     */
    var is_standalone = function() {  
      var is_standalone;
      switch (true) {

        // manifest.jsonのstart_urlと比較する もしくは iOSの場合
        case (-1 != location.href.indexOf("?utm_source=homescreen")):
        case navigator.standalone:
          is_standalone = true;
          break;
        default:
          is_standalone = false;
      }
      return is_standalone;
    }
    </script>

    <script>
    if (is_standalone()) {
      document.write("ホーム画面からの起動です");
    } else {
      document.write("ブラウザーからの起動です");
    }
    </script>
  </body>
</html>
manifest.json
{
  "short_name": "short",
  "name": "full",
  "start_url": "./?utm_source=homescreen",
  "display": "standalone",
  "orientation": "portrait"
}
manifest.jsonについては、別の機会に。
とりあえず、今回使ったキーについて。

short_name　ホーム画面に追加する際の表示名
name Androidでブラウザ表示した際にホーム画面追加を促すダイアログに表示する名前
start_url ホーム画面から起動する際に表示するURL
display 値を"standalone"にすることでステータスバー以外を非表示にする
orientation ホーム画面から起動する際の表示向き

サンプル：ホーム画面からの起動か判別する

0から目指すWebマスター SINCE 2007