LDR の見た目をいじってみた - gan2 の Ruby 勉強日記

結果から示すと、今僕の LDR の見た目はこうなっている。
(横長なのはディスプレイがワイド型だからです。)

もう2年前のエントリなんだけど、LDR の見た目をいじるグリモンを id:antipop さんが書いている。
このグリモンを使うと、広告やヘッダやフッタが消えて、LDR の画面がかなりすっきりする。
また、それをしげふみさんが改良して、しゃべる人とメッセージの位置を調整している。
で、僕もしゃべる人は見えるところにいてくれた方が何かと便利だと思うので、しげふみさんの改良版を使ってみることにした。
そしたら LDR の見た目がすごくすっきりしてかなり使いやすくなった。
お二人に感謝m(_ _)m

でも、しげふみさんが指摘していた問題は僕の環境でも再現された。

antipopさんのスクリプトでは、move total-unread-count into the control boxの部分で、未読数をcontrol部分に表示させるようになっているのですが、私の環境では、うまく表示されません。私の環境のせいか、またはLDR側が何か変わったのでしょうか？
JavaScript Shellで、スクリプトを1行1行実行すると表示されます。
私はJavascriptをよく知らないので、なにか勘違いしているかもしれませんが。
しげふみメモ : 自分が使っているlivedoor Reader用Greasemonkeyスクリプト

それで、何がいけないんだろう？とスクリプトを覗いてみた。
問題になっている箇所がこれ。

// move total-unread-count into the control box
var total_unread_count = DOM.clone($('total_unread_count'));
  setStyle(total_unread_count, {
  'position' : 'absolute',
  'right'    : '80px',
  'top'      : '5px',
  'font-size': '12px'
});
DOM.remove('total_unread_count');
DOM.insert($('control'), total_unread_count, $('fontpad'));

特に問題なさそうに思えるのだけど、このスクリプトだと「id=total_unread_count」なエレメントの中身が空になってしまう。
この部分を見てちょっと気になった点が1つあって、それは元々あったエレメントを削除していること。
この部分でやりたいことっていうのは「id=total_unread_count」なエレメントのスタイルを変更したいだけのはず。
だったら DOM.clone で複製して、DOM.remove で削除する必要はなくないか？

そう思って、単純に位置だけが変わるように書き直してみた。

// move total-unread-count into the control box
var total_unread_count = $('total_unread_count');
setStyle(total_unread_count, {
  'position' : 'absolute',
  'right'    : '150px',
  'top'      : '5px',
  'font-size': '12px'
});
DOM.insert($('control'), total_unread_count, $('fontpad'));

そうしたらうまくいきました。
これで未読フィードとエントリが右端にちゃんと表示される。

また、同じようにしゃべる人の部分も書き直しておいた。

// move message_box into the control box
var message_box = $('message_box');
setStyle(message_box, {
  'position' : 'absolute',
  'left' : '470px',
  'margin-top' : '1px',
  'z-index' : '10'
});
DOM.insert($('control'), message_box, $('fontpad'));

参考