「Mobile Bookmark Bubble」と「jQueryMobile」の併用について。
iPhoneは、ブックマークを「ホーム画面に登録」することで、まるでネイティブアプリのようにフルサイズでWEBアプリケーションを実行できる。
そうじゃなくても、ブックマークとしてホーム画面に登録してもらうのは結構有難いことです。
で、Google-codeにある「mobile-bookmark-bubble」を使うことにしたんだけど、これがjQueryMobileと併用すると挙動がおかしくなって大変。
ってことで、コードを変更しなくちゃならない。
とりあえず、必要なファイルを入手するところからスタート。
「Source」→「Browse」で「bookmark_bubble.js」をクリックでソースを表示してコピペ。
この「bookmark_bubble.js」が今回のコアプログラムになる。
「Source」→「Browse」→「example」→「example.js」をクリックでソース表示してコピペ。
この「example.js」が、設定ファイルになる。
ZipファイルとかでDLとか出来ないので、ちゃんとコピペで持ってきましょう。
バルーンを表示する際のテキストは、bookmark_bubble.jsの560行目付近を変更。
「bubbleInner.innerHTML」の中身がそれなので、書き換えちゃう。
// The "Add to Home Screen" text is intended to be the exact same text
// that is displayed in the menu of Mobile Safari.
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>';
} 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>';
}
▼▼▼こんな感じにしちゃう。▼▼▼
// The "Add to Home Screen" text is intended to be the exact same text
// that is displayed in the menu of Mobile Safari.
if (this.getIosVersion_() >= this.getVersion_(4, 2)) {
bubbleInner.innerHTML = 'DOKIPOKE.NETを<b>\'ホーム画面に追加\'</b>すると、次からのアクセスが簡単です。';
}
else {
bubbleInner.innerHTML = 'DOKIPOKE.NETを<b>\'ホーム画面に登録\'</b>すると、次からのアクセスが簡単です。';
}
DOKIPOKE.NETは上記のように修正しました。
そのほか、弄るところといえば…
180行目
「google.bookmarkbubble.Bubble.prototype.TIME_UNTIL_AUTO_DESTRUCT = 15000;」
バブルの表示時間を数値（ms）でセット
228行目
「google.bookmarkbubble.Bubble.prototype.REL_ICON_ = 'apple-touch-icon-precomposed';」
登録アイコンを光沢の有るアイコンにしたい場合は、
<link rel="apple-touch-icon" href="アイコン画像" />
をページのヘッダに指定して
「google.bookmarkbubble.Bubble.prototype.REL_ICON_ = 'apple-touch-icon';」
に書き換え。
バルーン内に表示するアイコンは
<link rel="apple-touch-icon-precomposed" href="アイコン画像">
か
<link rel="apple-touch-icon" href="アイコン画像">
のどちらかで指定された画像を読み込んでくるので、それに合わせて記述を変える。
で、「example.js」のほうは…というと、こいつが厄介。
window.addEventListener('load', function() {
window.setTimeout(function() {
var bubble = new google.bookmarkbubble.Bubble();
var parameter = 'bmb=1';
bubble.hasHashParameter = function() {
return window.location.hash.indexOf(parameter) != -1;
};
bubble.setHashParameter = function() {
if (!this.hasHashParameter()) {
window.location.hash += 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);
▼▼こう変更しました。
window.addEventListener('load', function() {
window.setTimeout(function() {
var bubble = new google.bookmarkbubble.Bubble();
bubble.hasHashParameter = function() {};
bubble.setHashParameter = function() {};
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);
つまり、
「var parameter = 'bmb=1';」を削除。
「bubble.hasHashParameter = function() {};」の処理をしない。
「bubble.setHashParameter = function() {};」の処理をしない。
ということにしました。
この処理は、どんなことをしているかというと
http://example.com/ でアクセス
▼
バルーンを表示
▼
http://example.com/#bmb=1 に遷移。
▼
ホームへ追加（遷移後の「http://example.com/#bmb=1」が登録される）
▼
http://example.com/#bmb=1からのアクセスの場合はバルーンを出さない。
とゆー処理です。
なるほど、実によく出来てるんだけど、jQueryMobileでAjaxが有効になってると（デフォルトでは有効）、元々の「http://example.com/」に「#bmb=1」をAjaxで読み込もうとするので、なんか処理がおかしくなる。
ってわけで、その部分の処理をごっそりと削除。
試しにやってみたら、ホーム画面に登録したアイコンからのアクセス時にはバルーン表示はされなかった。
という訳で、jQueryMobile使用時には応急処置として「window.location」を変更する処理を飛ばすということにしました。
おまけ。
このバブルは、あくまでもブラウザからのアクセスの場合、ホーム画面への登録を促すものなので、「UI-WebView」なんかを使ったネイティブアプリの場合には表示させないほうがいい、と。
その辺りの解説は、このへんを読んで見ましょう。
▼
should not display if in-app web viewer