iPhoneにホーム画面登録を促すダイアログを表示
2024/01/13
スマホ用のサイトでお気に入り登録を促すというのは以前に無理という結論が出たけれども、ホーム画面登録を促すダイアログなら「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は解像度が機種によって多様だったりで難しいのかも。
関連記事
-
-
Leafletで「Leaflet.markercluster」プラグインを導入してマーカークラスタ機能を追加する方法
LeafletとOpenStreetMapでマップ上にマーカーを複数設置した上で ...
-
-
無料でシンプルなアイコンを設置できる「Feather」の利用方法
ページ上にアイコンを表示したい場合Font Awesomeを使うことが多いが、個 ...
-
-
JavaScript / jQueryにてページ表示時に指定したテキストボックスにフォーカスさせる方法
ページを開いた際に指定したテキストボックス(input type="text") ...
-
-
javascriptやjQueryで画像を書き換えても変わらない場合
けっこう前に画像をアップロードしてリアルタイムにプレビューする機能を作った時に、 ...
-
-
jquery.cookie.jsで「$.cookie is not a function」エラー
フロントエンド側でCookieを利用したい場合jquery-cookieを用いる ...