iPhoneにホーム画面登録を促すダイアログを表示

スマホ用のサイトでお気に入り登録を促すというのは以前に無理という結論が出たけれども、ホーム画面登録を促すダイアログなら「Mobile Bookmark Bubble」というライブラリでいけるみたい。

Mobile Bookmark Bubble

https://code.google.com/p/mobile-bookmark-bubble/source/browse/

※zipのところでダウンロード出来る。

使い方

bookmark_bubble.jsを読み込む。あと、ホーム画面用の画像を用意して以下で呼び出しておく。

<link rel="apple-touch-icon-precomposed" href="ホーム画面用の画像" />

呼び出したいページで以下を記述する。

window.addEventListener('load', function() {
  window.setTimeout(function() {
    var bubble = new google.bookmarkbubble.Bubble();

    //var parameter = 'bmb=1';
    var parameter = '#';

    bubble.hasHashParameter = function() {
      //return window.location.hash.indexOf(parameter) != -1;
      return location.hash == "" && location.href.indexOf(parameter) == location.href.length-1;
    };

    bubble.setHashParameter = function() {
      if (!this.hasHashParameter()) {
        //window.location.hash = parameter;
        location.href = parameter;
      }
    };

    bubble.getViewportHeight = function() {
      window.console.log('Example of how to override getViewportHeight.');
      return window.innerHeight;
    };

    bubble.getViewportScrollY = function() {
      window.console.log('Example of how to override getViewportScrollY.');
      return window.pageYOffset;
    };

    bubble.registerScrollHandler = function(handler) {
      window.console.log('Example of how to override registerScrollHandler.');
      window.addEventListener('scroll', handler, false);
    };

    bubble.deregisterScrollHandler = function(handler) {
      window.console.log('Example of how to override deregisterScrollHandler.');
      window.removeEventListener('scroll', handler, false);
    };

    bubble.showIfAllowed();
  }, 1000);
}, false);

参考サイト 

http://d.hatena.ne.jp/a_kimura/20110507/1304801259

その他

残念ながらAndroidは対応してないみたい。あとAndroidは解像度が機種によって多様だったりで難しいのかも。