iPhoneでWebアプリのホーム画面登録を促す「Mobile Bookmark Bubble」をjQuery Mobileと併用してみた

開発

昨今、jQuery MobileやSencha TouchやHTML5でけっこうなUIのスマートフォン用Webアプリを作れるようになってきました。でも、せっかくアプリっぽいのを作ったら、開発者としてはホーム画面に追加してほしいですよね。
そこで便利なのが、「Mobile Bookmark Bubble」というWebアプリのホーム画面登録を促すバルーンを表示するGoogle製のJavaScriptライブラリです。

これを使うと、以下のようなバルーンが下からにょきっと出てきます。

MOONGIFTさんもiPhone/iPadでホームボタン誘導「Mobile Bookmark Bubble」 と紹介しています。

普通に使うのはそんなに難しくないんですが、jQuery Mobileと一緒に使うのが意外と大変でした。なぜなら、Mobile Bookmark BubbleとjQuery Mobileは両方ともフラグメント識別子（URLの後ろの#xxってやつ）を活用していてそれが競合するのです。
そこをなんとかしたので、方法をご紹介します。
途中まではjQuery Mobile使っていない人へのチュートリアルになっていますので、jQuery Mobile使っていない方もご覧いただければと思います。

Mobile Bookmark Bubbleのライブラリをダウンロード

mobile-bookmark-bubble - Promote your mobile web application by helping users bookmark it - Google Project Hosting
ここからダウンロードしますが、zipとか気の利いたものはありません。Mercurialをインストール済みの人はチェックアウトして、インストールしていない方は、[Source] > [Browse]からbookmark_bubble.jsとexample/example.jsをダウンロードしましょう。

Mobile Bookmark Bubbleのメッセージを日本語化する

メッセージが英語になっているので、bookmark_bubble.jsの563行目あたりを以下のように修正します。日本語はお好きなように変えてください。

  if (this.getIosVersion_() >= this.getVersion_(4, 2)) {
    /*bubbleInner.innerHTML = 'Install this web app on your phone: ' +
        'tap on the arrow and then <b>\'Add to Home Screen\'</b>';*/
    bubbleInner.innerHTML = 'このWebアプリをインストールしましょう。矢印をタップして<b>\'ホーム画面に追加\'<b>';
  } else {
    /*bubbleInner.innerHTML = 'Install this web app on your phone: ' +
        'tap <b style="font-size:15px">+</b> and then ' +
        '<b>\'Add to Home Screen\'</b>';*/
    bubbleInner.innerHTML = 'このWebアプリをインストールしましょう。<b style="font-size:15px">+</b>をタップして<b>\'ホーム画面に追加\'<b>';
  }

WebアプリにiPhone用のアイコンを設定します

Mobile Bookmark Bubbleのバルーンに表示されるアイコンはmetaタグ内の

<link rel="apple-touch-icon-precomposed" href="画像のパス" />

から取得してきます。なので、この記述を追加しましょう。
apple-touch-icon-precomposedに指定した画像はiPhoneでホーム画面に追加したときにホーム画面に表示されるアイコンになります。ただし、apple-touch-icon-precomposedだとそのときにiPhoneのアイコンっぽいテカリ処理をしてくれません。テカリ処理を自動でしてほしい場合は、

<link rel="apple-touch-icon" href="画像のパス" />

と指定しましょう。Mobile Bookmark Bubbleはapple-touch-icon-precomposedを取得するようになっていますので、その場合は、bookmark_bubble.jsの228行目を以下のように書き換えます。

google.bookmarkbubble.Bubble.prototype.REL_ICON_ = 	'apple-touch-icon';

Mobile Bookmark BubbleをWebアプリに組み込む

bookmark_bubble.jsとexample/example.jsを読み込むようにするだけで普通のサイトはいけます。

<script src="js/bookmark_bubble/bookmark_bubble.js"></script>
<script src="js/bookmark_bubble/example.js"></script>

jQuery Mobileの方はさらに小技が必要です。

jQuery Mobileとの併用のためにMobile Bookmark Bubbleを改修する

とりあえず全文掲載

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);

コメントアウトして同じようなのを追加している三カ所が改修した所です。
とりあえずこれを使ってもらえれば、jQuery MobileでもMobile Bookmark Bubbleが使えます。使いたいだけの方はここまででどうぞ。

解説

一応解説します。
元々Mobile Bookmark Bubbleがフラグメント識別子を何に使っているかというと、そのフラグメント識別子付きでアクセスされたときはバルーンを出さないという制御に使っています。

  1. http://example.com/ でアクセスするとバルーンを表示し、http://example.com/#bmb=1 に遷移する。
  2. ユーザはそのときにホームへ追加を押すと、http://example.com/#bmb=1 へのショートカットが保存されることになる
  3. ホームのアイコンからアクセスしたときは http://example.com/#bmb=1 にアクセスすることになる。
  4. http://example.com/#bmb=1 でアクセスされたときはバルーンは出さないようになっている。

という仕組みです。考えていますね。
jQuery Mobileもフラグメント識別子を駆使し、Ajaxや既にロードしたページを切り替えることで極力画面遷移なしで滑らかな動きを実現しています。なので、#bmb=1とかアクセスされるとjQuery Mobileさんはhttp://example.com/bmb=1にAjaxリクエストして表示しようとするなどのページ制御処理を自動でやってくれます。
でも、そんなjQuery Mobileにも唯一フラグメント識別子を無視してくれる場合があります。jQuery Mobileは"#"にアクセスしたときは何もしません。
というわけでその穴を使って改修したのが上のソースです。

  1. http://example.com/ でアクセスするとバルーンを表示し、http://example.com/# に遷移する。
  2. ユーザはそのときにホームへ追加を押すと、http://example.com/# へのショートカットが保存されることになる
  3. ホームのアイコンからアクセスしたときは http://example.com/# にアクセスすることになる。
  4. http://example.com/#でアクセスされたときはバルーンは出さないようになっている。

となっています。


なお、Mobile Bookmark BubbleはHTML5のローカルストレージを使って、2回以上バルーンが手動で閉じられたらもうバルーンを出さないという親切機能も入っています。便利ですね。
スマートフォンはもうHTML5でいいよって人はぜひMobile Bookmark Bubbleを使ってみてください。


そして、実はリリース情報出してないけど、スマートフォンで http://www.crowy.net にアクセスすると・・・