【jQuery】ブックマークレットの登録を分かりやすく案内する方法を考えてみた。

2013-09-05 13:38

この記事は約 7 分で読めます。

ブックマークレットを登録するにはボタン(リンク)をブックマークバーにドラッグしますが、その説明は文章や画面キャプチャがほとんどです。慣れていれば説明を見なくとも登録はできますが、ブックマークレットに馴染みのない方にでも、より直観的で分かりやすく案内する方法はないかと考えてみました。

ブックマークレットの参考サイト

Tumblrのブックマークレット

Tumblrのブックマークレットは、ボタンにマウスオーバーすると矢印が大きく表示され、直観的で分かりやすく参考になります。
flexible-bookmarklet-guide01
http://www.tumblr.com/apps

ソーシャルてんこ盛りのブックマークレット

Tumblrの案内方法をおすすめしたら早速導入されたのが、あくちーさんのソーシャルてんこ盛り。いい感じです。
flexible-bookmarklet-guide02
http://actyway.com/tenkomori

フレキシブルなブックマークレットガイド

上記2つの例は、ボタンの位置やサイズが固定された場合は有効です。しかし、ブログの記事中に設置するブックマークレットボタンなど、スクロール次第で表示場所が変わる場合には対応できません。
そこで作ったのがこちら↓
flexible-bookmarklet-guide03
サンプルページ »
スクロールしても、ボタンの設置(表示)された位置に合わせて、矢印の長さが可変します。これで、ページのどこにあっても、ブックマークバーまでのガイドの役割を果たします。

実装方法

jQueryを使って、ガイド用の要素を追加し、ボタンの位置やサイズに合わせて、ガイドの位置、高さを調整しています。
flexible-bookmarklet-guide04

<script>
jQuery(function(){

      // ブックマークバーからの矢印までの距離
      var barDis = 10;
      // ボタン右端からの開始地点までの距離
      var btnDis = -10;

      // 画像:矢印(bm-arrow-end.png)の高さ
      var arrEnHgt = 22;
      // 画像:矢印(bm-arrow-end.png)/縦線(bm-arrow-line.png)の幅
      var arrLnWdt = 22;

      // 画像:縦線(bm-arrow-line.png)の高さ(パターンサイズ)
      var arrLnHgt = 8;

      // 画像:開始地点(bm-arrow-start.png)の幅
      var arrStWdt = 37;
      // 画像:開始地点(bm-arrow-start.png)の高さ
      var arrStHgt = 32;

  $('body').append('<div id="bmGuide"><div id="bmGuide-Line"></div><div id="bmGuide-Start"></div></div>');
  $('#bmGuide').css({
    "display":"none",
    "position":"absolute",
    "width":arrStWdt,
    "padding-top":arrEnHgt,
    "background":"url(images/bm-arrow-end.png) right top no-repeat",
    "z-index":"100"
  });
  $('#bmGuide-Line').css({
    "background":"url(images/bm-arrow-line.png) right top repeat-y"
  });
  $('#bmGuide-Start').css({
    "height":arrStHgt,
    "background":"url(images/bm-arrow-start.png) right no-repeat"
  });

  $('.bookmarklet').hover(
    function(){

      var winTop = $(window).scrollTop();
      var bmPsn = $(this).offset();
      var arrMinHgt = barDis + arrEnHgt + arrStHgt;
      if(bmPsn.top >  winTop + arrMinHgt){
        // ボタンの幅を取得
        var bmWdt = $(this).outerWidth();
        // ボタンの高さを取得
        var bmHgt = $(this).outerHeight();

        // (1)ページ上部から矢印までの高さを設定
        var bmGdTop = winTop + barDis;
        // (2)可変部分の高さを設定
        var bmGdLnHgt = bmPsn.top - winTop - barDis - arrEnHgt - arrStHgt + (bmHgt)/2;
        // (2)'繰返しの継ぎ目調整(パターンサイズの倍数)
          bmGdLnHgt = Math.floor(bmGdLnHgt/arrLnHgt) * arrLnHgt;
        // (3)矢印の横方向の起点を設定
        var bmGdLeft = bmPsn.left + bmWdt + btnDis;

        $('#bmGuide').css({  "top":bmGdTop,
                  "left":bmGdLeft});
        $('#bmGuide-Line').css("height",bmGdLnHgt);
        $('#bmGuide').fadeIn();
        console.log(bmGdLnHgt);
      }
    },

    function(){
      $('#bmGuide').fadeOut();
    }
  );

});
</script>