Redmine の「説明」にテンプレート・テキストを挿入する bookmarklet を作った

Redmine を使うに当たって、「説明」部分のテンプレートを用意したい。これをブックマークレットで実現した。

Redmine のパワーユーザーならご存じの通り、Redmine で「新しいチケット」を登録する時、「題名」と併せて重要なのが「説明」。

「バグ」に絞って話を進めると、どのような操作をしたのか? エラー・メッセージは何と出たのか? ということは最低限書いて欲しい。

けれど、新人のテスターやプログラミングをやったことのない人が Redmine にバグ登録するのは敷居が高い。そこで、「説明」部分にテンプレートを置き、入力の補助を行なう。

ブックマークレット

「説明」部分にテンプレートを挿入するブックマークレットを作った。

JavaScript のソースコードはこんな感じ。

document.getElementById("issue_description").value="
h1. バグについて

h2. バグが出た場所

* 

h2. バグを出す操作

#

h1. エラー・メッセージ

<pre>
</pre>"

これをブックマークレットに直したのがこちら。

• テンプレート挿入

簡単に説明を加えると、Redmine の「説明」の textarea の ID は issue_description。textarea の中身を書き換えるには InnerHTML ではなく value を使う。

ちなみに Redmine のバージョンは 2.3.0。

他の方法もあるけれど

Redmine のソースコードをいじるのは、バージョン・アップに対してリスクが大きい。特に細めにバージョン・アップを繰り返す場合はやりたくない。

Redmine Plugin では Issue Template というのが良さそうだった。今回、このプラグインが程提するほどの高性能を求めないことと、プラグインは開発が止まる (もしくは最新版に追従しない) リスクがあるので使用を控えた。

あとがき

皆にブックマークレットを登録してもらうのが手間と言えば手間だけど、基本、Redmine 初心者用と割り切っている。

パワーユーザーになれば、定型にこだわることなくテキストを入力する。ほんの数行で理解させるバグ報告の場合もあるし、とても詳しいバグ報告を書かないといけない場合もある。こういった判断は経験を積まないと出来ない。

今回のブックマークレットは、とりあえずバグ報告をする時に「初心者」の敷居を低くすることに主眼を置いている。複数のテンプレートがあるなら、複数のブックマークレットを作ればいいし、ユーザーの力量によってテンプレート挿入を自己判断に任せられることが気に入っている。

iPhone で Safari のソースコードを表示させる Bookmarklet

iPhone の Safari で、時々、今見ているページのソースコードが見たくなることがある。で検索してみると、いろんな人がブックマークレット (ブックマーク) を作ってた。一つリンクを張っておく。

• iphoneのsafariでソース表示する方法iPhone / iPad｜プログラムメモ

せっかくなので、どういうソースコードなのか見てみる。

d=document;
c=d.charset%7C%7C0;
i=0;
o=d.documentElement;
d.write(%22%3Cpre%3E%22+(o.outerHTML%7C%7Co.innerHTML).replace(/&/g,%22&%22).replace(/%3C/g,%22<%22).replace(/%3E/g,%22>%22)+%22%3C/pre%3E%22);
c?d.charset=c:0;
void(document.close());

%XX 表記が読み難い。デコード! (ref. JavaScript escape vs encodeURI: lower ASCII)

d=document;
c=d.charset||0;
i=0;
o=d.documentElement;
d.write("<pre>"
          +(o.outerHTML||o.innerHTML).replace(/&/g,"&amp;")
                                     .replace(/</g,"&lt;")
                                     .replace(/>/g,"&gt;")
          +"</pre>");
c?d.charset=c:0;
void(document.close());

読みやすくなった。

変数 o に全てのドキュメント要素を入れて、それを pre 要素の中に書き出し直すようにしているわけね。その際、&, <, > といったタグの部品を読めるように置換する、と。なるほどねぇ。勉強になった。

A bug in subscription bookmarklets for Google Reader

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

demo-n San reported me a bug in official subscription bookmarklets for Google Reader, which are available at 'Google Reader > Settings > Goodies' and Official Google Reader Blog: 'Subscribing to feeds via little Google buttons'. When the char ? is included in feed url, bookmarklets fail to subscribe. ? should be escaped to %3F.

Here are fixed subscription bookmakrlets.

• Subscribe...
• Subscribe... (show all feeds / not worked with IE6 SP2)

Note. Some wiki sites provide feed url including '?'. The feed url in FC2 blog, one of the most famous Blog service in Japan, is like this: 'http://USERNAME.blogXX.fc2.com/?xml'.

Google Reader が提供するフィード登録用 bookmarklet にバグがあった (Thanks: demo-n さん)。フィード URL に ? が含まれていると、フィードの登録に失敗する。

例えば、FC2 ブログのフィード URL は http://USERNAME.blogXX.fc2.com/?xml という形で与えられるので、FC2 ブログのフィード登録が全滅する。この他にも、いくつかの wiki がフィード URL に ? を含むという。URL を escape() することで、この問題は解決する。修正版 bookmarklet は以下:

• Subscribe...
• Subscribe... (show all feeds / not worked with IE6 SP2)

Google Reader のフィード登録用 bookmarklet の使い方・説明は、過去記事を参考にされたし。

• ref. clmemo@aka: Google Reader にフィードを登録する方法

(注) 過去記事で配布している bookmarklet もバグ修正済。

Google Reader の Next ブックマークレット

Google Reader に、Next ブックマークレットという変わったツールが追加された。この新しいブックマークレットの説明を致しませう。

ブックマークレットの入手

Google Reader の Settings > Goodies タブの第二セクション「Put Reader in a bookmark」にブックマークレットがある。ブックマーク・ツールバーにドラッグしてインストールはお終い。

Next ブックマークレットとは何か?

先の Goodies ページにも公式の説明が (英語で) 書かれてる。皆さん、あの説明を読んで理解できましたか? ぼくは分かんなかった。(Next ブックマークレットの使い方が分かった) 今、読み返して、ハァなるほどという感じ。

@aka 流に Next ブックマークレットの説明をしてみませう。

こんなシチュエーションを考える。

1. ブラウザー・ウィンドウ (or タブ) を二つ起動
2. 片方に Google Reader を、もう一方には適当なページを表示
3. Google Reader で最新の未読記事を開き、記事を既読にする
4. 最新の記事のオリジナルの URL をコピーする
5. もう一方のブラウザー・ウィンドウに移って、取得したオリジナルの URL を開く
6. 3. から 5. を繰り返す

随分手間なことをしてる。理屈では、こうすると Google Reader で読んでるフィードを、全部そのサイトで読むことができるよね。

Next ブックマークレットは、上の手順をワン・クリックで出来るようにしたものになる。

つまり、Next ブックマークレットをクリックすると...

1. Google Reader の最新未読記事を既読にして
2. その最新記事をブラウザーで開く

ということをしてくれるわけ。

用途例

要約フィードしか提供していないブログがある。例えば GIGAZINE さんとか Going My Way さんとか。ここらのブログは、とても面白いので、ほぼ全ての記事をぼくは読んでる (ゴメン、嘘。読みたいと思ってる)。けれど要約フィードなので、フィード・リーダーの中で全文を読めない。結局、毎回元記事 (オリジナル・ポスト) をブラウザーで開いてる。

ほとんどの記事をブラウザーで開く。こういう時に、Next ブックマークレットが活躍する。クリックするだけで、これらの記事をブラウザーで開いてくれる。記事を読んだことは、Google Reader にも自動的に反映される。とっても便利。

さてさて、普通に Next ブックマークレットを使うと、Google Reader の中で読めばいいフィードまでブラウザーで開いてしまうかもしれない。対処策を一つ。Next ブックマークレットで開くフィードにタグを予め振っておきませう。例えば「abstract」とか「next」というタグがいいかもしんない。そして、Settings > Goodies ページから、タグ対応の Next ブックマークレットを作る (スクリーンショットが参考になると思う)。

タグ付 Next ブックマークレットを使えば、余計なフィードを開くこともなくなる。

Next ブックマークレットを押し続けて、読む記事がなくなった時、Google Reader のイースター・エッグを見ることができる。お楽しみに!

Google Reader にフィードを登録する方法

Google Reader でのフィードの登録方法について説明しませう。

Google Reader にフィードを登録する方法は、いくつかある。今回紹介するのは、そのうち最も代表的な二つの方法。すなわち、以下の方法:

1. Google Reader のトップページから登録する方法
2. Bookmarklet を使う方法

トップページから登録

Google Reader の左サイド中頃にある「Add Subscription」というリンク (背景色:緑色) をクリック。すると、スクリーン・ショットのようにテキスト・ボックスが開く。ここに登録したいフィードの URL を入力して「Add」ボタンをクリックする (スクリーン・ショットは当ブログのフィード URL を入力した所)。

フィード URL が分からない場合は、サイトの URL を入力するだけでも OK。Google Reader がフィード URL を自動で探して登録作業を進めてくれる。

bookmarklet から登録

フィード登録用の bookmarklet は、Google Reader の Settings > Goodies タブの一番下、「Subscribe as you surf」セクションにある。「Subscribe...」というリンクがあるので、これをブラウザーにブックマークする (か、ブックマーク・ツールバーにドラッグ & ドロップする)。

どこに Bookmark があるか分からない人は、下の bookmarklet を使われたし。

• Subscribe...

ブックマークレットの使い方は簡単。Google Reader に登録したいブログを訪れたら、そのブログ上で bookmarklet をポチっと押すだけ。すると、ブックマークレットが自動でフィードを探し出し Google Reader の登録画面に移動する (スクリーン・ショットは [N]ネタフル を登録しようとしている所)。

Google Reader のトップページと違って、この時点で登録は終わっていない。これは登録終了画面ではなくて、登録確認画面。ビューの右上にある「Subscribe」というボタンをクリックすることで、登録が終了する。

旧 Google Reader の登録確認画面では、「どのように Google Reader で見られるか」をプレビューしてくれたけど、新しい Google Reader はプレビューを見せてくれない。これは、おそらくバグだと思う。近日中に直るんじゃないかな?

新 Google Reader でプレビューを見るには、「View all items」リンクをクリックする。

ぼくは要約フィードは Google Reader で読まない。だから、このプレビュー画面は重宝してる。プレビューで要約だと分かったら、登録をキャンセルしてる。

旧 Google Reader は、フィード登録時にタグ (ラベル) の設定が出来た。新 Google Reader では、それが出来ない。これもバグだと思う。

Show all feeds bookmarklet

それにしても、フィード登録用 Bookmarklet が Google Reader の中で用意されるようになってよかった。これで、「ブックマークレットがない!」って困る人も減ると思う。

実を言えば、上のブックマークレットは、The Official Google Reader Blog で公開されたものとほぼ一緒なんだよね。だから目新しいものじゃない。ただ、ブログの中だけでしか紹介されてなかったんで、見つけられない人も多かったことでせう。

• Official Google Reader Blog: Subscribing to feeds via little Google buttons
• ref. clmemo@aka: Google Reader に Feed を登録する

さて、The Official Google Reader Blog では、「複数のフィードが用意されている場合、それらのフィード一覧を表示してユーザーに選ばせる」タイプのブックマークレットも公開している。そのブックマークレットは、IE6 (SP2) で動作しないそうなので、Goodies ページには載らなかったんじゃないかと推測してる。パワーユーザーには、こっちのブックマークレットの方が合うかもしれないね。

• Subscribe... (show all feeds)

あとがき

Google Reader のフィード登録に興味があれば、「Add Subscriptoin」リンク隣の「Browse」も見て欲しい。こちらには、Google Reader チーム推薦のフィード・パック (英語・泣) や、検索からフィードを登録する仕組みが用意されてる。

今回は紹介しなかったけど、Google Toolbar for firefox を使う方法も便利。

• clmemo@aka: Google Toolbar for Firefox v2 から Google Reader にフィードを登録する

Google Browser Sync のブックマーク同期における二つの問題

Google が出した firefox 用拡張機能、Google Browser Sync について...

• clmemo@aka: Browser Sync で firefox を同期させる

ブックマークの同期に関して、二つ程問題を見つけたので記事にする。

Portable Firefox の問題

Google Group でもスレッドが立っているけど、Portable Firefox で Google Browser Sync が正常に動作しない。

• Google Groups: Google-Firefox-Extensions

具体的には、Portable Firefox で Google Browser Sync が

1. サーバーからのブックマーク情報を取得できない。
2. サーバーへのブックマーク情報のアップロードには成功する。

どういう問題が起きるか、firefox A と B、それに Portable Firefox C があるとして例をお示ししやう。firefox は A, B, C の順番で起動するとする。

まず、firefox A のブックマーク情報がサーバーにアップされる。次に firefox B はサーバーから firefox A のブックマーク情報を取得する。ここで、firefox A と B のブックマークで同じブックマークは無視してブックマークの足し算が行われる (ブックマーク A と B の和集合を取ってる = A∪B)。足し合わされたブックマーク A∪B は、firefox B の終了時にサーバーにアップされる。最後に Portable Firefox C を起動すると、サーバーのブックマーク情報 A∪B を取得に失敗する。本当は、firefox A と B と C のブックマーク情報の足し算が出来なきゃいけないのに、A∪B の情報が得られないので、ブックマークは Portable firefox C ままになる。ここで、Portable firefox C を終了すると、Portable Firefox C のブックマーク情報がサーバーに送られ、サーバー上のブックマーク情報 A∪B を上書きしてしまう。再び、firefox A or B を起動すると Portable Firefox C の情報をサーバーから取得して以前のブックマーク情報が失われる。

この問題を回避するには、Google Browser Sync 全体でブックマークの同期をやめさせるか、Portable Firefox に Google Browser Sync をインストールさせないかの二つしか手段がないと思う。どっちも面倒なんで、早く Google が修正版を出してくれることを願いばかり。

(追記: )Cookie や Saved Password については、Partable Firefox でも問題なく動いてるように見える。気のせいかな?

そうそう、Portable Firefox を使ってブックマークの情報が失われた場合の対処法は、前回の記事に書いてあるので、参考にして下さい。

• ref. clmemo@aka: Browser Sync で firefox を同期させる

Bookmarklet の Favicon の問題

firefox では、ちょっとしたトリックを使うことで Bookmarklet に favicon を表示させることができる。そんで、テキスト部分をブックマークのプロパティーから削除すると、アイコンだけのブックマーク・ツールバーが完成する。

• ref. clmemo@aka: Firefox の bookmark 用 favicon に PNG/GIF 画像を使う

ところが、Google Browser Sync ではブックマークの favicon 情報までサーバーにアップしない。ブックマークなら、ブックマーク先にジャンプした時に favicon を読み込み直してくれるのだけど、bookmarklet ではそういうことはない!

結果、他の firefox でブックマークレットを取得すると、真っ白で何の説明もない favicon が並ぶことになる。

せめて bookmarklet の場合は icon 情報も一緒に保存してくれないかなぁ。

ref

• clmemo@aka: Microsoft が「お気に入り」管理サービスを開始

Yahoo! 路線検索の印刷用 bookmarklet

最近、ちょっとしたお出かけに、Yahoo! の路線検索を愛用している。きっと、皆さんもお使いのことでせう。説明は要らないよね。

• Yahoo!路線情報

さて、印刷媒体では、リンクを辿ったり、検索ウィンドウから検索をすることはできない。なので、こういったものは、出来れば印刷されないで欲しいのだけど、Yahoo! 路線検索に印刷用オプションはない。そこで、検索結果の上下にあるロゴや広告、「お役立ちボックス」、再検索用のボックスなどを非表示にする bookmarklet を書いた。

• Yahoo! 路線情報の印刷用整形 (bookmarklet)

動作確認は firefox で行なった。IE で動くかどうかはテストしてないので、動いたら (or 動かなかったら) コメント頂けると嬉しいな。コードは、かなり強引な作りになってるので、時間を見つけて Greasemonkey スクリプトにでも直すつもり。

このブックマークレットのおかげで、「広告部分だけ次ページに飛び出して、紙が無駄になる」ことが減った。GW でのお出かけに、路線検索をプリント・アウトされる方は、お一つ如何でせう。

はてなダイアリー用 coComment bookmarklet

人のブログにコメントを残す。残したコメントを管理する。そんなサービスが coComment。対応ブログが限られてて、日本の代表的なブログ (はてなダイアリー、FC2、Livedoor Blog) は軒並サポート外。そのせいか、少し盛り上がりに欠ける気がする。

coComment の記事については、下記の記事を参照にされたし。

• clmemo@aka: Comment の管理
• clmemo@aka: coComment 落ち穂拾い
• clmemo@aka: coComment ブレイクの予感 / Version 0.3d リリース

今回は、はてなダイアリーで coComment を使うという話。hatena@aka - はてなで coCommentでまとめてあるのだけど、手順を書き下してみやう:

1. コメントを書く
2. coComment bookmarklet をクリック (「コメントを削除する」ボタンか「投稿ボタン」の近くに coComment のアイコンが出る)
3. coComment アイコンをクリックして、編集ウィンドウをポップアップさせる
4. ブログのタイトル、ブログの URL、記事のタイトル、パーマリンクを入力
5. コメントを投稿

ここで面倒なのが 4. 番目の手順。Blogger などの coComment 対応ブログだと、3. & 4. 番目の手順を省けるのだけど、はてなダイアリーだとそういうわけに行かない。でも、いちいち入力しなけりゃいけないので大変。

そこで、クリボウ氏が 4. 番目の手順を簡略化するブックマークレットを作った!!

• クリボウの Blogger Tips: coComment をはてなダイアリーで使うための Bookmarklet

これを使うと、上の手順は次のようになる。

1. コメントを書く
2. coComment bookmarklet をクリック (「コメントを削除する」ボタンか「投稿ボタン」の近くに coComment のアイコンが出る)
3. coComment アイコンをクリックして、編集ウィンドウをポップアップさせる
4. クリボウ氏の bookmarklet をクリック
5. コメントを投稿

まだ、若干手間がかかるけれども、以前に比べれば随分ましになった。

coComment を使うと、過去にブログ A に残したコメントを一覧するとか、ブログ B にコメントしている coComment ユーザーは誰かとか、coComment ユーザー B 氏がよくコメントするブログはどこか、といったことまで分かるようになる。コメントで繋がる感じは、楽しくてたまらない。とにかく、はてなダイアリー・ユーザーに coComment 使ってみて欲しい。

Firefox の bookmark 用 favicon に PNG/GIF 画像を使う

やられた。ブログ・ネタを、クリボウさんに取られてしまった。しかも、ぼくの用意してた内容を上行く質で! このまま自分のネタを書かずに終わるのも勿体ないので、まずクリボウさんの方法を軽く紹介してから、ぼくのやり方を書いてみる。

やりたい事

まず、firefox でブックマーク・ツールバーのブックマークやブックマークレットに、好みの favicon を使いたいというのがあった。で、そのやり方を次の記事で紹介した。

• clmemo@aka: Firefox のブックマーク・ツールバーをファビコンでスマートに
• clmemo@aka: firefox の bookmarklet に favicon を

結果はこんな感じ:

bookmark も bookmarklet も favicon 表示でスッキリ。この方法の欠点は、favicon の用意が必要なこと。好みの favicon があればいいけど、なければ自分で作るしからない。けれど、それは手間。

そこで PNG や GIF などの画像を favicon に使おう、というのが今回の記事の目的。

例えば、上の画像で言うと、左から 3 つ目の icon (はてなブックマーク登録用の bookmarklet) には favicon じゃなくてはてなの提供してる画像

• http://b.hatena.ne.jp/images/append.gif

を使ってる。こういう事がしたいわけ。

クリボウさんの方法 (オススメ)

• クリボウの Blogger Tips: Firefox ブックマークに動く Favicon を

詳しい事はクリボウさんのページを見てもらうことにして、簡単にやり方をば。

1. 利用したい画像を firefox で開く (ex. 画像を右クリックして「画像の URL をコピー」、firefox のアドレス・バーに URL を貼り付けして RET)
2. ブックマークに登録 (メニューから「ブックマーク」>「このページをブックマーク」、作成先には「ブックマークツールバー」を選ぶ)
3. 登録したブックマークをクリック (firefox に画像を登録させるため)
4. ブックマークを右クリックして「プロパティ」を選択。URL の部分を、bookmark したいページの URL か bookmarklet の本体 (javascript コード) に置き換える。

クリボウさんの説明を引用すると

これは、Firefox で画像をブックマークすると、その画像自体が 16x16 ピクセルに縮小されて、ファビコンになるという仕組みを利用したもの。

とのこと。firefox の中だけで作業が完結する。便利。更に、登録する画像はアニメーション GIF でも構わない。

ぼくの方法

ぼくの方法は data scheme を利用する。画像 foo.gif を ICON にする方法は次の通り。

1. 画像 foo.gif をダウンロード (手元にある画像を使うなら、ダウンロードの必要なし)
2. foo.gif を base64 でエンコードして foo.txt という名前で保存。
3. firefox profile の bookmarks.html で該当するブックマーク (ブックマークレット) の ICON="" を data schme で指定 (foo.txt の内容を挿入)

base64 で foo.gif を foo.txt にエンコードする方法は、いくつかある。Linux なら、次のどれかが使えるはず。

• cat foo.gif | base64 -e > foo.txt
• cat foo.gif | openssl enc -e -base64 > foo.txt
• cat foo.gif | nkf -MB > foo.txt
• cat foo.gif | perl -MMIME::Base64 -ne 'print encode_base64($_)' > foo.txt

bookmarks.html については 「Firefox のブックマーク・ツールバーをファビコンでスマートに」を読んでもらうとして、data scheme は次のように指定する。

<a href="http://foo.com" ICON="data:image/gif;base64,foo.txt の中身を貼り付け"></a>

今回の例は GIF 画像。PNG を使う場合は、data:img/gif を data:img/png にする。

この方法でアニメーション GIF は上手くいくかな? 試してないので分からない。

こんな手間をかけてたら、もっと楽な方法があるってんだもの。ホントやられたって感じ ;)

coComment ブレイクの予感 / Version 0.3d リリース

coComment の最新版 0.3d がリリースされたとの記事があった。バージョン番号こそ 0.3c から 0.3d へと、小さな変化だけど、今回のバージョン・アップはかなり面白い!

• TeamBlog » Blog Archive » New Version Deployed (0.3d)

細かい変更は元記事を読んでもらうとして、今回のキモは二つ。

• coComment に送る情報を送信前に編集できるようになった
• 過去コメント (若しくは、bookmarklet を押し忘れたコメント) を coComment に送れるようになった

過去コメント

coComment を知る前につけたコメントも coComment で管理したい。coComment にコメントを送るつもりだったのに、bookmarklet を押し忘れちゃった。そんなことは出来ない、なんてのは過去の話。もう諦める必要はない。手順は簡単。

1. コメント部分をマウスでドラッグして反転表示
2. coComment の bookmarklet をクリック

これだけ。左のようなウィンドウがポップアップするので、記入内容が正しいか確認して OK。

この機能は、先日紹介した bookmarklet を自動実行する Greasemonkey スクリプトとは一緒に使えない。領域指定する前に bookmarklet を実行されちゃあね。でも、Greasemonkey を使っていれば、bookmarklet の問題はなくなるから、困ることはないでせう。過去コメントの追加には、firefox 右下の Greasemonkey アイコンをクリックで Greasemonkey を一時的に無効にしてページを再読込させるとよろしからう。

注: 送ったコメントは coComment のスレッドの最後に追加される。過去コメントを追加する場合、本来のコメントの順番にならない。本来のコメントの順番になるよう、改善されるといいね。

coComment の送信情報の編集

今回のバージョン・アップの目玉。coComment ブックマークレットを押すと、投稿欄の隣に という新しいアイコンが出るようになった。これをクリックすると、ブログの情報をポップアップして表示してくれる。Movable Type なページだと、ブログ名と記事タイトルが逆になることがあったけれど、これを修正できるわけですな。

そして coComment 非対応なブログで bookmarklet をクリックすると、 なアイコンが出る。そして、このアイコンをクリックすると、さっきと同じような編集画面がポップアップする。

お分かりか?

つまり、編集ウィンドウの入力の手間はあるけれど、はてなでも coComment が使えるようになった! HaloScan でも coComment が使えるようになった。ポップアップするコメント入力ウィンドウからでも coComment が使えるようになった (要 firefox 用拡張)。全てのブログを試してないけれど、ほとんどのブログで coComment が使えるようになったんじゃなからうか。

これを大きな変化と言わずして、何と言おう?

ref

• clmemo@aka: Comment の管理
• clmemo@aka: coComment 落ち穂拾い
• clmemo@aka: coComment 用 Greasemonkey
• POLAR BEAR BLOG: CoComment -- ブログのコメント管理ツール
• okanomail.com: We can track our comments using coComment.
• CLON - 2006/02/08 - coComment に対応
• this calm night. | コメントを一元管理する Web サービスがあるらしい。

firefox の bookmarklet に favicon を

firefox のブックマーク・ツールバーに置いた bookmarklet には firefox が用意したアイコン (favicon?) が付けられる。これをプロファイルの中の bookmarks.html をいじって、好みの favicon に変更する方法を以前書いた。

• clmemo@aka: Firefox のブックマーク・ツールバーをファビコンでスマートに

この方法だと、firefox を再起動しないと設定が反映されない。firefox を再起動せず、favicon を設定する方法を最速インターフェース研究会の ma.la さんが CLON の記事にコメントで書かれていたので、まとめてみる。

• ネタ元: CLON - 2006/02/08 - coComment のブックマークレットのアイコンをfaviconに

bookmarklet の favicon 設定方法

http://www.foo.com/ の favicon を使いたいとする。

1. ブックマーク・ツールバーに bookmarklet を登録
2. http://www.foo.com/ を開いて「このページをブックマーク」、保存先は「ブックマークツールバー」
3. bookmarklet を右クリックして「プロパティ」を開く
4. 「URL:」にある javascript コードをコピー
5. 2. で保存したブックマークを右クリックして「プロパティ」を開く
6. 「URL:」にある URL を削除して、4. でコピーした javascript をペースト
7. 「名前:」を bookmarklet の名称に変更
8. オリジナルの bookmarklet を削除

これでお終い。ぼくは前の記事に書いたように「名前:」を空にしてアイコンだけ表示させるようにしている。今のぼくのブックマーク・ツールバーはこんな感じ。

一番左が Gmail へのブックマーク。続けて左から順に Spurl, はてなブックマーク, Remember the milk, CalendarHub, blummy, Google Reader, coComment の bookmarklet。

ICON を消す

これも同じネタ元からだけど、次のコードを userChrome.css に追加すると。

#personal-bookmarks toolbarbutton[statustext*='MATCH'] > image {
    display: none !important;
}

URL (JavaScript) に MATCH を含む (ブックマーク・ツールバーの) ブックマーク (or bookmarklet) のアイコンが非表示になる。

ぼくはアイコンだけというのを好むけど、逆にテキストだけの方がいいという人は、こちらの Tips をどうぞ。

Firefox のブックマーク・ツールバーをファビコンでスマートに

firefox のタブで、タイトルの横についているアイコン。メニューの「ブックマーク」で、名前の横についてるアイコン。このアイコンをファビコン (favicon) というそうな。ファビコンはサイト管理者が用意しておき、ブラウザーがそのページを読み込むとタブやブックマークに表示するようになってる。

ブックマーク・ツールバー

さて、firefox には手軽にブックマークを置く場所としてブックマーク・ツールバーというのが用意されてる。ブックマーク・ツールバーには、ブッマークやブックマークレットを置く。このツールバーにもファビコンが表示される。

• clmemo@aka: ブックマーク・ツールバー |firefox|

ブックマーク・ツールバーのブックマークを右クリックして「プロパティ」を選ぶと、ブックマークの名前を編集できる事は前に書いた。ブックマーク・ツールバーの大きさは限られてるので、なるたけ短めの名前に直しておきたい所。例えば「Welcome to Gmail」より「Gmail」だけの方がスペースを取らない。

実はこの「名前」の部分、空にしてしまっても問題ない。そうするとファビコンだけが残る。Windows のクイック起動ツールバーと同じ感じで気に入ってる。

Bookmarklet の場合

ファビコンはサイトごとに用意されてるものなので、ブックマークレット用のファビコンはない。

そこで、他人のファビコンをブックマークレット用に借用する tips。

まず、使いたいファビコンを持っているサイトをブックマークに保存する。ブックマークに保存直後、ファビコンは読み込まれていないので、そのサイトをブックマークをクリックして訪ねてファビコンを firefox に読ませる。

次に firefox を終了させて、プロファイル中の bookmarks.html というファイルをエディターで開く。プロファイルの保存場所は Firefox Help: プロファイルの管理を参照されたし。

保存したブックマークを探す。例えばはてなブックマークのページを保存したら下記のようなソースが見つかるはず。

<DT><A HREF="http://b.hatena.ne.jp/at-aka/" 
ADD_DATE="1138122681" LAST_VISIT="1138122792" 
ICON="data:image/x-icon;base64,AAA..省略.."
LAST_CHARSET="UTF-8" ID="rdf:#$kceBy1">はてなブックマーク - at-akaのブックマーク</A>

ここで色の変わった ICON="..." 部分をコピーする。

bookmarks.html の中にはブックマークツールバーフォルダという項目もあって、そこにブックマークのソースが書かれている。はてなブックマークに追加するブックマークレットならこんな感じ。

<DT><A HREF="javascript:window.open('http://b.hatena.ne.jp/...省略"
 ADD_DATE="1133319223" LAST_MODIFIED="1133319232" LAST_CHARSET="UTF-8" 
 ID="rdf:#$X3NQF" HERE></A>

HERE と書かれた場所に、さっきコピーした ICON の内容をペーストする。

bookmarks.html を保存して firefox を起動すれば、bookmarklet にもファビコンがついたのが見えるはず。

この方法は、ブックマークでも有効。Google へのリンクに Yahoo! のファビコンを付けるなんてこともできる。

最後にぼくのブックマーク・ツールバーのスクリーン・ショットを。

左から、「Gmail へのブックマーク」「Spurl に追加するブックマークレット」「はてなブックマークに追加するブックマークレット」「Google Reader に登録するブックマークレット」etc...

Greasemonkey っていいね (若しくはフォント・サイズを小さくするスクリプト)

Greasemonkey を使い始めた。Greasemonkey は firefox の拡張の一つ。サイトごとに任意の JavaScript を実行させる環境だとぼくは認識してる。

例えば、clmemo@aka では先日ブログのフォント・サイズを small から medium に直した。で、今まで通り小さなフォントで表示させる読者のために bookmarklet を書いて置いたのだけど、ページを移動するたびにブックマークレットを実行する必要があって面倒臭い。もし、「http://at-aka.blogspot.com/ ではフォント・サイズを常に small にする JavaScript を実行する」ことができたら手間が省ける。

思いたったが吉日。そういう Greasemonkey スクリプトを書いてみた。

まず、

• Userscripts.org

から最新の Greasemonkey をインストールして、次のユーザー・スクリプト (Greasemonkey で動かす JavaScript のコードをそう呼ぶ) を右クリック、「Install User Script」する。

• font-size: small

コードの中身はたったの一行。

// ==UserScript==
// @name          Font Size Small
// @namespace     http://at-aka.blogspot.com/
// @description   Set font-size of body element small.
// @include       http://at-aka.blogspot.com/*
// ==/UserScript==

GM_addStyle("body { font-size: small; }");

GM_addStyle は Greasemonkey が定義する関数で、CSS を設定するためのもの。ちょっと JavaScript か CSS を勉強するだけで、任意のページの見栄えを変えることができる。Greasemonkey って面白い。

他のページでもフォント・サイズを小さくしたかったら、メニューの「ツール」から「Manage User Script」を選ぶ。インストールしたユーザー・スクリプトの一覧が表示されるので、スクリプトを選んで Include Pages に適用したいページの URL を書く。例えば http://www.foo.bar/* という感じに (* で任意の文字列を表す)。若しくは、Excluded pages にサイトを指定すると、そのサイト以外のページでユーザー・スクリプトが有効になる。

フォントを小さくするんじゃなくて、大きくしたい (Medium なフォント・サイズにしたい) なら、次のユーザー・スクリプトをお試しあれ。

• font-size: medium

ぼくが使ってるユーザー・スクリプト

ぼくが使ってる他の人のユーザー・スクリプトを二つ紹介。

マイミクシィ最新日記から外部 Blog を消す Greasemonkey 用 User Script - にぽたん研究所

mixi の最新日記一覧から、外部ブログで日記を公開している人達の日記を隠す。外部ブログを Google Reader なんかで読んでる場合に、余計な情報を見なくて済むようになるので便利。

(追記:2005-12-22) コメント欄にて、「マイミキシィ管理」から「マイミキシィ最新日記に表示させない」を選ぶことができるとの情報を頂きました。「表示」「非表示」を一人ずつ設定することができるので、かなり便利です。(takayama さん、ありがとうございます)

最速インターフェース研究会 :: del.icio.usにはてなブックマーク件数をくっつけるGreasemonkeyスクリプト

del.icio.us にはてなブックマークのブックマーク件数も表示する。del.icio.us で人気なページがはてなブックマークでほとんどブックマークされてなかったりとか、その逆もあったりとか。このスクリプトの逆バージョンもあればいいのに...

ココログ・フリー

今回、User Script を公開するに当たって、ココログ・フリーのアカウントを取って、そこにファイルを置いてみた。よさげなら、改めて記事を書きます。

フォント・サイズをノーマルにした |CSS|Blogger|

昨日、clmemo@aka のデフォールト・フォントサイズを small から normal (指定無し) にした。具体的には、CSS の次の一行を削っただけ。

body { font-size: small; }

文字が大きく表示されるようになってるかしらん。というのも、small という指定は相対指定なので、どれ位いフォント・サイズが小さくなるかはブラウザー依存だから...

手元の firefox 1.5 で確認すると、ちょっとフォントがノーマルだと大きすぎかなぁ、という印象。きっと小さなフォントに慣れてるせいだと思うことにしやう。

何で小さなフォントをやめたのか

まず、何故小さなフォントを使ったか。特に理由はなくて、一番最初に選んだブログのデザインで font-size: small が指定されてたのから踏襲しただけ。何か見た目に格好いいかなぁ、という気がした。

小さなフォントをやめようと思ったきっかけは、以下のようなサイト

• フォントサイズ指定の落とし穴
• google: フォント 小さい 読めない

を読んで、読み手に最初からフォントを小さく見せるよう要求のはやりすぎなのでは、と思ったから。例えば、普段、普通のフォントが大きく感じる人はもしかしたら自分でブラウザーのデフォールト・フォントを「小」にしているかもしれない。そこに、ぼくが小さなフォントを指定したら、「小×小」でとても小さなフォントになる。これでは、余計なおせっかいもいいところ! 逆に、普段フォントが小さいと感じてフォント・サイズを「大」にしている人には、ぼくが小さなフォント・サイズを押しつけるのは迷惑この上ない話になろう。

そんなことを考えて、本文のフォント・サイズは「ノーマル」に戻した。

font-size を small にする bookmarklet

一応、今までのフォント・サイズが好きな方々のために、font-size を「小」にする bookmarklet と「ノーマル (medium)」に戻す bookmarklet を書いた。

• font-size:small
• font-size:medium

フォントを相対指定しているページなら、どこでも使えるんじゃないかと思う。ただし、フォント・サイズを絶対指定しているサイトについては、その限りではない (;_;)

Google Reader に Feed を登録する

2005-11-28 付の Google Reader Blog の記事

• Subscribing to feeds via little Google buttons

で、Google Reader にブログを登録する方法がいくつか紹介された。Google Reader 側からの、公式な登録方法紹介ですな。

紹介されたのは

• ブログに「Add to Button」を貼る方法
• ブラウザーにブックマークレットを登録する方法

の二つ。Add to Button は、以前このブログでも紹介した。実物は右サイドバーにある。小さなボタンで、クリックすると Google Personalized Home と Google Reader への Feed 登録用ページに飛ぶというもの。ブログの作制者が用意しておくタイプ。

もう一つの bookmarklet は、ブラウザーでクリックすると Feed を探して Google Reader に登録するというもの (Google Personalized Home は未対応)。ユーザーが利用するタイプ。Google Reader 公開後から、色んな人達が登録用 bookmarklet を作っては公開して、clmemo@akaでも Kickstart my heart さんのブックマークレット へリンクを貼ったりもしてた。それが、Google Reader 公開後 2 か月を経て Google の Official 版が出たというわけ。

ブックマークレットは二種類ある。登録は Google Reader Blog からしてもらうとして、二つのブックマークレットの違いをば...

Subscribe

Feed を Google Reader に登録する。bookmarklet を実行すると、Google Reader の Feed 登録用プレビュー画面に遷移する。Feed がある場合は、一番最初に見つかった Feed を問答無用で登録する。

Show all Feeds

登録する Feed の一覧をポップアップする。複数の Feed から一つを選ぶ場合に便利。ただし、Feed の数が一つしかなくとも、Feed 一覧がポップアップする。一覧から Feed を選ぶと、Google Reader の登録用プレビュー画面に移る。注: IE6 (SP2) では、このブックマークレットは動作しない。IE 利用者は「Subscribe」ブックマークレットを使う。

雑感

ここ二三日、Google Reader に「概要のみ」の Feed の最後に ... が付くようになった。Feed が微妙な位置で切れてると続きがあるのかどうか分からなくてイヤだったけど、これで記事に続きがあるかどうか分かるようになった。

小さな変更だけど、少〜しずつ Google Reader も進化してて嬉しいね。

はてなブックマークのタグを他のサービスのタグに変える bookmarklet |Tag|

はてなブックマークのタグ一覧を Technorati のものに変えてしまう bookmarklet を 先日書いた。今日はその続き。タグを使ってるサービスは、 はてなブックマークや Technorati だけじゃないから、同じようなブックマークレットを沢山作ってみた。

各種 bookmarklet: from はてな to ...

• del.icio.us
• Technorati
• Flickr
• All はてな
• My はてな

firefox だったら、 ブックマーク・ツールバーにフォルダーが作れるので、 はてなブックマーク変換用 bookmarklet を一つに集めて入れてみてはどうだろう。

ソースコード

bookmarklet のソースを一応公開。見易いように、インデント付。

u = 'http://technorati.com/tag/';
a = document.getElementsByTagName('a');
for (i=0; i<a.length; i++){
  if(a[i].className.match(/^tag-/)){
    a[i].setAttribute('href',u+a[i].innerHTML);
  }
}

一行目の変数 u で変換後のタグへの URL を定義してる。タグを持つサービスは他にもあるから、好みの URL を指定して下さいな。

.

Flickr This! |Flickr|Bookmarklet|

Flickr に画像をアップロードするには幾つか方法があって、bookmarklet を使うのも手の一つ。bookmarklet を使うと、閲覧中のページから画像をワンクリックで Flickr にアップロードできる。

インストールは、自分の Flickr ページから [Uploading Tools] のリンクを辿って、 "Send To Flickr" Bookmarklet をクリック。bookmarklet 用のウィンドウが開くので、 firefox であれば、このリンクをドラッグしてツールバーの上でドロップするだけ。

デフォールトだと「Photostream Bookmarklet」という長〜い名前の Bookmarklet が出来る。これじゃ、ツールバーのスペースを無駄に取るので「Flickr This!」( Blogger の 「Blog This!」のパクリ) という名前にしてみた。やり方は以下の通り。

1. bookmarklet 用のウィンドウを開く
2. ページのソースを表示
3. 「Photostream Bookmarklet」とある行をコピーして、適当なファイル (foo.html) にペースト
4. 「Photostream Bookmarklet」を「Flickr This!」に書き換えて保存
5. foo.html をブラウザーで開いて、新しい bookmarklet をツールバー上にドラッグ & ドロップ

この方法は、 Flickr に限らずどの Bookmarklet でも使えると思う。