Numb.

Avatar

Just another WordPress weblog

Gmail2.0 対応版の「Gmail - display keyboard shortcuts」

gmail はショートカットが指定されていて、覚えてしまえばキーボードで操作できて便利です。ですがショートカットキーって覚えるまでは毎回「どうだっけ・・」と確認したり、ちょっと使わないとすぐ忘れてしまったりしませんか!?

そんな私のような人に便利なのが、Firefox の add-on 「stylish (or Greasemonkey)」で利用できる「Gmail - display keyboard shortcuts」というもの。gmail のショートカットキーを表示してくれるユーザースタイルです。本当に凄く便利で使わせてもらっていたのですが、Gmail2.0 になってからショートカットキーが表示されなくなってしまいました。

しばらくそのまま使っていたのですが、ふと内容をみたら結構簡単に表示させるようにできそうだったので手を加えてみました。

以下、私が手を加えた Gmail2.0 対応版の「Gmail - display keyboard shortcuts」です。stylish のコードに下の内容を登録することで利用できます。

CSS:
  1. @namespace url(http://www.w3.org/1999/xhtml);
  2.  
  3. @-moz-document domain("mail.google.com") {
  4. span.zD5BAe[id="1fbe"]::after,
  5. span.zD5BAe[id=":r3"]::after,
  6. #comp::after{
  7. content:"(c)";
  8. }
  9. span.zD5BAe[title^="Inbox"]::after,
  10. span#ds_inbox::after,
  11. div.yyT6sf[id=":r2"]::after,
  12. button#ac_ib::after{
  13. content:"(g i)";
  14. }
  15. span.zD5BAe[title^="Starred"]::after,
  16. div.yyT6sf[id=":r0"]::after,
  17. span#ds_starred::after{
  18. content:"(g s)";
  19. }
  20. span.zD5BAe[title^="Sent Mail"]::after,
  21. div.yyT6sf[id=":qw"]::after{
  22. content:"(g t)";
  23. }
  24. span.zD5BAe[title^="Drafts"]::after,
  25. div.yyT6sf[id=":qu"]::after,
  26. span#ds_drafts::after{
  27. content:"(g d)";
  28. }
  29. span.zD5BAe[title^="All Mail"]::after,
  30. div.yyT6sf[id=":qs"]::after,
  31. span#ds_all::after{
  32. content:"(g a)";
  33. }
  34. span.zD5BAe[id="1fbc"]::after,
  35. span.zD5BAe[id=":q5"]::after,
  36. span#cont::after{
  37. content:"(g c)";
  38. }
  39. div.A5liqb[act="19"]::after,
  40. div.vwcZUe[act="19"]::after,
  41. b#bk::after{
  42. content:"(u)";
  43. }
  44. button.BuNwUe[act="7"]::after,
  45. button.Gjckbb[act="7"]::after,
  46. button[id^="ac_rc"]::after{
  47. content:"(y)";
  48. }
  49. button.BuNwUe[act="9"]::after,
  50. button.Gjckbb[act="9"]::after,
  51. button#ac_sp::after{
  52. content:"(!)";
  53. }
  54. button.BuNwUe[act="10"]::after,
  55. button.Gjckbb[act="10"]::after,
  56. button#ac_tr::after{
  57. content:"(#)";
  58. }
  59. div.SvrlRe::after,
  60. div.cKWzSc span.qZkfSe::after,
  61. td#sm_2::after{
  62. content:"(r)";
  63. }
  64. div.K98VUe span.qZkfSe::after,
  65. span#r_3::after{
  66. content:"(a)";
  67. }
  68. div.XymfBd span.qZkfSe::after,
  69. span#r_4::after,
  70. td#sm_4::after{
  71. content:"(f)";
  72. }
  73. span#pt::after{
  74. content:"(k)";
  75. }
  76. span#nt::after{
  77. content:"(j)";
  78. }
  79. div.c1I77d button[id] b::after,
  80. button[id="1evq"]::after,
  81. button#snd::after{
  82. content:"(Tab-Enter)";
  83. }
  84. div.c1I77d button[style]::after,
  85. button#d::after{
  86. content:"(Ctrl+s)";
  87. }
  88. span[selector="all"]::after{
  89. content:"(* a)";
  90. }
  91. span[selector="none"]::after{
  92. content:"(* n)";
  93. }
  94. span[selector="read"]::after{
  95. content:"(* r)";
  96. }
  97. span[selector="unread"]::after{
  98. content:"(* u)";
  99. }
  100. span[selector="starred"]::after{
  101. content:"(* s)";
  102. }
  103. span[selector="unstarred"]::after{
  104. /* content:""; */
  105. }
  106.  
  107. }

少し表示の違いはありますが、とりあえず使えるようになってはいます。

Firefox3 で使用している add-on

なんとなく、Firefox3 で利用している add-on を纏めてみます。
長くなるので、以下全文表示で。
[Read more]

Make Link

Firefox の CopyURL+ に似た add-on 、Make Link を試しています。

CopyURL+ よりカスタマイズは楽で使いやすいです。
しかしたまに気づくと、カスタマイズしたデータがすっ飛んでいるという…。

調べてみたら以前は add-on がバージョンアップした際にカスタマイズデータが消える仕様だったようです。今もそういう理由なのかは分からないものの、カスタマイズしたら内容をメモしておいたほうが良さそうです。

そんなわけでメモ。

CODE:
  1. <div class="quote">
  2. <blockquote title="%title%">%text_br%</blockquote>
  3. <p><cite>『<a href="%url%">%title%</a> より引用』</cite></p>
  4. </div>

Make Link :: Firefox Add-ons

stylish 設定メモ

Firefox 拡張の、Stylish 用 CSS。
自分用メモ。

[Read more]

Firefox + keyconfig で bookmarklet をショートカット登録

以前から CSS ON⇔OFF bookmarklet を keyconfig という add-on を使い、ショートカットに登録しています。CSS ON⇔OFF がワンキーでさくさく切り替えられ、これが凄く便利。

すごーく便利なのですが、OS を入れ直したり、Firefox を入れ直したときにいつも忘れてしまうので自分のためにメモ。

[Read more]

Firefoxの不要メニューを userChrome.css で隠す

今までは MenuEditor という add-on を使って不要メニューを非表示にしていたのですが、
PC を変えたついでに Firefox をダイエットさせようかなと userChrome.css で隠す方法に変えてみました。

参考にしたのは以下のサイトです。

userChrome.css に直接書いてももちろん OK ですが、
Stylish を使っているならグローバルスタイルの css として保存しておくのも手軽です。
私は Stylish に「Menu Editor - css」という感じの名前で以下の内容を設定しました。

長いので以下、全文表示ページで。
[Read more]

Firebug のショートカットをマウスサイドボタンに割り当てる

Firefox を使っていて Web 制作をしている方に人気の add-on、Firebug
javascript 方向にも秀でているらしいのですが、私はもっぱら css チェックや xhtml の構造チェックに使ってます。

Inspect を押して画面内の調べたい場所をクリックすると、そのクリックした場所の xhtml 該当部分がすぐ見れて、
その部分にかかっている css も一覧ですぐ見れる!
その上、その css や xhtml の値や数字も変更して見た目がどう変わるかもすぐ確認できちゃったり。
仕事中は使用頻度が凄く高く、コレがあるおかげで大分作業時間も短縮できて助かってます。

表示が意図したものにならなかったり、崩れてしまったり、後から一部分変更したい時などに大活躍。
何度も何度も Inspect を押すので、最初は Firefox のツールバーに Inspect (眼鏡のアイコンのもの)を置いていました。
けど、本当に回数が多いのでそれすら面倒なくらいになってきまして、最近はマウスにショートカットを割り当てています。

Firebug のショートカット一覧
Firebug Keyboard Shortcuts

よく使うのは、以下の 3 つ。

  • Open Firebug Panel : F12
  • Close Firebug Panel : F12
  • Toggle Inspect Mode : Ctrl+Shift+C (Mac なら ⌘+Shift+C)

サイドボタンが 2 つあるマウスなので、サイドボタン 1 に F12、サイドボタン 2 に Ctrl+Shift+C を割り当てています。
これが思っていたよりずっと快適だったので、オススメしてみます。

Photoshop で画像の切り出しをしたり、コーディングをしたりとアレコレ移動して見ている場合、左手はキーボード右手はマウスが多いです。
なので F12 はちょっと押しにくいですし(右手をマウスから離す必要があるため)、
かといって Firefox のツールバーに何度も何度もマウスを移動させるのも結構面倒で大変です。

Inspect を押したり、F12 を押すのも数回なら別に良いですが、作業中下手をすれば数百回行う作業なので塵も積もれば山となるということで…
マウスのサイドボタン一発にしてしまうことでかなり楽になりました。

Firebug のショートカットを割り当てたことでマウスサイドボタンで「前のページに戻る」「次のページへ進む」などができなくなりましたが、
マウスジェスチャーかキーボードショートカットでページ移動系は行っています。
ページ制作中は、その作っているページを開いたままにしておき「Inspect を使って問題点を確認→修正→リロード」、
という作業を繰り返することが多く、ページ移動はあまりしません。
ですのでジェスチャーやキーボードショートカットでページ移動するのに不便は感じていません。

Web 制作で同じような作業をよくする方は、マウスボタン割り当てオススメですよ~ :mrgreen:

YSlow for Firebug が熱い

YSlow for Firebug というものが、
Yahoo! Developer Network からリリースされたようです。

これは Firefox + Firebug の環境に追加して使える add-on で、
ページの表示速度に関する様々なポイントの対策度具合によってランクを付け、改善するためのポイントをあげてくれるというもの。

YSlow を入れると、Firebug に YSlow の項目が追加されます。当然 Firebug が入っていないと動きませんので注意。

表示速度の計測をしてくれる add-on 等は今までもありましたが、
YSlow は具体的に「では、どこを改善すれば読み込みが早くなるのか?」を表示してくれる点が使いやすい。
使い慣れた Firebug に一体化するというのも、私にとっては分かりやすかったです。

私も調べてみましたが、かなり多くの改善ポイントが出てしまいました。
全てを A にすることは難しそうですが、出来るところは改善していきたいなと思います。

ちなみに、ソースはこちらです。

アドオンをインストールして任意のページを開くと、Firebugのメニューの中にYSlowが追加される。Performanceのタブには、パフォーマンスの点数(下記では「C(71)」)と、13の項目のそれぞれについてパフォーマンス対策がされているかどうかを、A~Fのグレードで表示してくれる。


秋元@サイボウズラボ・プログラマー・ブログ: YSlow for Firebug ページのチューニングを助言してくれるFirefoxアドオン

』より引用

検索履歴が残らない原因

Firefox2.0 にしたころからだと思うのですが、Firefox デフォルトのサーチボックスで検索した際に検索履歴が残らなくなってしまっていました。「なぜだろう、おかしいなあ」とずっと思っていたのですが、やっと原因が分かりました。

私は Tab Mix Plus という拡張を入れているのですが、どうもそのセッション復元機能のせいだったようです。Tab Mix Plus のセッション機能を使わなければ、検索履歴がちゃんと残りました。

[Read more]

Textarea などをリサイズする

Textarea が固定サイズで(しかも小さい場合)、リサイズして大きくできたら文章が見やすくていいのにと思うことがあります。色々リサイズする手段があるようなので、纏めておきます。

Firefox 拡張と、bookmarklet、Greasemonkey の 3 つです。

[Read more]

Next,