10 月 12, 2008
Category : Firefox | WebService
/ Tags : add-on | CSS | Firefox
gmail はショートカットが指定されていて、覚えてしまえばキーボードで操作できて便利です。ですがショートカットキーって覚えるまでは毎回「どうだっけ・・」と確認したり、ちょっと使わないとすぐ忘れてしまったりしませんか！？
そんな私のような人に便利なのが、Firefox の add-on 「stylish （or Greasemonkey）」で利用できる「Gmail - display keyboard shortcuts」というもの。gmail のショートカットキーを表示してくれるユーザースタイルです。本当に凄く便利で使わせてもらっていたのですが、Gmail2.0 になってからショートカットキーが表示されなくなってしまいました。
しばらくそのまま使っていたのですが、ふと内容をみたら結構簡単に表示させるようにできそうだったので手を加えてみました。
以下、私が手を加えた Gmail2.0 対応版の「Gmail - display keyboard shortcuts」です。stylish のコードに下の内容を登録することで利用できます。
CSS:
-
@namespace url(http://www.w3.org/1999/xhtml);
-
-
@-moz-document domain("mail.google.com") {
-
span.zD5BAe[id="1fbe"]::after,
-
span.zD5BAe[id=":r3"]::after,
-
#comp::after{
-
content:"(c)";
-
}
-
span.zD5BAe[title^="Inbox"]::after,
-
span#ds_inbox::after,
-
div.yyT6sf[id=":r2"]::after,
-
button#ac_ib::after{
-
content:"(g i)";
-
}
-
span.zD5BAe[title^="Starred"]::after,
-
div.yyT6sf[id=":r0"]::after,
-
span#ds_starred::after{
-
content:"(g s)";
-
}
-
span.zD5BAe[title^="Sent Mail"]::after,
-
div.yyT6sf[id=":qw"]::after{
-
content:"(g t)";
-
}
-
span.zD5BAe[title^="Drafts"]::after,
-
div.yyT6sf[id=":qu"]::after,
-
span#ds_drafts::after{
-
content:"(g d)";
-
}
-
span.zD5BAe[title^="All Mail"]::after,
-
div.yyT6sf[id=":qs"]::after,
-
span#ds_all::after{
-
content:"(g a)";
-
}
-
span.zD5BAe[id="1fbc"]::after,
-
span.zD5BAe[id=":q5"]::after,
-
span#cont::after{
-
content:"(g c)";
-
}
-
div.A5liqb[act="19"]::after,
-
div.vwcZUe[act="19"]::after,
-
b#bk::after{
-
content:"(u)";
-
}
-
button.BuNwUe[act="7"]::after,
-
button.Gjckbb[act="7"]::after,
-
button[id^="ac_rc"]::after{
-
content:"(y)";
-
}
-
button.BuNwUe[act="9"]::after,
-
button.Gjckbb[act="9"]::after,
-
button#ac_sp::after{
-
content:"(!)";
-
}
-
button.BuNwUe[act="10"]::after,
-
button.Gjckbb[act="10"]::after,
-
button#ac_tr::after{
-
content:"(#)";
-
}
-
div.SvrlRe::after,
-
div.cKWzSc span.qZkfSe::after,
-
td#sm_2::after{
-
content:"(r)";
-
}
-
div.K98VUe span.qZkfSe::after,
-
span#r_3::after{
-
content:"(a)";
-
}
-
div.XymfBd span.qZkfSe::after,
-
span#r_4::after,
-
td#sm_4::after{
-
content:"(f)";
-
}
-
span#pt::after{
-
content:"(k)";
-
}
-
span#nt::after{
-
content:"(j)";
-
}
-
div.c1I77d button[id] b::after,
-
button[id="1evq"]::after,
-
button#snd::after{
-
content:"(Tab-Enter)";
-
}
-
div.c1I77d button[style]::after,
-
button#d::after{
-
content:"(Ctrl+s)";
-
}
-
span[selector="all"]::after{
-
content:"(* a)";
-
}
-
span[selector="none"]::after{
-
content:"(* n)";
-
}
-
span[selector="read"]::after{
-
content:"(* r)";
-
}
-
span[selector="unread"]::after{
-
content:"(* u)";
-
}
-
span[selector="starred"]::after{
-
content:"(* s)";
-
}
-
span[selector="unstarred"]::after{
-
/* content:""; */
-
}
-
-
}
少し表示の違いはありますが、とりあえず使えるようになってはいます。
8 月 5, 2008
Category : Firefox
/ Tags : add-on | Firefox
なんとなく、Firefox3 で利用している add-on を纏めてみます。
長くなるので、以下全文表示で。
[Read more]
7 月 29, 2008
Category : Firefox
/ Tags : add-on | Firefox
Firefox の CopyURL+ に似た add-on 、Make Link を試しています。
CopyURL+ よりカスタマイズは楽で使いやすいです。
しかしたまに気づくと、カスタマイズしたデータがすっ飛んでいるという…。
調べてみたら以前は add-on がバージョンアップした際にカスタマイズデータが消える仕様だったようです。今もそういう理由なのかは分からないものの、カスタマイズしたら内容をメモしておいたほうが良さそうです。
そんなわけでメモ。
CODE:
-
<div class="quote">
-
<blockquote title="%title%">%text_br%</blockquote>
-
<p><cite>『<a href="%url%">%title%</a> より引用』</cite></p>
-
</div>
Make Link :: Firefox Add-ons
6 月 23, 2008
Category : Firefox
/ Tags : add-on | CSS | Firefox
Firefox 拡張の、Stylish 用 CSS。
自分用メモ。
[Read more]
2 月 13, 2008
Category : Firefox
/ Tags : add-on | Bookmarklet | Firefox
以前から CSS ON⇔OFF bookmarklet を keyconfig という add-on を使い、ショートカットに登録しています。CSS ON⇔OFF がワンキーでさくさく切り替えられ、これが凄く便利。
すごーく便利なのですが、OS を入れ直したり、Firefox を入れ直したときにいつも忘れてしまうので自分のためにメモ。
[Read more]
8 月 19, 2007
Category : Firefox
/ Tags : CSS | Customize | Firefox
今までは MenuEditor という add-on を使って不要メニューを非表示にしていたのですが、
PC を変えたついでに Firefox をダイエットさせようかなと userChrome.css で隠す方法に変えてみました。
参考にしたのは以下のサイトです。
userChrome.css に直接書いてももちろん OK ですが、
Stylish を使っているならグローバルスタイルの css として保存しておくのも手軽です。
私は Stylish に「Menu Editor - css」という感じの名前で以下の内容を設定しました。
長いので以下、全文表示ページで。
[Read more]
8 月 1, 2007
Category : Firefox | WebCreate
/ Tags : Firefox | WebCreate | マウス
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 制作で同じような作業をよくする方は、マウスボタン割り当てオススメですよ～ 
7 月 27, 2007
Category : Firefox | WebCreate
/ Tags : add-on | Firefox | WebCreate
YSlow for Firebug というものが、
Yahoo! Developer Network からリリースされたようです。
これは Firefox + Firebug の環境に追加して使える add-on で、
ページの表示速度に関する様々なポイントの対策度具合によってランクを付け、改善するためのポイントをあげてくれるというもの。
YSlow を入れると、Firebug に YSlow の項目が追加されます。当然 Firebug が入っていないと動きませんので注意。
表示速度の計測をしてくれる add-on 等は今までもありましたが、
YSlow は具体的に「では、どこを改善すれば読み込みが早くなるのか？」を表示してくれる点が使いやすい。
使い慣れた Firebug に一体化するというのも、私にとっては分かりやすかったです。
私も調べてみましたが、かなり多くの改善ポイントが出てしまいました。
全てを A にすることは難しそうですが、出来るところは改善していきたいなと思います。
ちなみに、ソースはこちらです。
7 月 15, 2007
Category : WebCreate | WordPress
/ Tags : Firefox | WebCreate | WordPress | WP-plugin
先日新規ウィンドウを開く手段を Valid と両立させる考察という記事で
- リンクを新しいウィンドウで開くかどうかはユーザーに選択してもらうのが良いのでは
- でも両方のリンクを書いていくのは手間がかかる、ソースも長くなる
- せめて、手間を減らすために「Firefox」+「CopyURL+」で一発リンク制作をしてみるのはどうだろう
という内容を書きましたが、その後「javascript を使いリンクに新規ウィンドウを開くたアイコンを自動追加する」という方法を公開している方を発見しまして。これが本当にすごい！
新しいウインドウを開くべき？ - LogJET
1 回設定してしまえば記事を書くときには手間いらず、しかもリンクを 2 回書かなくて良いのでソースも長くならず、本当に素敵です。
あまりに素敵だったので他の方々にも手軽に利用してもらえればいいなと思い、Fsiki さんに許可をいただき WordPress のプラグインにさせていただきました！
有用な javascript を公開し、プラグイン化することを承諾してくださった Fsiki さんに感謝いたします 
[Read more]
6 月 10, 2007
Category : WebCreate
/ Tags : Firefox | HTML | JavaScript | WebCreate
以前に書いた
Numb. - _blank を使わない新規ウィンドウの開き方
の続きにあたる記事です。一応、もう一度おさらいしてみます。
06/13 追記：
大事な部分を丸ごと書き忘れていることに気付きました orz
javascript 関連の部分を追記いたしました。
新規ウィンドウを開かせる手段を実装したい、という場合は以下の 2 種類が有名だと思います。
- a に target="_blank" を指定する
- javascript で設定する
しかし「ウィンドウを新たに開くかどうか」はユーザーが決めるべきことなので、作り手が決め手はいけない、という話もあります。
そのためか、XHTML 1.1 や XHTML Basic では target="_blank" という書き方は準拠していない、とされ NG になってしまいます。
「マークアップ言語である HTML で、ウィンドウ操作をする」という点も問題なのだと思います。マークアップ目的以外になるので。
でもユーザーの中にも新規ウィンドウを開く手段を実装しておいて欲しいという人もいます。
いやいや余計なお世話だから、こっちに決めさせてくれ、そんなことは実装しておかないでくれ、という人もいます。
実装して欲しい・欲しくない、という人が両方いる…ということで、じゃあ両方のリンクを制作しておけばいいんじゃ！と思いまして。今回はそんな方向でやってみました。
[Read more]
最近のコメント