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は解像度が機種によって多様だったりで難しいのかも。
関連記事
-
-
フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法
PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...
-
-
jQueryにて複数のajax処理のレスポンスをまとめて表示する方法
同時にajax処理を行う際、挙動やコードの書き方に悩まされることが多い。例えばA ...
-
-
Ajaxを使用する際の注意
Ajaxで特にJSONPを使う際によくミスることがあるので 注意点をまとめておく ...
-
-
amazon等のECサイトによくにあるアイテムの満足度を星マークで送信・表示する方法
amazon等のECサイトによくにあるアイテムの満足度を星マークかつ5段階で送信 ...
-
-
Video.jsでYoutube動画を取り扱う方法
Video.jsでYoutube動画を取り扱いたい。具体的にはVideo.jsの ...