昔からスマートフォンは iPhone ユーザの おがた (@xtetsuji) です。iPhone 3G→iPhone 4→iPhone 4S→iPhone 5←イマココ。
パソコンやMacで使っているブラウザがGoogle Chromeなので、同期が便利とかの理由で最近はiPhoneでのウェブ閲覧に標準のモバイルSafariではなくGoogleがリリースしたChrome for iOSを使っているのですが、最近よくアクセスするサイトでは以下のような現象が起こります。
- ブックマークからアクセスする
- ページが表示されたらすぐ目的の下方向にスワイプでスクロールする
- Chromeのページ読み込み進捗バーが消えてページ読み込みが完了する
- スクロールしていたのにページのトップに戻される
これって、モバイルSafariのアドレスバーを非表示にしたいがためのバッドノウハウなんですよね。Googleで「モバイルSafari アドレスバー (消す OR 隠す)」とかで検索するといっぱい出てくる。
要するに「ページ読み込み(DOM構築)が完全に完了した後に下に1pxスクロールすれば隠せるからJavaScriptでそれをやっちゃえ」っていう発想。ただChromeもそうだけど、モダンなブラウザはページ読み込みが完全に完了する以前からページの一部を表示しはじめる。だから、ブックマークからアクセスしてページが表示されたと思ってスクロールしていると、特にiPhoneはCPUがパソコンより遅いとかネットワークが遅いやらの関係で読み込み完了までの時間がかかるページだと、せっかく下にスクロールしたのに上に戻されるという結果になる。そもそも自分が使っているブラウザはChromeなのでアドレスバー隠すとか全く関係ないし、余計な事に巻き込まれて迷惑なことこの上なし。
検索してみるとjQueryバージョンとか色々あると思うけど、世間で主に流通しているシンプルなJavaScriptコードは以下のようなものだと思う。
window.onload = function() {
setTimeout(function(){window.scrollTo(0,1);}, 100);
}
なんで0.1秒間を置くのかかよく分からない。このあたりもバッドノウハウたるゆえんじゃないかな。
告白しますが、恥ずかしながら自分も昔これを書いたことあります。昔気にならなかったのは、モバイルSafariを使っていたというよりは、ページレンダリングも何もかも遅くて気にならなかったんじゃないかなと思う。
もしコレを本当にやりたいのであれば、スクロールしていない(Y座標が0である)ことを確認してから行うべき。
window.onload = function() {
if(window.scrollY == 0)
setTimeout(function(){window.scrollTo(0,1);}, 100);
}
上記は想像でコード書いたので上手く動くかはわからない。if付け足しただけだし、エラーにはならないと思うけど。
Googleで検索して真っ先に出てきた「千と千尋のアドレスバー隠し – スタジオ・アルカナ技術ブログ」でもこれについては言及していなかった。
本当にアドレスバーから解放されたいのであれば、ハードルは高いけど自分でiPhoneアプリを作るか、もしくは必要なページ遷移を全てAjaxで行うようにしてホームアイコンに置かせてアドレスバーを消すmeta要素を入れるといったほうが良いように思う。後者は典型的なAjaxウェブアプリをiPhoneアプリに見立てる方法として検索すれば色々情報が出てくるので、興味があったら検索してみると良いと思う。
同じこと思っている人はいるだろうと思っていたけど、とりあえず一つ見つけた。
Chrome for iOSを使って、このバッドノウハウが入ったよく使うサイトを快適に使うにはどうしたらいいだろう。開発元に連絡するしかないかなぁ、などと考えている今日この頃でした。