Hatena::Groupptech

ぷちてく RSSフィード

Archive
 
ProfileProfile

2012-10-16

Octopress + はてなスター うまく動かない場合ある

04:03

どーもこんちわ。Github Pages(or 任意ドメイン) + Octopress(jekyll) で静的生成の個人ブログ、結構大きいストリームになったね

昨日のエントリでちょっと触れた id:mono0x さんのブログ、Octopressに移行したみたい

見に行ったらスター周りでデジャブを感じた。id:os0x さんのところと同じふうになってる

はてなスターややおかしい

色々想定外っぽい動作がある。単純にスター付けるだけなら問題ない

BrowserサードパーティデータUserScriptUserStyle
Chrome 22.0.1229.94 mブロックTampermonkeyでOFF不使用
はてなスターのポップアップ

名前とか引用でるやつ、右下にすっ飛んでしまう。カーソル5秒以上あて続けて消去は普通にできる

f:id:noromanba:20121017033650p:image

0xff.toBlog()

f:id:noromanba:20121017033718p:image

monoweb.info

飛び方が結構豪快でなかなかびっくりする。カラースター選択のポップアップも同じようにずれる

引用スター出来ない

以前 os0x さんが新ブログ作られたとき、こういうやりとりをした*1

id:noromanba

ブログおめでとうございます。はてなスターがついててうれしい!のですが、引用はてなスター(はてなスター引用)させない仕様なんでしょうか?どうもうまく付きませんでした

http://s.hatena.ne.jp/mobile/entry?uri=http%3A%2F%2Fos0x.github.com%2F2012%2F04%2F02%2Fwhy-coffee%2F

id:os0x

はてなスターは試しに設置してみましたが、なんか位置がずれていたり、ちょっとおかしいみたいです。後で直します(たぶん…)

新ブログ - os0x.blog

サードパーティブロックもかかわってるかもしれない。以前はてなブログで引用スターできなくなってたりした(今は直ってる)

SiteConfig

os0xさんのくだりの時に、SiteConfigGenerator で SiteConfig おかしくないか見てみてた

SiteConfigGenerator

はてなのソース MIT License なので、Bookmarklet作っておいてた。見てみたいひとはやるといいとおもう

Hatena::Star SiteConfigGenerator - Hatena::Let

その時手元で動かして完成した SiteConfig は結局 os0x さんのサイトのものと同一になってしまったのでわからず

CSSを追ってみたけど、ちょっと見で結局原因わからなかったので、あきらめて投げてた

SiteConfig on 0xff.toBlog()

シンプルなつくり

<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'http://s.hatena.ne.jp/js/HatenaStar.js';
    s.onload = function () {
      Hatena.Star.Token = '1a7adda9e00f0d5389d7f40cb4bfc227c657858a';
      Hatena.Star.SiteConfig = {
        entryNodes: {
          '#content article': {
            uri: '.entry-title a',
            title: '.entry-title',
            container: '.entry-title'
          }
        }
      };
    };
    document.getElementsByTagName('head')[0].appendChild(s);
  }());
</script>
http://os0x.github.com/
SiteConfig on monoの開発ブログ

なかなかいろいろやってる

<script type="text/javascript">
  (function() {
    var s = document.createElement('script');
    s.src = 'http://s.hatena.ne.jp/js/HatenaStar.js';
    s.onload = function () {
      (function() {
        var base = Hatena.Star.EntryLoader.getElementByConfigSelector;
        Hatena.Star.EntryLoader.getElementByConfigSelector = function(selector, parent) {
          var links, n, i, link, a;
          if (selector == 'link[rel="canonical"]') {
            links = document.getElementsByTagName('link');
            for (i = 0, n = links.length; i < n; ++i) {
              link = links[i];
              if (link.rel == 'canonical') {
                a = document.createElement('a');
                a.setAttribute('href', link.href);
                return a.cloneNode(false);
              }
            }
          }
          else {
            return base(selector, parent);
          }
          return null;
        };
      })();
      Hatena.Star.Token = '68a6636f0fc258f53f8e37e14d50c940bc0565d4';
      Hatena.Star.SiteConfig = {
        entryNodes: {
          '#content article': {
            
              uri: '.entry-title a',
            
            title: '.entry-title',
            container: '.entry-title'
          }
        }
      };
    };
    document.getElementsByTagName('head')[0].appendChild(s);
  }());
</script>
http://blog.monoweb.info/
SiteConfig 抜き出す

os0xさんの

Hatena.Star.SiteConfig = {
        entryNodes: {
          '#content article': {
            uri: '.entry-title a',
            title: '.entry-title',
            container: '.entry-title'
          }
        }
      };

mono0xさんの

Hatena.Star.SiteConfig = {
  entryNodes: {
    '#content article': {
      
        uri: '.entry-title a',
      
      title: '.entry-title',
      container: '.entry-title'
    }
  }
};

ここだけ見るとentryNodesの内容全く同じになってる

さっきのスクリーンショットで気づいたひとも多いとおもうけど割と予想通りの結果で、おそらくデザインベースが全く同じだから

CSSとの相性

CSSはてなスターの相性が悪いのかもしれない。Octopressに詳しくないからみんなこのテーマからはじめるのか、たまたまカブっただけなのかはわからない

過去に id:h2u (hail2u)さんがはてなスターセレクタの問題について書いてて、

スターにカーソル合わせるとポップアップで出るあれの話。あれは`blockquote`要素でマークアップされているんだけど、CSSセレクターだと、

body > div > div > blockquote

でしか参照できない。クラスとかID付いてない。

またインラインスタイルも中途半端なので、Webサイトスタイルシートバッティングする。例えば

blockquote {
  background-color: rgb(119, 119, 119);
}

とかすると読めなくなる。インラインスタイルで`color: rgb(119, 119, 119)`しか指定されていないから。他にも`::before`擬似要素とか使って引用符のぶら下げ的なことしてたりとかいろいろバッティングする。

バッティングを解消するためには

body > div > div > blockquote {
  background-color: #fff;
}

body > div > div > blockquote::before {
  display: none;
}

などと書かなくてはならない。アレですね!うんこですね!!1擬似要素はまぁともかくせめて`background-color: inherit`は必要なんじゃないかと思う。

お探しのページは見つかりませんでした。 - はてなブログ

はてなでクラスとかID付いてないのでアレ というの、結構あって困る。/archive ページの[カテゴリ]とか同じような状況で結構ひどい

Octopress もしデザイン選べたりするならいろいろ変えてみるのも手だとおもう

はてなスター側?

ここまでの設定が全部合ってて、はてなスターの仕組み上無理、みたいな話だとかなりきつい

HatenaStar.jsならまだしも、SiteConfigWikiとかバックエンドのサーバとか外部が関わってたら最悪で、バックに至ってははてな中の人しかわからない

ちなみにコンソールにエラーとか出ないから、スター側でだめならバックっぽいけど

情報がない

Octopressにはてなスター設置してる人がそもそもいなそう。検索しても同じような話ないし、そもそも少ない

詰んだ

直せるひとは

コード書いて pull request するかコメントで指摘したりエントリ書いてくれて直れば、うれしい

いまのところ CSSバッティングが一番あやしい気がする

それか拡張が干渉してるとかで特定の環境でしか再現しない場合もありうる

os0x さんの

ぎっはぶに公開してあるから fork して pull request すればいいっぽい

mono0x さんの

ぎっはぶに公開repoなさげ。バケツで private とかしてるかもしれない

たぶん http://blog.monoweb.info/Disqusでコメントすればいいとおもう

Disqus使えないひと*2は、Twitterとかも非公開だったりするから、下のポータルサイトから好きな連絡先たどるしかない

どちらか直ってもう一方も解消して万々歳、みたいになるといいなー

はてなから移行の候補にしてるひと結構いるだろうし という他力本願

つづき

*1:書き込み時ははてなダイアリー、今ははてブロに移行

*2:トラッカー的な話で避けてたり、JS動かしてなかったり、IE9未満のひと


Copylight (c) noromanba 2012-2017