過去記事更新

2011年11月17日木曜日

Operaで新Googleリーダーをイジるよ!@2011年11月

突然ですが、タブブラウザ「Opera」での新Googleリーダーの使用について。
  ※それ以外の環境でも参考にはなるかもしれないよ!

追記@2013/3/16:
Google Reader2013年7月1日をもってサービス終了とのこと。 →■雑感、移行手順とか


◇要約
Googleリーダーのデザイン変更が大変気に入らなかった
Operaで旧デザイン表示にしたかったけど情報が見つからなかった
ユーザーJavascriptはうまく動かなかった(というかよく分からなかった)
ユーザースタイルシートでとりあえずなんとかなった

Googleリーダー:http://www.google.co.jp/reader/view/
 →要Googleアカウント。たぶんYouTubeやBloggerで登録していればそのまま使える。
Opera(タブブラウザ):http://jp.opera.com/
 →なぜOperaなのかはまた今度。今回使用したのはVersion/11.52です。

◇まえおき(↓■読み飛ばし可↓)
 ここ数ヶ月でようやくRSSというものを使い始めました。
 複数サイトの更新情報を一行ニュースのように見ることができるためもっと早く使えばよかったという感じです。

 自分の場合、Google Chromeを試すついでにGoogleリーダーを使い始めてハマりました。
 未読件数を表示しつつ、下にスクロールすることで過去分を動的読み込み、「続きを読む」までのサムネイルなんかも見られる、と申し分ありません。
 正直クロームは使いにくくて仕方なかったのですが、ほぼリーダーのためだけにクロームを使ってました。

 が、つい最近Googleリーダーのリニューアルが行われ(過去にも似たようなことがあったとか)、致命的に使いにくくなってしまいました。
 機能変更というよりはデザイン変更に過ぎないのですが、もう数分使っただけで拒絶するレベルでした。
 そこで最愛のOperaに戻り、仕方なく「Opera Mail」による購読も試したりしているうち、Googleリーダーはどのブラウザでも使えるということにようやく気づきました。
  ※先入観って怖いよ!

 さらに調べていくと、Googleリーダーを旧デザインを戻す方法もいくつか見つかりました。
 ……が、どれもFirefox向けなんですね。
 というわけで、「Operaで現行Googleリーダーを旧デザインで使う」ため、自分なりになんとかしてみた経緯を書いておきます。

 まあスクリプトなんかは良く知らないので、もっとスマートにできそうですが動いたからいいやという感じです。
 とりあえず参考にはなるかと。



◇有用サイト
 まずこちらのサイト様。
 http://mozilla-remix.seesaa.net/article/233281310.html

 カスタマイズされたGoogleリーダー用レイアウトが公開されています。
 「Old styled Google Reader」あたりは、その名の通り以前のUIに近いものとなります。
  ※まさに望むものだよ!

 さてOpera◆配布サイト(old-styled)に行ってみると、右上のリストボックスが「Opera」になっています。
 ここには以下のように表示されていました。

 First install Firefox and Stylish to use this style.
 (意訳:いいからFirefoxとStylish使いなよ)
 まあ、StylishというFirefox向けのツールが大変便利(というか人気)らしく、それ用のサイトのようですね。
 ここに並んでいるinstall as user JSのリンクからスクリプトファイル(.js)を落とせます。
 (これをうまいことできれば簡単なのですが、いろいろやって挫折しました)

 このサイトですが、「More Info」の下の「Show code」をクリックするとスタイルシートっぽいコードが表示されます。
 これをCSSとして適用することで期待通りのデザインにすることが可能です。
  ※やってみるものだよ!

 注意点としては、「ユーザースタイルシート」による他サイトへの影響でしょうか。
 まあ、普段「ユーザースタイルシート」を使っていない(意識していない)ならば特に問題は無いかと思いますが、それについても書いておきます。

◇具体的な手順

CSSを作る:
1.上記サイトから好きなレイアウトを探す。
2.「Show code」をクリック、表示されたコードをコピー。
3.テキストエディタに貼り付ける。
4.コードのうち、最初のとそれ以前、最後のとそれ以降を消す。
(普通のCSSファイルのように、クラス定義のみが並んだ状態にする)
5.拡張子を「.css」にして保存。

 いろいろ試したければ、それぞれにファイルを作っておきます。
 ちなみにcssファイルはエディタに関連付けします(まあ当然ですが)。
 要はCSSなので、好みに応じて微調整することも可能です(後述)。

Opera側の設定:
 まずGoogleリーダーを開く。
  http://www.google.co.jp/reader/view/
 右クリックして「サイトごとの設定を編集」を開く。
 「表示設定」/「ユーザースタイルシート」で、先ほど作成したcssを指定して「OK」。
 続いて、メニュー「表示」→「スタイル」→「ユーザーモード」を選択。

 うまく行けば、ここでF5で更新すると使いやすかったGoogleリーダーになります。
 特にブラウザ再起動等は必要なく、指定するcssを変えて更新すれば簡単に切り替わります。

◇設定とか
 「ユーザーモード」状態のリーダーからサイトを開けば、そのタブも「ユーザーモード」になり、ほんのちょっと背景が変なんて場合があります。
 というわけで、ここでは自分の設定を書いておきます。

「表示」→「スタイル」→「表示モードの編集」
左:「作成者CSS」、「作成者フォントと配色」のみチェック
右:だいたい全部チェック(リンクスタイルは任意)
 →なんか変だと思ったら実際にサイトを開いて微調整。




デフォルトCSSを空に
 メニュー「ツール」→「設定」→「詳細設定」→「コンテンツ」→「スタイルオプション」→「表示設定」→「ユーザースタイルシート」を確認。
 適当な空のダミーファイル等を設定しておく。
 (初期設定の「user.css」のような実際に存在しないファイルなら、そのままでもいい)

◇せっかくなので微調整してみたよ!
 カスタマイズ例です。
 とりあえず「Old styled Google Reader」をベースとして少し手を加えました。

「new design slim, more blue」のライン強調を使いたい
.entry:hover .collapsed { background:rgba( 0,0,250,.4 ) !important; }

 この部分をコピーしてCSSに追加します。
 よくわかりませんが貼り付ける位置が一番下だとダメで、一番上はOKでした。
 (どこかで括弧が崩れてるか、重複宣言になっちゃってるのかも)

いろいろ消しちゃう
#gb { display: none !important; }  /*Googleツールバーを消す*/

#top-bar { display: none !important; }  /*検索バーを消す*/


 といった感じで、好みに応じて良いとこどりをしてみるのも良いでしょう。
 (どれがどこに対応しているのか探るのがちょっと大変ですが)
 一応ソースはこんな感じです。
 ブログの改行の都合で読みにくくなってますが、まあ全選択してcssとして保存すれば動きます。




(追記)
 もうちょっといじってみました。


 自分好みにこんな感じにしてみました。
#title-and-status-holderdisplay:none;を入れて「すべてのアイテム」等が表示される部分を消去
#entriesのメニュー仕切り線を少し強調
#entries.list .entry .collapsed {border(ニュースごとの仕切り線)に色つけ
.entry に色指定して全体の背景をやさしめの色に

 自分でカスタマイズしたい人は以下が簡単です。
・あやしい部分に「display:none;」を入れて消してみる
・それっぽい色指定(#000000みたいな)部分をredとかにして、どこが変わるか調べる

 そんな感じです。ではまた。



 以上です。
 Operaぶっちゃけ重いかもしれませんが、ピンポイントな魅力で離れられないブラウザなので、これでまだまだ使い続けられるなと。

0 件のコメント:

コメントを投稿