2008年07月29日

iPhone向けサイトでURLが分からないようにする方法

URL欄を隠して上下左右にスクロールさせない方法

URL欄を隠して上下左右にスクロールさせない方法=iPhone向けサイトでURLが分からないようにする方法、です。

こういうことができるのはあまりいいことではありませんね。
とは言ってもローカルアプリの様なUIを作り込むには必要な方法でもあります。

以下を.jsに加えるだけ。

window.addEventListener("load", loaded, false);
window.onorientationchange = hideURLbar;

function loaded() {
setTimeout(hideURLbar, 100);
document.addEventListener("touchstart", touchHandler, false);
  document.addEventListener("touchmove", touchHandler, false);
  document.addEventListener("touchend", touchHandler, false);
}

function hideURLbar() {
  window.scrollTo(0, 1);
}

function touchHandler(event) {
  event.preventDefault();
  hideURLbar();
}

サイトは320px*416pxにすればいいと思います。

デモはこちら
http://hayashi311.googlepages.com/noscl.html

やっていることは、URL欄を隠しつつ、タッチイベント毎にevent.preventDefault();を実行しているだけ。他の処理をしている時はタッチ検出まで0.1sくらいのタイムラグがあって時々URL欄のチラッと下が見えて気持ち悪いのでhideURLbar();も同時に実行しています。

もっとスマートなやり方があるかもしれません。添削大歓迎です!




でもでもでも!

 正直、突然これをやられるとイラッとします。なんだかURLの見えないアダルトサイトのポップアップが画面を埋め尽くしていた頃を思い出させますね。諸刃の刃、素人にはお勧めできません!

 サイト制作者側はスクロールのロックを外すという選択肢をユーザーに与えるべきなのは当然のことですが、Appleも何らかの形でURLを確認できる方法を提供するべきだと思います。


以下のエントリを参考にさせていただきました!ありがとうございます!

90秒で理解するiPhone JavaScript(マルチタッチ編)


追記:電池とかsoftbankとか書かれてるバーをタップするとURLがでてきますね! Apple、GJ!
**

hayashi311 at 03:40コメント(0)トラックバック(0) 

トラックバックURL

コメントする

名前
 
  絵文字
 
 
Twitter
記事検索
QRコード
QRコード
  • ライブドアブログ