こんにちは、ともよーんです。
先日この技術ブログきっかけで寄稿させていただくことになった雑誌が発売になりました。皆さまのおかげで素敵な機会が持ててとてもありがたく思っています！
詳しい掲載内容はこちらをご参照ください。

さて、今回もまたスマートフォンに関するトピックです。
アドレスバーを非表示にする方法について書きたいと思います。

狭い狭いスマホの画面ではアドレスバーを非表示にして、少しでも表示領域を広げたいものです。
最近関わった案件の仕様書にも当然のようにこの要望がありました。

まず、アドレスバー非表示の基本的な仕組みから見ていきましょう。
コアになるコードはこちら↓

window.scrollTo(0, 1);

「ページ読込み完了時に1px上にスクロールさせろ」という指示です。
アドレスバーは1pxより全然あるやんか！全然隠れへんやんか！と思った方、（私だけ？）
モバイルSafariやAndroidの標準ブラウザは、ページ読み込み完了時にスクロール位置が1ピクセル以上あった場合、URLバーが引っ込むという仕様なので大丈夫らしいです。ちゃんと隠れます。

何だ単純な仕組みだなと思いきや、ひとつ大きな問題が。
ページをまたいでの特定箇所へのアンカーリンクが、ウィンドウが上にスクロールしようとする動きに打ち消されてしまうのか、動かなくなってしまったのです。そこからがちょっと長い調査の旅の始まりでした。
いろいろメジャーどこのスマホ用ページを調べてみたのですが、あんまり#付きのアンカーリンク対応のものは見つからず。
ただ収穫として、一旦アドレスバーを表示させて時間をおいてひゅっと隠す、みたいな処理が流行りなのだということがわかりました。

■例1
$(function(){
    // アドレスバーを非表示に
    setTimeout('scrollTo(0, 1)', 100);
});

■例2
  function openWindowOoyala2(url){
    var url = 'http://www.ntt-west.co.jp' + url;
    var l = 0; // 表示するx座標
    var t = 0; // 表示するy座標
    var w = 680; // 横幅
    var h = 630; // 縦幅
    x = (screen.width - w) / 2;
    y = (screen.height - h) / 2;
    subWin2 =window.open(url,"center2","screenX="+x+",screenY="+y+",left="+x+",top="+y+",width="+w+",height="+h+",scrollbars=yes");
  }

■例3
// ページ読み込み時に表示位置を0に設定（アドレスバーの非表示処理）
window.onload = function() {
    setTimeout(smp_doScroll, 100);
}



もう対処法はないのかとあきらめかけたその時に、一筋の光明が！
#付きのアンカーリンク対応のものが見つかりました。

■例4
    //Hide address bar
    hideBar : function(){
      if(!location.hash){
        setTimeout("scrollTo(0,1)",100);
      }
    }

乱暴に日本語で言うと、
「URLがハッシュ付きの場合以外に、ページ読込み完了時に1px上にスクロールさせる」
という命令になります。

最終的に採用したのは以下のコードです。
参考サイトはこちら：
Speedy Tip: Hide Mobile Web Browser Address Bar Improved

function hideURLbar() {
    if (window.location.hash.indexOf('#') == -1) {
        window.scrollTo(0, 1);
    }
}

if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1) {
    addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
    }, false);
}


今回はこれで一旦解決という運びになりましたが、まだまだ世界的にも解決していないようです。
こちらのサイトではあらゆる場面を想定して、いろいろデモとディスカッションが行われています。
なかなか勉強になります。
24 ways: Raising the Bar on Mobile

しばらくウォッチしていくべき課題のようですね。
ちなみにタイトルに深い意味はありません。一度思いついたら外に出さなくては気が済まないのです。最近このまま年をとると、おばさんではなくさむいおじさんになってしまうのではないかと危惧しています。
ではでは、また次回にお会いしましょう。