便利なプロトタイプツールはたくさんある。その中でも、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 ホーム画面から起動する際の表示向き
サンプル：ホーム画面からの起動か判別する