カヤックのお年玉企画「お好き玉」の解説

web-service

先日紹介した「お好き玉」ですが、アクセス数が多いはずなのにまだ2014に達していません!

アクセスが足りないのか、みんな諦めるのか分かりませんが2014を超したほうが楽しいので、少しだけヒント載せておきます!

素人でも、これをきっかけに少しだけWebエンジニアっぽいことに挑戦できたら楽しいよね:)

逃げる「イイネ!!」が押せない仕組み

このFBイイネが押せない理由は2つあります。

  1. イイネボタンの上にCSSでマスクがかかっている
  2. カーソルに合わせてボタンが動く

この両方を解除しないとボタンは押せません。

Google ChromeDeveloper Toolは必須ですヨ:)

1.イイネボタンの上にCSSでマスクがかかっている

z-indexの仕業かと思ったら、こんな方法もあるんですねぇ。感心。

1
2
3
4
5
6
7
8
9
10
// http://iine2014.fnobi.com/css/iine2014.css:84
#iine:after {
  content: '';
  display: block;
  width: 120px;
  height: 22px;
  position: absolute;
  top: 0px;
  left: 0px;
}

Facebookのイイネボタンのidが#iineで、その直後に疑似要素:afterが同じサイズでかぶさっています。なので、どんなに頑張ってもボタンは押せません。

この疑似要素を消すか、widthを0にしてしまえばボタンは押せますね。Developer Toolの出番やで!

2. カーソルに合わせてボタンが動く

JavaScriptを見てみると、mouseovertouchstartのタイミングで位置を移動させているのが分かります。

1
2
3
4
5
6
7
8
9
10
11
// http://iine2014.fnobi.com/js/iine2014.js:9130
(function (win) {
    $(function () {
        var $window = $(window);
        var $iine = $('#iine');

        // 略

        $iine.on('mouseover touchstart', function () {
          // 略
        });

なので、このeventを解除してやれば動かなくなります(・∀・) onの逆をすればいいのです

まとめ

解説しましたが、つまるところ#iineにまつわるものを解除してやればいいので、Developer Toolを開いて、ちょめっとすれば一瞬ですネヾ(*´∀`*)ノ

さぁ「お好き玉」へ挑戦してみようー!