2011-11-23

FirefoxのサイドバーでGoogle Readerを開いて縦型配置にする(iPhone用では無くPC用で)

この間Google Readerのデザインが変わったので以前のこれを作り直した。一応忘れないように記録しておく。

サイドバーで開くこと自体は標準的な機能で可能。ブックマークのプロパティで「このブックマークはサイドバーに読み込む」をチェックすれば良い。レイアウトの都合でブックマークツールバーを使いたくなければCustom Buttons拡張を使うと良い。CodeがopenWebPanel("GReader", "http://www.google.co.jp/reader/");なボタンを追加するだけ。

サイドバーで開いただけだと狭すぎて使い物にならない。なのでStylish拡張で次のユーザースタイルシートを設定する。

@namespace url(http://www.w3.org/1999/xhtml);

/* Vertical Google Reader for Firefox Sidebar */
@-moz-document url-prefix(http://www.google.co.jp/reader/) {
  /* Google Bar */
  div#gb { display: none !important;}
  /* Top Bar */
  div#top-bar { height: 30px !important;}
  #logo-container {
    display: none !important;
  }
  div#search {
    margin-left: 0 !important;
    padding: 0 !important;
  }
  input#search-input { width: 100px !important;}
  /* Navi */
  span#lhn-add-subscription {
    margin-left: 0 !important;
  }
  div#scrollable-sections { height:400px !important; }/*画面サイズに合わせて調整すること*/
  div.search-restrict { width: 32px !important;}
  div#nav {
    float: none !important;
    width: 100% !important;
  }
  div#lhn-add-subscription-section {
    height: 32px !important;
  }
  /* chrome */
  div#chrome {
    margin-left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  /* viewer header */
  div#viewer-header {
    margin: 0 !important;
    height: auto !important;
  }
  div#viewer-top-controls-container {
    position: static !important;
    margin: 0 !important;
    height: auto !important;
  }
  #viewer-top-controls > div, #viewer-top-controls > span {
    margin-right: 1px !important;
  }
  div#entries {
    padding-right: 0 !important;
  }
}

未読をタブで一気に開きたいので、Greasemonkey拡張でGoogle Reader - Open all unread buttonスクリプトを入れる。なぜかサイドバーではうまく動かない(何かクリックしただけですぐサイドバーではない方のウィンドウでGoogle Readerが開いてしまう)のでスクリプトに次の修正をする。外部jsファイルを読み込んでいる部分を削除し、読み込んでいるjsファイル(jquery, jquery-ui)を直接スクリプトの中に埋め込む。具体的にはmain関数の中のoau_loadJs(~oau_GM_wait();をコメントアウト。その直後に setTimeout(function(){oau_process();}, 100); を追加。ファイル最後にあるmain関数の外からファイル末尾までの三行をコメントアウト。その直後にmain();を追加。ファイル先頭のコメントの直後にjquery.min.jsとjquery-ui.min.jsの中身を挿入。そうすると、なんとかサイドバー内で使えるようになる。(Google Reader - Open all unread buttonのVersion: 0.3.1で確認)