おことわり:この記事は、滅茶苦茶狭いニーズ向けに作成されています。
追記(2014/06/25):思ったよりいい働きをしてくれるので改善版を作りました。ver1.1.0
追記(2014/06/27):スクリプトがバグってたので修正。思いの外職場で役に立っている ver1.1.1
faviconの無い世界に苦しんでいる人に是非使ってもらいたい。
課題が見えてきたのでそのうちアドオン作ると思う。
経緯
僕の働く会社では腹立たしいことにサイボウズ デヂエ*1とRedmineが乱立しており、
それぞれ違う目的のデータベースなのに、コイツラは揃いも揃ってFaviconが設定されていないか、全部同じFaviconなのだ。
そんな中でも利用頻度の高いデータベースが8個12個ぐらいあるため、TabMixPlusで全部[保護]しておくのだが、
僕のタブブラウザの使い方はツリー型タブ*2で縦置きにして作業中滅茶苦茶タブを開く(30は余裕で開く)、
そして大体作業し終わったら全消しして〜という使い方を繰り返している。*3
丁度こんな感じだ。
ここから関連情報を開いているとあっという間にタブは増えますよね。
しかしそれを行うと、会社の狭いディスプレイではあっという間に縦スクロールバーを出してしまい
下のタブを閲覧中に、いつでも開きたいはずの8個のデータベースにすぐにアクセスできなくなってしまう。
そのためには常時利用するタブの省スペース化と常時一番上に表示されるピン留は非常に便利なのだが
Faviconが設定されていないと今度は8個のピンタブの内、自分の求めるタブはどれか、というおみくじ状態になってしまう
もうこんな状態におさらばしたい!とキレた。
解決策その1:IdentFavIconを使う
IdentFavIconは、簡単に言えば、Faviconの無いページにドメインを元に自動的に画像を生成して設定してしまうというもの。
紹介文を抜粋
IdentFavIconは、識別子(例えばIPアドレス)から見た目 が楽しくて簡単に認識できるアイコンを生み出すidenticonと 呼ばれているDon Parkのアイデアに基いています。
最初のうちはコレがあれば解決なのでは?と思ったけど、どうも使いはじめると随所に不便なところが出てくる。
- 複数の異なるデータベースシステムは1つのサーバに建てられている為、全部同じアイコンになる。
全部役割が違うデータベースなのに、ドメインが一緒なのでぜ〜んぶ同じアイコン。意味ない。 - 32x32で幾何学模様を作られても似たり寄ったりに見える+何故か色が地味なものばかりになって視認性が悪い。
これは思いの外見難くて本当に困った。
ダウンロードはこちら↓
https://addons.mozilla.org/ja/firefox/addon/identfavicon/
解決策その2:HashColouredTabs+を使う
HashColouredTabs+は簡単に言えば、
「サイトアイコン」を持たないあらゆるサイトに小さい色アイコンを提供してタブの識別を良くします。
正に求めるものである。
しかし導入してみたところ、タブに小さい色アイコンがつかず、
Faviconのあるサイトまで全てFaviconが消されてしまうという自体に…。
ユーザーレビューを見ると、ツリー型タブではうまく動作しないようだ。
アップデートを期待しようかな、と思ったが2011年の更新からこれまで更新が無い為、とてもではないが期待できない。
0.4.28 is not compatible with treestyletabs :(
ダウンロードはこちら↓
https://addons.mozilla.org/ja/firefox/addon/hashcolouredtabs-4279/
最終案:GreaseMonkeyのユーザスクリプトで実現する
使い方
- GreaseMonkeyをインストール
ここから→Greasemonkey – Get this Extension for 🦊 Firefox (ja) - スクリプトをダウンロード→Dropbox - v1.1.1 - Simplify your life
- スクリプトの中を編集
自分で色指定をしないといけない。
追記:2014/06/25
必要に応じてキチンと@includeを書かないと、競合したりして面倒なことになります。
v.1.1.0でちゃんと@includeのexampleURLを追加しておきました。
説明
マルチ(1つのスクリプトで複数サイト設定できる)
2014/06/25:ver1.1.0に更新
2014/06/27:ver1.1.1に更新
Base64エンコード画像を設定するときにはGoogle画像検索が便利。
Google画像検索のサムネイル一覧はBase64エンコードされた画像が表示されている
// ==UserScript== // @name LocalFaviconSet // @namespace http://d.hatena.ne.jp/rizenback000/20140623#1403547923 // @include http://example.com/* // @exclude http://example.com/* // @version 1.1.0 // @grant none // ==/UserScript== (function(d, func) { var check = function() { if (typeof unsafeWindow.jQuery == 'undefined') return false; func(unsafeWindow.jQuery); return true; } if (check()) return; var s = d.createElement('script'); s.type = 'text/javascript'; s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'; d.getElementsByTagName('head')[0].appendChild(s); (function() { if (check()) return; setTimeout(arguments.callee, 100); })(); })(document, function($) { $("body").append(""); var canvas = document.getElementById("LocalFavicon"); var ctx = canvas.getContext("2d"); /* ============= ↓ここで設定 URL正規表現,Base64画像 → data:image/〜;base64,〜 で指定 URL正規表現,背景色[,描画文字,文字色,フォント,フォントサイズ] ⇒デフォルトでは、なし[,なし,黒,Arial,32px] 括弧内はオプションなので、色塗りつぶしだけでいいなら1つの色指定だけでOK 例: ["unt.bob.buttobi.net","rgb(0,255,0)"], ["d.hatena.ne.jp\/rizenback000","#000000","u/n","#ffffff","'Times new roman'", "32px"], ["www.hatena.ne.jp", "data:image/jpeg;base64,省略"] 文字指定はアイコンサイズになるので出来るだけ1文字が望ましい Base64画像はGoogleの画像検索の一覧が便利 ==============*/ var pattern = new Array( ["http://example.com/*/aaa","rgb(0,255,0)"], ["http://example.com/*/bbb","#000000","u/n","#ffffff","'Times new roman'", "32px"], ["http://example.com/*/ccc", "data:image/jpeg;base64,/省略"] ); //大文字・小文字を無視するなら i var match_flg="i"; for(var i=0;i"); } });
追記:2014/06/25
ページに強制的に favicon をつける Greasemonkey スクリプト : 自作自演
こちらはBase64画像を表示するタイプ。
僕はいちいち画像を引っ張ってきたくなかったのでコレ。