Showing posts with label Greasemonkey. Show all posts
Showing posts with label Greasemonkey. Show all posts

2008-09-10

Greasemetal リリース -- Google Chrome 版 Greasemonkey

Google Ghrome 版の Greasemonkey がリリースされた。作者はサイボウズ・ラボの奥一穂氏。

ご存じの通り、Google Chrome では拡張機能 (アドオン機能) がまだない。なので Greasemetal は exe ファイルとして公開されている。

使い方

Greasemetal アプリを起動すると、Greasemetal が自動的に Google Chrome を開く。後は普段通り Chrome を使うだけ。

ユーザーとしては、今まで Google Chrome のデスクトップ・アイコンをダブル・クリックしてブラウザーを起ち上げていたのが、Greasemetal のデスクトップ・アイコンに変わるだけ。

Greasemetal のインストール

上記ページの「Using Greasemetal」セクションから、GreasemetalInstaller.exe をダウンロード。

ダブル・クリックするとインストール画面が起動するので、次へ次へと進んでく。

以上。

Userscripts のインストール

Userscripts には Greasemonkey のスクリプトがそのまま使える。使いたい Userscript をダウンロードして、「マイ ドキュメント」下の「userjs」というフォルダーに入れてやる。これでお終い。

Userscripts を入れたら、ブラウザーの再起動なしでスクリプトが使用可能になる!

Userscripts は Userscripts.org で沢山公開されている。

バージョン 0.1 の制限

  • Userscript を管理する UI がない (Userscript を一時的に無効にするには、その Userscript を userjs の外に出す。「ユーザースクリプトを実行するページ」は直接 Userscript をいじって変更する)
  • GM_* 関数はサポートしていない (GM_* 関数を使っている Userscript は須く動かない)

Technical Info

技術的な話は、奥さんの英語ブログに書いてある。

大ざっぱに言うとかうなるらしい。Greasemetal の実体はウェブのプロキシ・サーバー Automation Proxy。Google Chrome は、このプロキシ経由でウェブ・ページを GET する。プロキシは Userscript の「適用サイト」にマッチしたら、その Userscript をダウンロードするようページに <script> 要素を追加して Chrome に渡す。Chrome はページに埋め込まれた script 要素から Userscript を実行する。ほら! Chrome 版 Greasemonkey が出来てしまった。

※間違ってたら、ご指摘下さい

Repository

Subversion リポジトリーも公開中。

svn checkout http://kazuho.31tools.com/svn/chromemonkey/trunk/ chromemonkey

あとがき

これは熱いアプリが出て来た。脱帽! これからの開発にも期待大。

時刻: 2 コメント
ラベル: ,

2008-06-18

ぼくが使ってる Firefox Extentions (Firefox 3 版)

ぼくが Firefox 3 に入れてるアドオン (Extentions) をリスト・アップしてみる。これは、2006/05 に書いた記事の続き。

Google Toolbar for firefox

ご存じ、Google Toolbar。Google の各種検索 (画像検索・ローカル検索・サイト内検索 etc.)、簡易英和機能、Google Bookmark への簡易アクセス。これがないと、もうやってけない。

Firefox 3 への対応は遅れていたけれど、2008-06-15 前後に対応版がリリースされた。

設定については、過去記事もどうぞ。

Greasemonkey

ブラウザー側でサイトを JavaScript で編集するアドオン。ここで言う JavaScript は Greasemonkey Script と呼ばれユーザーが Gseasemonkey 環境に追加インストールする。Greasemonkey Script はUserscripts.org で入手可能。

6 月に Firefox 3 に対応した、Greasemonkey Version 8.0 がリリースされた。

Greasemonkeyスクリプティング TIPS&SAMPLES

FaviconizeTab

Firefox のタブを小さくしてくれるアドオン。名前の由来は、小さくしたタブには favicon しか残らないところから。

ぼくはタブを沢山開くので、すぐゴチャゴチャしてしまう。Faviconize を使ってスッキリなタブを見てからは、もう元には戻れない。

MakeLink

コピーしたテキストを自動編集するアドオン。CopyURL+ と同じ。違いは 2 つ。

  1. Firefox 2.0+ に対応している
  2. 自動編集機能の追加・編集・削除がアドオンの設定からできる (CopyURL+ は user.js を編集する必要があった)

公式ページの最新バージョンは、Makelink 3.0.2 だけれども、ぼくが入れてるのは 8.06。公式ページの情報が古い気がする。

clmemo@aka は Makelink についてスルーだったので、後日エントリーにしやう。

Gears

旧称 Google Gears。ウェブ・ブラウザーにオフライン接続機能を提供するアドオン。Gears のオフライン機能に対応したページは、まだ少ない。ぼくの知る限り、Google Reader, Remember the Milk そして Google Docs の三つ。どれも「使える」ウェブ・サービスなので、Gears をインストールする意味はある。

最近はデスクトップ PC の Firefox にも Gears をインストールするやうになった。デスクトップ PC はオフラインにならないのに? と疑問を持たれると思ふ。実は、デスクトップにアイコンを作る機能が「Gears」に追加されてる。例へば、Remember the Milk のアイコンをダブル・クリックすると、いきなり firefox が起動して Remember the Milk のサイトを開く。

この他にも、Gears は色々と進化のきざしを見せている。現在、ぼくの最注目アドオン。

diigo Toolbar

最近は、Diigo といふソーシャル・ブックマークがお気に入り。気になるテキストをハイライトする機能が便利。教科書に蛍光ペンを走らせる感覚が、ウェブ・ページでも出来る。

ちゃんとしたレビュー・エントリーは、まだ一本も書いてない。diigo は機能が多すぎて、使いこなせない。でも一番魅力的なサービス。

Google Notebook

Google Notebook を使おうとすると外せない。diigo と半々で使ってる。

Firebug

ウェブ開発者用アドオン。JavaScript, CSS のデバッグができる。

あとがき

「Emacs は環境である」とか「カスタマイズしない Emacs は使いものにならない」なんて昔は言っていた (もちろん、今でも言っているけど)。最近は、Firefox も同じやうに言える。「Firefox は (ウェブ・ブラウザーを越えた) 環境」のやうな存在で、「カスタマイズしない Firefox は使いものにならない」。アドオンは、本当に楽しい。

時刻: 2 コメント
ラベル: , , , , , , , , ,

2008-03-11

Google Reader 小アップデートに伴う不具合とその対策

2008-03-06、Google Reader が地味にアップデートした。

このアップデートと前後して、キーボード・ショートカット系に不具合が報告されている。一つは、ショートカットが利かなくなるというもの。もう一つは、Greasemonkey 系のショートカットが働かなくなるというもの。

ショートカットが利かなくなる

これは、Google Groups で報告されているバグ。

firefox では、中クリックでリンク先を別タブ・バックグラウンドに開くことが出来る。今回のバグは、その中クリックを実行すると、キーボード・ショートカット全般が利かなくなってしまうというもの。

対処方法は簡単。ウィンドウのどこかをもう一度クリックする。

簡単な対処ではあるけれど、一手間増えるということで嫌がられている。

Google 側は、この問題を認識しており、2008-03-10 に「修正中」とのコメントを寄せている。

Greasemonkey のショートカットが利かなくなる

ぼくが作ってる Greasemonkey で、ショートカット・キーが利かなくなってる。特に、「y キーで記事を別タブ・バックグラウンドに開く」Greasemonkey スクリプトで修正して欲しいとのコメントを頂いた (Adhoc 修正版をアップ済)。

これは、Google Reader の HTML ソースが変更になったといふ類の問題ではない (さふなら、どれほどよかったことか!)。JavaScript 回りの変更が原因。少しソースを見てみませう。

ぼくの、キーボード・ショートカット回りのソース・コードは下記の通り。

function GRT_key(event) {
  alert("foo");
  element = event.target;
  elementName = element.nodeName.toLowerCase();
  if (elementName == "input") {
    typing = (element.type == "text" || element.type == "password");
  } else {
    typing = (elementName == "textarea");
  }
  if (typing) return true;
  if (String.fromCharCode(event.which)=="y" && !event.ctrlKey) {
    // ココにショートカットで呼び出す関数名を書く
    _gm_open_original_in_tab();
    try {
      event.preventDefault();
    } catch (e) {
    }
    return false;
  }
  return true;
}

document.addEventListener("keypress", GRT_key, false);

addEventListener() を使って、keypress がある度に関数 GRT_key() を呼び出している。GRT_key() は、まずキーがテキスト・エリアで入力されたかどうかを検出する。Google Reader の場合、検索窓で入力されたかどうかをチェックしている。で、検索窓への入力なら、無視。何もしない。そうでないなら、入力文字をチェックして対応する関数を呼び出す。かういふ仕組み。

さて、関数 GRT_key() の一行目に alert() が置いてある。これはデバッグ用のコード。キー入力があるたびに、「foo」とメッセージ・ボックスが出ることを期待している。このコードを入れたまま、このスクリプトを実行してみると何の反応もなかった。どうやら、keypress イベントそのものが、Google Reader に喰い潰されてしまっている。このせいで、キーボード・ショートカットが利かなくなった。

ちなみに、シフト・キーを押しながら文字を入力すると、keypress イベントが呼ばれる。Google Reader が何をしたいのかよく分からない。

閑話休題。

Ad hoc な対処だけど、keypress イベントじゃなくて keyup イベントを使うやうにした。つまり、サンプル・コードの一番下を

document.addEventListener("keypress", GRT_key, false);

から

document.addEventListener("keyup", GRT_key, false);

に変更する。

すると、keyup イベントが送られる。だけど、これで解決ではない。

String.fromCharCode(event.which) が何故か大文字に変換される。なので、「小文字の y」と比較しても、true にならない。これを修正するために、「小文字の y」を「大文字の Y」に変えた。

以上。

まだ残る課題

今回の対処法だと、小文字と大文字で呼び出す関数を切り替えられない。例えば、拙 Greasemonkey「Google Reader SBM」では、「b キーではてなブックマーク、B キーで livedoor clip」にブックマーク出来る仕様にしてある。

今回の Ad hoc な対策だと、このスクリプトは救済出来ない。

で、現在、どうしやうかと悩み中。誰か、よいアイデアがあればコメント・トラックバック下さい m(_ _)m。

時刻: 0 コメント
ラベル: ,

2007-12-04

Mac で Picasa Web Albums のアルバムをダウンロードする方法

Google Operating System より、firefox のアドオンを使って、Picasa Web Albums のアルバムをダウンロードする方法。先に書いておくけど、この方法は Firefox さえ使えれば OS を選ばない。Windows や Linux でも OK。タイトルに「Mac」の名前を入れたのは、現状、「Mac」だけが Picasa Web Albums のアルバムをダウンロード出来ないから。

準備

まず、firefox のアドオンと Greasemonkey スクリプトを一つずつインストールする。

インストールしたら、firefox を再起動。

ダウンロード

手順は以下の通り。ちょっと煩雑だけど、頑張って!

  1. Picasa Web Albums で、ダウンロードしたいアルバムを開く
  2. アルバムの上の方にある「Init Download Links」ボタンをクリック
  3. 右クリックでコンテキスト・メニューを開き、「DownThemAll」をクリック
  4. ダウンロード画面がポップアップするので、ダウンロード先を入力
  5. 「Additional filters」をクリックして、テキスト・ボックスに「imgdl=1」と入力
    Picasa Web Albums - DownThemAll!
  6. 「Start!」ボタンを押す

これでお終い。画像がダウンロードされるのを、お茶でも片手に待ちませう。

最後に「imgdl=1」の解説を一つ。DownThemAll! を実行すると、アルバム・ページにある全ての画像がダウンロード対定にされてしまう。それこそ、Picasa Web Albums のロゴ画定だとかプロフィール写真だとか etc. そこで、アルバム内の写真だけを取り出すフィルターが「imgdl=1」といふわけ。

※もう少し踏み込むと、「Picasaweb Download Links」が、アルバム・ページにある写真の URL に「?imgdl=1」を付け加えていて、DownThemAll! はそれを目印にダウンロードを行なっている。

時刻: 6 コメント
ラベル: , , , ,

2007-02-18

Google Reader を高速化するにはサイドバーを隠せばいい

「Google Reader で大量のフィードを登録した時のビデオ」の続き。

Google Reader は、登録フィードの数を増やす程に、動作が重くなっていく。ぼくは 470 のフィードを購読していて、鈍重な Google Reader に少しイライラを感じてる。1400 のフィードを Google Reader に読み込ませた ma.la さんは、ここら辺を考察して次のやうに書いている。

記事1件分をスクロールするたびにサーバーにリクエストを送信し、サイドバーの未読件数を再描画しようとするので、まっとうにスクロールすることができない。

最速インターフェース研究会 :: Google Readerの紹介ビデオを作った より引用

ma.la さんは、記事スクロールが遅くなる原因を

  • サーバーへのリクエスト送信
  • サイドバーの未読件数の再描画

の二つに絞り込んだように読める。そこで、もう少し考えてみる。上の二つのうち、どっちが主要な原因になってるんだらう。

サーバーに送られる情報は、おそらく「○○の記事を読みました」って情報でせう。フィードの数が増えたって、読者が読む記事は一回に一つなんだから、サーバーへ送る情報量は変わらないような気がする。サーバーでの処理も、サーバーからの情報も同じやうなもんでせう。すると、サイドバーの再描画がネックなのかな? もしさうなら、サイドバーを消してみたらいいのかな?

というわけで試してみた。Google Reader のサイドバーを隠すには、u キーを押すんだったね。

サイドバーを消してみると... ヤバッ。激っ速になった。「フィード数 < 10」な時のキビキビ感が戻って来た! 次の記事がスパッと開かれる。リロードも速くなった。Expanded View と List View の切り替えもスムーズ。ちょいと、Google Reader を惚れ直してしまった。

Greasemonkey

Google Reader では、サイドバーを隠すと記事の max-width 制限が外れる仕様になっている。そのため、一行の横幅が長くなり、読みにくいと感じる方もあるかもしれない。そんな人の為に、Greasemonkey を二つ紹介しませう。

一つ目は、記事を 2 カラム (3 カラム) 表示にする Greasemonkey。c (C) キーでカラム数の切り替えができる。

二つ目は、サイドバーを隠すんじゃなくて、サイドバーのサブスクリプション・リスト (未読数とかを表示してる部分) だけを隠す Greasemonkey。U (Shift + u) で表示・非表示をトグルできる。記事が横に広がり過ぎないんで、ぼくはこちらの Greasamonkey を愛用している。

(追記) 今回、紹介した方法では、ma.la さんがおっしゃってる管理画面での不具合問題は解決しないと思う。悪しからず。

時刻: 2 コメント
ラベル: ,

2007-01-23

Google Reader に検索機能を追加する Greasemonkey

Google Reader に検索窓を追加する Greasemonkey の導入方法について解説する。本エントリーで紹介する検索機能は、Google Reader 用カスタム検索エンジンを利用するので、まずは下記エントリーを読まれたし。

次に Greasemonkey スクリプトをインストールする。

Greasemonkey スクリプトの設定

本スクリプトは、インストールしただけでは利用できない。Userscript の編集が必要。編集手順を解説しませう。

まず、メニューから「ツール > Greasemonkey > Manage User Scripts」を選ぶ。すると貴方の Firefox にインストールされている Greasemonkey スクリプトの一覧が表示されるので、その中から「Google Reader Custom Search (2)」をクリックして「Edit」ボタンを押す。これで、Firefox にスクリプト本体が表示されるはず (もしかしたら、スクリプトが表示されるまでに一寸時間がかかるかもしれない。もし編集できないやうなら、一旦スクリプト・ファイルをダウンロードしてローカル環境で編集しませう)。

スクリプトの上の方に、次のような記述を見つける。

//Based on my other reader search script: http://userscripts.org/scripts/show/5958
//Directions for setting up the script with a custom search engine from:
//http://googlesystem.blogspot.com/2006/12/script-for-google-reader-search.html

// Go to your custom search engine at google.com/coop/cse . Do a search for test.
// You will get a URL like:
// http://www.google.com/custom?cx=003884673279755833555%3A_8kirrqzcjs&q=test&sa=Search&cof=CX%3AGoogle%2520Reader%2520Search%3BFORID%3A1
// Remove this from the URL: "&q=test" and copy the result here, where it says: "REPLACE-THIS"
var SearchURL="REPLACE THIS";

重要なのは一番最後の行の「REPLACE THIS」。この部分をカスタム検索エンジンの検索 URL と入れ換える。URL の取得方法はかうする。まず、

から、カスタム検索エンジンを選び「test」を検索キーワードに入力して検索を実行する。そうしてアドレス・バーに表示される URL から &q=test を削る。これが目的の URL になる。

目的の URL で「REPLACE THIS」を置き換えたら保存。

上手くいけば、スクリーン・ショットのやうに検索窓が表示される。

Google Reader Search

あとがき

注意点をいくつか。

  • https で Google Reader を使ってる人は、Included を編集すること
  • 本エントリーで紹介した Greasemonkey では、10 件以上の検索結果は表示されない
  • 元記事では、Google Reader Custom Search という Greasemonkey スクリプトも配布している。ぼくは、こちらのスクリプトは試していない

ref

時刻: 0 コメント
ラベル: , ,

2007-01-09

Greasemonkey スクリプティング TIPS & SAMPLES

鷹の島さんによる日本で初めての Greaemonkey 本「Greasemonkey スクリプティング TIPS & SAMPLES」を 2006-12-21 に読み終えた。んだけど、その後まとまった時間も取れず、本を持たずに帰省をしてしまったのでレビューをし損ねてた。やっと時間が出来たので、レビューをしませう。

Greasemonkey スクリプティング TIPS & SAMPLES

本書の作者は、ブログ「鷹の島」の管理人、高山恭介氏。出版者は、秀和システム。ページ数 335。サイズは A5 版。値段は税込 2310 円。サポート・ページあり。

(サポート・ページから) 目次を見ると分かる通り、本書は 5 つのパートから成ってる。入門的な Greasemonkey の解説・使い方・書き方・インストール方法から始まって、簡便な Greasemonkey 自動生成ツール Platypus の説明。以上がパート 1 とパート 2。ここまでで 64 ページ。Greasemonkey の初心者向けに書かれていて、一つ一つ階段を登るように解説されているので、分かり易い。

パート 5 は落ち穂拾い的なパート。本書のキモは、パート 3 とパート 4 にある。

パート 3 は、Greasemonkey のサンプル・コード集。単な表示をいじるだけのスクリプトからインタラクティブな操作ができるスクリプトへと、難易度が上がっていく。このパートは、更に初心者・中級者・上級者向けに分かれている。初心者は、少々の CSS と JavaScript の知識があれば理解できる。中級・上級向けのページは、JavaScript のオブジェクト指向プログラミングの経験が要求されている部分がある。JavaScript の Tips も豊富。JavaScript を自己流で書いてる初心者には、かなりおオオメ。なお、少々コード量が多すぎて、ぼくは上級のコードを読み込なしていない (電車の中で読んだからってのもあるけれど)。時間を見つけて、じっくり取り汲みたいな...

さて、パート 3 には、XPath の仕様を使ったスクリプトが多い。XPath に関しては、初めての人でも分かるように丁寧に解説がされていた。ぼくは XPath をこの本で初めて知ったのだけど、十分理解できた。これは便利そう。自作スクリプトでも是非使ってみたい。

希望を言えば、本書で使ってる JavaScript と XPath について解説を巻末にまとてくれてると良かった。

パート 4 は、定番スクリプトの紹介。使い勝手を向上させるカスタマイズ方法も提案している。ただの紹介ページに収まっていないあたり、心憎い。

不満点

まず、本文の色が淡い。慣れると気にならなくなるけど、最初、読み難かった。次にサンプル・ソース。本文より小さめの等幅フォントを使って欲しかった。本文と同じサイズだと、少し読みにくい。最後に、コードを修正する場面では、修正部分を強調表示してくれると良かった。

読みながら不満に思ったのは、以上三点。

Greasemonkey を書き始めようかなっ? て人にはいい本になってると思う。

Greasemonkeyスクリプティング TIPS&SAMPLES
高山 恭介
4798015350

時刻: 2 コメント
ラベル: ,

2006-12-17

グリモン本を買った

鷹の島さんが書いた「Greasemonkeyスクリプティング TIPS&SAMPLES」をようやく買った。

「ようやく」というのは、この本、出版部数が少ないのか本屋で見かけない。近所の本屋を回ってみたけど、どこにも置いてなかった。Amazon で注文しようとしたら、Amazon にも在庫がなかった! (今はあるかな?)

土曜日に、大きな書店まで足を伸ばして、ようやく手に入れたという次第。

300 ページ以上あって税込 2310 円。値段も手頃だし、日本で初めて (?!) の Greasemonkey の解説書らしいし。もっと部数を出してもいいように思うんだけどな。

本のレビューは読み終えてから、やりませう。

Greasemonkeyスクリプティング TIPS&SAMPLES
高山 恭介
4798015350

時刻: 0 コメント
ラベル: ,

2006-11-04

Gmail + Reader Integrator - もう一つの Gmail に Google Reader を埋め込むスクリプト

2006-10-13、Gmail のインターフェースに Google Reader を埋め込む Greasemonkey スクリプトを紹介した。

今日、そのスクリプトに感化された Winston 氏が、新しいスクリプトを公開した。その名も、Gmail + Reader Integrator。

Gmail + Reader Integtator 大きな違いは、Gmail の inbox と一緒に Google Reader のウィンドウが表示されること。つまり、Gmail インターフェースの上に inbox (受信箱)、下に Google Reader という形になる (是非、スクリーン・ショットをクリックして拡大図をご覧下あれ)。作者は、これを Gmail と Google Reader の Split-window view と呼んでいる。

この形なら、Gmail の inbox から離れずに、メールも記事も両方の新着をチェックできる。Google Reader は、画面遷移なしに記事閲覧ができるし、Gmail Preview Bubbles (see clmemo@aka: Gmail のプレビューを見る Conversation Preview Bubbles) を使えばメールも読める。

Gmail and Reader Integrator には、この他にこんな機能がある。

  • Gmail / Reader を折り畳むリンク
  • Google Reader のスタート・ページを、Google Reader の Settings での設定の通りにする (つまりタグ・ページをスタート・ページに出来るということ)
  • ドロップダウン・メニュー式のタグ・セレクター
  • 「v」キーでオリジナル記事を開く (前スクリプトでは、この機能はなかった)
  • Gmail と Reader の view の大きさを自動リサイズ

なかなか面白い。前スクリプトと比べてみるのも一興かと。新し物の好きの人は、是非!

時刻: 0 コメント
ラベル: , ,

2006-10-29

Greasemonkey「Google Reader SBM」アップデート

2006-10-14 に当ブログで公開した「Google Reader から SBM へブックマークするショートカット・キーを追加する」Greasemonkey スクリプトをアップデートした。

変更点は二点。

タイトルの変更

旧ユーザー・スクリプトは、Google Reader から「記事タイトル」を抜き出してブックマークのタイトルに当てていた。これを、

  • ブログ名: 記事タイトル

という書式に変更した。

理由は二つ。一つは、ブログ名が分からないと、どこの記事をブックマークしているのか分かりにくいこと。

もう一つの理由は、ほとんどのブログで、タイトル要素が「ブログ名: 記事タイトル」という書式を取っていること。ただし、いくつかのブログでは「記事タイトル - ブログ名」や「ブログ名 > 記事タイトル」といった書式を使っている。そういうブログに関しては、Google Reader 上からブックマークするのと、そのブログ内でブックマークするので、ブックマークのタイトルが違ってしまう問題が残ってる。

それでも、ブログ名が分からないよりマシと思って、今回の修正を加えた。本当は、オリジナルの記事の title 要素を引いてくればいいのでせう。悲しいかな、それをする技術がない。よいアドバイスがあれば、是非!

URL の自動修正

いくつかのブログ (特にメディア系のブログ) は --- フィードからの訪問者をアクセス解析するためでせうか --- フィード内の「元記事 URL」の末尾に ?ref=atom や ?ref=rss 等を付けて下さる。この件については、ただの日記さんの記事に詳しい。

問題は、「?ref=atom」有りと無しで、SBM が別の URL と認識してしまうことにある。

そこで、URL の末尾に以下のトラッキング用文字列が付いていたら、それを削除するようにした。

  • ?ref=atom
  • ?ref=rss (?ref=rssall)
  • ?from=RSS
  • ?from=atom
  • ?fr=RSS
  • &f=rss (&f=rss1027)
  • &f=atom

具体的なコードは、下記:

url = url.replace(/(\?|&)(ref|from|fr|f)=(RSS|rss.*|atom)/,'');

旧ユーザー・スクリプトをご利用の方は、是非アップデートを。

時刻: 0 コメント
ラベル: , , , , ,

2006-10-16

Google Reader を 2 カラム表示させる Greasemonkey

2006-10-10、Google Reader はサイドバーを隠すショートカット・キー (u) を追加した。Google Reader は、デフォールトで表示幅を 580 px に制定しているけれど、サイドバーを隠すとその制限も外れる。

サイドバーを隠すメリットは、(1) テキストを読むことに集中できる。(2) テキストの表示部分を広く取れる。という所にあらう。

Google Reader - 2 columns けれど、ぼくは横幅が広くなりすぎるのを好まない。視線が左から右に動きすぎて、逆に疲れてしまう。そこで、テキスト部分を 2 カラム表示する Greasemonkey スクリプトを書いてみた。c キーで、2 カラム化のトグルができる。

このスクリプトは、本気で Google Reader を良くしやうってものじゃあない。テキストの量が少なすぎても、多すぎても、(2 カラム化すると) 逆に見栄えが悪くなってしまう。テキスト量は、中間もしくは一ページに若干収まらない程度が丁度いい。

ちょっとしたギミックと思って、お使い下さい。そして楽しんでもらえると、嬉しいな。

あとがき

というわけで、これが一週間前のエントリーで予告していたスクリプト。

あと、この手の話については、もう一つ Greasemonkey スクリプトを書いてるので、お楽しみに。

clmemo@aka: Google Reader アップデート (2006-10-10) より引用

もし、このスクリプトが気に入ったら、C (shift+c) も押してみてね。

時刻: 0 コメント
ラベル: ,

2006-10-14

Google Reader に「はてなブックマーク」するショートカットを追加する Greasemonkey

[注:2006-10-29] アップデートしました。10/29 以前に greader-sbm.user.js をインストールされた方は、アップデートをお願いします。

ヒビノキロクさんが、Google Reader とはてなブックマークを連携させる Greasemonkey スクリプトを公開された。「b」キーで閲覧中の記事をはてなブックマークにブックマークする (正確には、ブックマーク用の画面を別ウィンドウで開く)。とっても便利。

さて、ぼくははてなブックマークの他に livedoor clip も愛用している。こちらにもワン・キーでブックマークできると嬉しい。というわけで

  1. b キーで、はてなブックマーク
  2. B キーで、livedoor clip

する拡張版 Greasemonkey を書いた。

ソースはこんな感じ。

// ==UserScript==
// @name          Google Reader - Social Bookmark
// @namespace     http://at-aka.blogspot.com/
// @description   Add shortcut keys 'b' for bookmarking Hatena Bookmark and 'B' for livedoor clip.
// @include       http://www.google.com/reader/*
// @include       https://www.google.com/reader/*
// @include       http://reader.google.com/*
// @include       https://reader.google.com/*
// ==/UserScript==

var entry = new Array();

function greader_get_title_and_url ()
{
  var current_entry = document.getElementById('current-entry');
  var a = current_entry.getElementsByTagName('a')[0];
  var h2 = current_entry.getElementsByTagName('h2')[0];
  var title = '';
  if (h2.firstChild == a) {
    title = a.firstChild.textContent;
  } else {
    title = h2.textContent;
  }
  entry['title'] = encodeURIComponent(title);
  entry['url']   = encodeURIComponent(a.href);
}

function greader_open_link (link)
{
  window.open(link);
  // if you prefer to open a tab in background, you can use this alternative.
  // GM_openInTab(link);
}

function greader_hatena_bookmark () {
  var b_hatena = 'http://b.hatena.ne.jp/add?mode=confirm&is_bm=1';
  var link = b_hatena + '&title=' + entry['title'] + '&url=' + entry['url'];
  greader_open_link(link);
}

function greader_livedoor_clip ()
{
  var livedoor_clip = 'http://clip.livedoor.com/clip/add?';
  var link = livedoor_clip + 'title=' + entry['title'] + '&link=' + entry['url'];
  greader_open_link(link);
}

function greader_delicious ()
{
  var delicious = 'http://del.icio.us/post?v=4';
  var link = delicious + ';title=' + entry['title'] + ';url=' + entry['url'];
  greader_open_link(link);
}

function GRT_key(event)
{
  var element = event.target;
  elementName = element.nodeName.toLowerCase();
  var typing = false;
  if (elementName == "input") {
    typing = (element.type == "text" || element.type == "password");
  } else {
    typing = (elementName == "textarea");
  }
  if (typing) return true;
  var key = String.fromCharCode(event.which);
  if ((key == "B" || key == "b") && !event.ctrlKey && !event.altKey) {
    greader_get_title_and_url();
    if (key == "B"){
      greader_livedoor_clip();
    } else { // "b"
      greader_hatena_bookmark();
    }
    try {
      event.preventDefault();
    } catch (e) {
    }
    return false;
  }
  return true;
}

document.addEventListener("keypress", GRT_key, false);

こんなことを書いてると、del.icio.us にも対応したいという人があるでせう。そんな人の為に、greader_delicous という関数を用意しておいた。関数 GRT_key の中で greader_hatena_bookmark(); を見付けて greader_delicious(); に書き換えると、b キーで del.icio.us にブックマークできるようになる。

それ以外のソーシャル・ブックマーク・サービスを使う場合は、次のコードを雛型に自分用のブックマーク関数を作られたし。

function greader_hatena_bookmark () {
  var b_hatena = 'http://b.hatena.ne.jp/add?mode=confirm&is_bm=1';
  var link = b_hatena + '&title=' + entry['title'] + '&url=' + entry['url'];
  greader_open_link(link);
}

そして、上の greader_delicious と同じ要領で GRT_key を書き換える。

本当は、もっと簡単にソーシャル・ブックマーク・サービスの切り替えが出来ればいいんだけどねぇ。よいアイデアがあればコメント下さい。

時刻: 2 コメント
ラベル: , , , , , ,

2006-10-13

Gmail に Google Reader を埋め込む Greasemonkey

Gmail Reader Mihai Parparita 氏が、またとんでもない Gmail 用の Greasemokey スクリプトを公開した。なんと、Google Reader を Gmail インターフェースに埋め込んでしまうという荒技。百聞は一見にしかず。スクリーン・ショットをご覧あれ。

これを使うと、Gmail から離れることなくフィードの確認ができる。ビューの切り替え (1, 2) やサブスクリプション・セレクター (g u)、タグ・セレクター (g t) などはショートカット・キーから操作可能。オリジナル記事を開くショートカット、「v」を除く全てのショートカットが使える。

欠点は二つ。フィードの読み込みに時間がかかること。Google Reader 用の Greasemonkey が使えなくなること。Greasemonkey は、頑張れば Gmail 上でも動かせるようになるかな?

Google Groups では、Gmail と Google Reader の融合を! って声が多かったけど、これはちょっと方向性が違うような気がしないでもない。ぼく自身、Gmail の inbox と Google Reader の List View が似ているから、List View のように Gmail の記事もプレビューできればいいのにと思ってた。けれど、かうして埋め込まれた Google Reader を見て考えてみた。メールを List View のやうに開いたとして、その中に Gmail のスレッドを表示する? それはキーボード・ショートカットの相性が悪いんじゃないか?

この Greasemonkey スクリプトを作った Parparita 氏は、さういふインターフェースのテストを手軽にやらせて、ユーザーの声を聞こうとしてるんでせうね。

ref

Parparita 氏の Greasemonkey スクリプトを紹介した過去記事はこちら。

時刻: 0 コメント
ラベル: , ,

2006-10-04

Google Reader で新しいタブを開く Greasemonkey スクリプト

Google Reader にて、元記事 (original post) を新しいタブで開く Greasemonkey スクリプトを書いた。

y キーで新しいタブを開く。ショートカット・キー v との違いは、v では開いたタブにフォーカスが移動するのに対して、y ではバックエンドでタブを開くこと。本当は、「タブ」の「t」を使いたかったけど、「タグ」の「t」に予約されてたので諦めた。

もう少し突っ込んだ話は、旧記事を参照されたし。

時刻: 8 コメント
ラベル: ,

2006-10-03

Greasemonkey scripts to widen the entry body in Google Reader

日本語版は英語本文の後にあります。

Google Reader sets max-width of the entry body 580px. If you read your feeds in Google Reader with your web browser wide, you will see the white space beside the entry body.

The following Greasemonkey scripts set the max-width 90%, 95%, and none, respectively. Pick one as you like :)

日本語版

Google Reader の表示領域を広くすると (see clmemo@aka: A Greasemonkey script to hide a sidebar in Google Reader)、記事本文の右横にスペースが出来る。さう、Google Reader は CSS で本文に max-width を設定している。その大きさは 580px。

その広さが適切かはさて置き、広い表示領域を求める声を聞いた。試みに、max-width を none にするやうにしたのだけど、広すぎるように感じた。ここら辺は好みの問題だと思うので、適当に 3 つの Greasemonkey スクリプトを書いた。上から順に、max-width を 90%, 95%, none に上書き設定する。

腕に覚えのある方は、スクリプトを直接編集したり、userContent.css をいじってもいいでせう ;)

時刻: 0 コメント
ラベル: ,

A Greasemonkey script to hide a sidebar in Google Reader

英語本文の後に日本語版があります。

When I wrote a Greasemonkey script to hide/show a folder navigation in a side bar of Google Reader, I thought that someone would like to hide/show a whole navigation of the side bar. And David gave me a request. Okay. No more words. Here's another userscript to hide and show a side bar in Google Reader. Install, and type z!

Note 1: Please unistall or disable greader-hide.user.js before you use greader-hide-sidebar.user.js.

Note 2: If you want to widen the width of the entry body, please read the following article.

日本語版

先日、Google Reader のサイドバーにあるフォルダー・ナビゲーションを隠す Greasemonkey スクリプトをささやかに公開した。

そしたら、サイドバーそのものも隠せないものか? とのコメントが入った。

まあ、前のスクリプトを書いてる時から、きっと誰かがそんな事を言うだらうなぁ、と思ってたんだけどね。そんなわけで、Google Reader のサイドバーを隠す Greasemonkey スクリプトを公開する。

前バージョンと同じで、z キーで表示/非表示のトグルを行なう。キーバインドが (前バージョン) と重なっちゃうので、前のスクリプトを入れてる方は、アンインストールするか Disable にして頂きたい。

なお、Google Reader は max-width を設定しているので、右横に大きくスペースが出来る方もおられると思う。そういう方は、次の記事も併せてお読み頂きたい。

時刻: 0 コメント
ラベル: ,

2006-10-01

Greasemonkey to Hide and Show Folder Navigation in Google Reader

英語本文の後に日本語版があります。

I believe that those who love the simplicity of the interface of old Google Reader, which was called 'River of News' view, dislike the folder navigation in the left side plane. The number of unread items next to the folder (tag) in the navigation make me feel uneasy with whispering 'READ MORE' in silence beside the content of the items, and rob me of my concentration to read the items!

Okey. Here's a quick hack to hide a folder navigation.

This Greasemonkey stript adds a shortcut key U for toggling show/hide following items:

  • A header (a header logo in top left and a global info in top right),
  • Add subscription box in the left side plane,
  • A folder navigation in the left side plane.

This script is based on my old Greasemonkey script 'Google Reader - wide view'.

ぼくは Google Reader がリリースされた直後からずっと使っていて、旧 Google Reader のシンプルな UI のファンだった。

新しい Google Reader は、どうにも「読む集中力」が削がれてしまう。いろいろと理由を考えた結果、サイドバーのフォルダー・ナビゲーションが原因だという結論に達した。このリンクの色鮮やか青色と、ゴチャっとした文字がぼくの視線を引き付け、本文から目を離させてしまう。そして、未読を表す数字が、ぼくに「記事をもっと読め」と強迫するように感じる。

旧い Google Reader は、その点、無口に未読フィードを出し続ける素直なフィード・リーダーで良かった。

そういうわけで、ちょいと昔の Greasemonkey スクリプトをいじって、ヘッダー、フィードの登録、フォルダー・ナビゲーションを隠すコードを書いた。表示/非表示を「U」キーでトグルする。

旧 Google Reader ファンの皆さま。どうぞお試しを。

時刻: 2 コメント
ラベル: ,

2006-09-15

Gmail の誤スパム判定と戦う

Gmail のウリの一つは、強力なスパム・フィルター。Gmail は勝手にスパム・メールをスパム・フォルダーに振り分けてくれる。時々、スパム・フィルターをすり抜けてくるメールを、ユーザーは「Report Spam」するだけでいい。

でも、Gmail も万能じゃない。ごく稀に、スパムでないメールをスパム判定してしまう (そういったメールは、「Not Spam」と Gmail に教えてあげやう)。マーフィーの法則か、誤スパム判定されたメールに限って、重要なメールだったりする。そこで、誤スパム判定されないための Tips と、誤スパム判定されたメールをより素早く救出する Tips を一つずつ紹介しませう。

Contacts List に登録する

誤スパム判定されない為には、どうすればいいか。Gmail には、「このメール・アドレスから届いたメールはスパムじゃないよ」と教えてあげるホワイトリスト機能がある。ヘルプを引用しませう。

友人または知人のメール アドレスを連絡先リストに追加してください。 Gmail では、連絡先から送信されたメッセージは必ず配信されるようになっています。

Gmail: ヘルプ センター - メールに迷惑メールのマークが付けられないようにするにはどうすればよいですか。 より引用

はい。ただ、メール・アドレスを「連絡先リスト (Contacts List)」に追加するだけ!

事務や連絡用メーリング・リストなど、自分が連絡を取ることがない相手のメール・アドレスも「連絡先リスト」に登録しませう。メールが届く可能性の少しでもあれば、メール・アドレスを「連絡先リスト」に登録しませう。

これで少くとも、未知のメール・アドレスから来たメール以外、スパム・フィルターでメールを失うことはなくなる。

誤スパム判定されたら...

誤まってスパム判定されたら、「迷惑メール (Spam)」から目で「誤まってスパムとなった」メールを探さないといけない。そしてスパムでないメールを見つけたら、そのメールにチェックを入れて、「Not Spam」と Gmail に教えてやる。

この時、役に立つのが検索機能。

Gmail の検索は、デフォールトでスパムを無視するようになっている。そこで、in:spam 構文を使う。この構文を使うと、スパム・メールを対象にメールを検索できる。

例えば、大学関係者であれば

in:spam from:ac.jp

で、教育機関からのメールを探す。

何かプロジェクトが動き出しているなら

in:spam プロジェクト名
in:spam プロジェクトに関係ある地名
in:spam cc:プロジェクトの責任者のメール・アドレス

などで検索してみるのも良いでせう。ここら辺は、非常に泥臭いけれど、想像力を膨らませて....

もし、ブラウザーが firefox なら、スマート・フォルダー (要・Greasemonkey) に、上の「誤スパム判定されたメールを見つける検索式」を保存しておくと便利。

ぼくは

in:spam from:所属機関のメール・アドレス

という検索式を「Salvage from Spam」という名前で保存している。

この検索を使う方法では、全ての誤判定されたメールを見つけることはできない。検索式を過信せず、時々スパム・メールを目でチェックして欲しい。

時刻: 2 コメント
ラベル: ,

2006-09-13

Gmail のプレビューを見る Conversation Preview Bubbles

Gmail に望まれている機能の一つに、メールのプレビュー機能がある。本記事では、Gmail にプレビュー機能を追加する Greasemonkey スクリプト Conversation Preview Bubbles を紹介しませう。

Conversation Preview Bubbles Conversation Preview Bubbles をインストールしたら、Gmail のコンバセーションの上で右クリックしてみませう。スクリーンショックトのように、吹き出し (バブル) が現れ、その中にメール本文のプレビューが表示される。プレビューしたメールは、自動的に既読になる。

プレビューの中の「Close」リンクをクリックするか、Gmail インターフェースの適当な所をクリックすると、吹き出しは消える。

キーボード・ショートカット

Conversation Preview Bubbles の良さは、キーボード・ショートカットを使って十二分に発揮される。

v
> の付いているコンバセーションをプレビューする

v キーをクリックすると、右クリックを押すのと同じ効果が得られる。

更に、次のキーボード・ショートカットを覚えておくと便利。

j
次のコンバセーションに > を移動する
k
前のコンバセーションに > を移動する
o
今のコンバセーションを開く

ショートカット・キー j, v の交互連打で、どんどんとメールを読むことができる。v で開いた吹き出しは、キーボードの j を押した時に自動的に閉じる。

Gmail では、メールを開いた後、ショートカット・キーで次のコンバセーションに移ることができるけど、その場合、任意のメールだけピックアップして読むことは出来ない。Inbox に 10 通位いメールがあって、その内の 2、3 通をまず読みたい、みたいな用途に Conversation Preview Bubbles はもってこい。

吹き出しを出す時に、少し待たされる場合もあるけれど、普通にメールを開く場合と差はないと思う。むしろ、メールを開いた後 Inbox に戻る手間が省けるのでよろしいかと。

Gmail のメールを、キーボード・ショートカットだけで読み進めよう、という発想は、ただ氏のブログで得た。氏のこだわりには及ばないけれど、Conversation Preview Bubbles もいい仕事をする :)

ショートカット・キーの早見表は、次のページなど、どうぞ。

あとがき

最後に、Conversation Printable Bubbles の欠点を書いておかう。

メールのサイズが大きい場合、メール本文は一画面内に収まらず、吹き出しの中にスクロール・バーが現れる。Gmail Preview Bubbles の欠点は、その場合にキーボード・ショートカットで吹き出しの中をスクロール出来ないこと。スペース・キーを押すと、吹き出しの外側がスクロールしちゃう。

でも、一画面に収まらない大きなメールは、大低、広告メールの類なのであまり困らない。

Gmail に新着メールが届いた場合、Conversation Preview Bubbles は新しいメールが来た事を理解できず、新着メールが届く前の位置でプレビューを出してしまう。画面をリロードすれば、これは解決する。

時刻: 0 コメント
ラベル: ,

2006-08-07

Google Reader にアクセス・キーを追加する Greasemonkey スクリプト

Google Reader が他のフィード・リーダーと比べて優れていたのは、ショートカット・キーを用意した点だった。基本的に、スペース・キーを連打するだけで全てのフィードが読めてしまう。スターを付けるには「s」キーを押すだけ。キーボード操作主体でフィードが読めることは画期的だったように思う。

Google Reader のリリース後、Bloglines も後を追うようにショートカット・キーを実装した。後発の livedoor Reader はリリース当初からショートカット・キーを装備していた。やはり、皆、ショートカット・キーは不可欠だと思ったんでせうな。

Google Reader は、その後もショートカット・キーの充実に余念がない。

そんなショートカット・キーにこだわりを持っているかのような Google Reader だけど、実は、ショートカット・キーが割り振られていない機能がある。特に必要に迫られるのは、次の三つの機能:

  • アイテムの並べ方を、auto と date の切り替える機能
  • 既読アイテムの表示・非表示を切り替える機能
  • 読み終えたアイテムを未読に戻す機能

Adds additional Google Reader access keys

ここからが本題。上記の機能にショートカット・キーを割り当てる Greasemonkey があるので紹介しませう。

この Greasemonkey スクリプトをインストールすると、次のショートカット・キーが使えるようになる。

b
アイテムの Sort を auto と date の間で切り替える
x
既読記事の表示・非表示を切り替える
z
未読チェックボックスにチェックを入れる

2006-08-06 以前のスクリプトには、Google Reader の検索ボックス内で「b」「x」など文字を入力すると、ショートカット・キーまで動作してしまう不具合があった。古いスクリプトをインストールされてる方は、新バージョンの上書き再インストールをお勧めする。

スクリプト詳細

この Greasemonkey スクリプトの作者は、ecmanaut の Johan Sundström 氏。彼はブログで、このスクリプトの技術的な詳細を書いている。

興味のある方は、御一読あれ。

キーの変更

この Greasemonkey スクリプトで設定しているショートカット・キーは、簡単に変更することができる。最後に、変更方法を簡単に説明しませう。

まず、Greasemonkey スクリプトをダウンロードして、エディターで開き、keys というコードを見つける。

var keys = { 'B':'div#order-by', // order By
      'X':'div#read-items', // Sort by
      'Z':'div.read-state input' // Keep unread
           };

ここで、'B':'div#... となっているのがキーと機能の対応表。左がキーで、右が機能ね。キーの部分 (この場合だと 'B') を好みのキーに変更して、firefox で編集後のファイルを開けば、作業終了。

時刻: 1 コメント
ラベル: ,
Subscribe to: Posts (Atom)