【javascript】お気に入りに登録するボタンの実装でハマった事【ブックマーク】 | よらノート

よらノート

Webデザインやコーディングネタに関する関連リンク、HTML、CSS、JSなどを取り上げています。

先日とあるサイトのリニューアルの一つとしてブックマークボタン(お気に入りに登録ボタン)を設置した際にハマったのでメモしておきます。

色々と調べてみたのですが、どうもJSでブラウザのブックマーク機能を使おうとしてもブラウザごとの挙動が違っていてイマイチ機能しないようです。

例えば、http://mashimonator.weblike.jp/library/2009/01/javascript-4.html ">Development ReferenceさんのブックマークボタンだとIE、Firefoxでは機能するのですが、Chrome、Opera、Safariでは機能しません。

その対策として機能しないブラウザの場合はアラートで「
ブラウザのメニューから登録する旨を伝えるメッセージを表示する 」という処理をしてくれています。

とっても良い方法だと思います。

ただ、一つ落とし穴がありました。
Firefox限定の落とし穴です。

このJSを実装し、実際にブックマークボタンを動かしてみるとFirefoxの場合


上記のような画面が現れます。
気になるのは赤い枠で囲った「このブックマークはサイドバーに読み込む(H)」のチェックボックスです。

ハマったのはこのチェックボックスです。

これに気付かずそのままブックマークしてそのブックマークからサイトにアクセスしてみると、ブラウザの左側にフレーム表示みたいなエリアが現れ、その中にアクセスしたサイトが表示されるのです。

フレーム(この場合サイドバー?)幅は縦スクロールバー含めて430pxぐらいで、430px以下には出来ても430px以上にはできないという謎仕様・・・。
当然こんな幅では表示しているサイトも縦横スクロールバーが出て満足に閲覧できない状態。
こんな表示の仕方されてもただただ邪魔なだけなので、閉じるしかない気がします。

直し方はブックマークしている名前を右クリックしてプロパティを開く→同様のチェックを外す、という方法です。
これ見つけるのに結構苦労しました。


せっかくブックマークボタンを設置してもこれでは逆にユーザーを不快にさせる元になります。
対処法として、bookmark.js内の処理でFirefoxでクリックした際の処理が記述してある部分にalertを追加してみました。

ブックマークウィンドウが表示される前にアラートを表示し、この後に表示されるパネルで例のチェックを外して登録してくださいねという旨を伝える方法です。
正直あまりスマートじゃないんですが。。。



ブックマークボタン(お気に入りに登録ボタン) 自体、あまり設置する機会も無いかもしれませんが、限定的な条件では効果を発揮すると思ってます。

例えばAdwordsなどのキーワード広告を打って集客をしている場合、1クリックごとに費用が発生してしまいます。

一度もサイトを訪れたことのないユーザーの場合は、大抵が検索結果からそのサイトを訪れることになると思います。
相当有名なサイトになれば口コミや外部サイトからのリンクが増えてくるんでしょうけど、一般的なサイトの場合は検索経由が多いんじゃないんでしょうか。

自サイトへの流入量を増やすべくキーワード広告を打ってはいても、何度も同じ人が有料リンクから来るのは困りものですよね。

そういう時にブックマークボタンの設置を検討してみてもアリかと思います。