#untitled note

私的な考えとかメモ、その他トラブルシュート

Faviconを無理やり設定するGreaseMonkeyスクリプト


おことわり:この記事は、滅茶苦茶狭いニーズ向けに作成されています。


追記(2014/06/25):思ったよりいい働きをしてくれるので改善版を作りました。ver1.1.0

追記(2014/06/27):スクリプトがバグってたので修正。思いの外職場で役に立っている ver1.1.1

faviconの無い世界に苦しんでいる人に是非使ってもらいたい。
課題が見えてきたのでそのうちアドオン作ると思う。




経緯

僕の働く会社では腹立たしいことにサイボウズ デヂエ*1Redmineが乱立しており、
それぞれ違う目的のデータベースなのに、コイツラは揃いも揃ってFaviconが設定されていないか、全部同じFaviconなのだ。

そんな中でも利用頻度の高いデータベースが8個12個ぐらいあるため、TabMixPlusで全部[保護]しておくのだが、
僕のタブブラウザの使い方はツリー型タブ*2で縦置きにして作業中滅茶苦茶タブを開く(30は余裕で開く)、
そして大体作業し終わったら全消しして〜という使い方を繰り返している。*3

丁度こんな感じだ。
ここから関連情報を開いているとあっという間にタブは増えますよね。


しかしそれを行うと、会社の狭いディスプレイではあっという間に縦スクロールバーを出してしまい
下のタブを閲覧中に、いつでも開きたいはずの8個のデータベースにすぐにアクセスできなくなってしまう。
そのためには常時利用するタブの省スペース化と常時一番上に表示されるピン留は非常に便利なのだが
Faviconが設定されていないと今度は8個のピンタブの内、自分の求めるタブはどれか、というおみくじ状態になってしまう

もうこんな状態におさらばしたい!とキレた。

解決策その1:IdentFavIconを使う

IdentFavIconは、簡単に言えば、Faviconの無いページにドメインを元に自動的に画像を生成して設定してしまうというもの。
紹介文を抜粋

IdentFavIconは、識別子(例えばIPアドレス)から見た目
が楽しくて簡単に認識できるアイコンを生み出すidenticonと
呼ばれているDon Parkのアイデアに基いています。

最初のうちはコレがあれば解決なのでは?と思ったけど、どうも使いはじめると随所に不便なところが出てくる。

  • 複数の異なるデータベースシステムは1つのサーバに建てられている為、全部同じアイコンになる。
    全部役割が違うデータベースなのに、ドメインが一緒なのでぜ〜んぶ同じアイコン。意味ない。
  • 32x32で幾何学模様を作られても似たり寄ったりに見える+何故か色が地味なものばかりになって視認性が悪い。
    これは思いの外見難くて本当に困った。

ダウンロードはこちら↓
IdentFavIcon :: Add-ons for Firefox

解決策その2:HashColouredTabs+を使う

HashColouredTabs+は簡単に言えば、

「サイトアイコン」を持たないあらゆるサイトに小さい色アイコンを提供してタブの識別を良くします。

正に求めるものである。

しかし導入してみたところ、タブに小さい色アイコンがつかず、
Faviconのあるサイトまで全てFaviconが消されてしまうという自体に…。

ユーザーレビューを見ると、ツリー型タブではうまく動作しないようだ。
アップデートを期待しようかな、と思ったが2011年の更新からこれまで更新が無い為、とてもではないが期待できない。

0.4.28 is not compatible with treestyletabs :(


ダウンロードはこちら↓
HashColouredTabs+ :: Add-ons for Firefox

最終案:GreaseMonkeyのユーザスクリプトで実現する

求めるアドオンがどこにもない。Faviconの箇所にただ色を付けるぐらいの機能で良いのに…。
今までがそうだったように、ググっても解決しないものは自分で作ったり調べたりするしか無いのだ。*4
でもアドオンなんて作ってられない。そもそも知識がない。*5

たまにシステムページの何かと競合して元使えた機能が使えなくなったりするので、
ユーザスクリプトも基本的には使わないのだけれど、
StylishのユーザーCSSで無理やり実現出来ないか?ちょっと無理そうだし、URLの一致表現に幅がない。

ということで、グリモンで考えたら存外に簡単だった。

使い方

  1. GreaseMonkeyをインストール
    ここから→Greasemonkey :: Add-ons for Firefox
  2. スクリプトをダウンロード→Dropbox - v1.1.1
  3. スクリプトの中を編集
※このスクリプトは例え同じドメインでも別々のFaviconを設定できることを目的としている為
 自分で色指定をしないといけない。


追記:2014/06/25
マルチのスクリプトの方は、デフォルトでは全てのサイトで有効になるようになっているので、
必要に応じてキチンと@includeを書かないと、競合したりして面倒なことになります。

v.1.1.0でちゃんと@includeのexampleURLを追加しておきました。

説明

Canvasを非表示状態で作って、Canvasに描画して、CanvasへのURLをFaviconに設定している。
やろうと思えばCanvasに適当な図形を描画してやることもできる。

正直このスクリプトをそのまま使うというよりは、こういう方法もありまっせ。
というだけのものです。
そもそもググってもちっとも出てこないので、多分本当に需要が無いんだと思う。

ユーザースクリプトのことは詳しくないので、==UserScript==の部分は本当に適当。
jqeuryを利用できるようにしてるコードはどっかから拾ってきたもの。

というオレオレコードなので、細かいツッコミは勘弁してぇ…。

シングル(1スクリプト1サイトしか使えない)

2014/06/25:シングルいらないと思ったのでコレは削除します。
ダウンロード


マルチ(1つのスクリプトで複数サイト設定できる)

2014/06/25:ver1.1.0に更新
2014/06/27:ver1.1.1に更新

  • 文字を指定して文字つきのアイコンが設定できるように変更
  • Base64エンコードされた画像を設定できるように変更

Base64エンコード画像を設定するときにはGoogle画像検索が便利。
Google画像検索のサムネイル一覧はBase64エンコードされた画像が表示されている


ダウンロード(v1.1.0)

// ==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 スクリプトで検索したら 全く同じ考えを持った方がいらっしゃったのでご紹介。

ページに強制的に favicon をつける Greasemonkey スクリプト : 自作自演

こちらはBase64画像を表示するタイプ。
僕はいちいち画像を引っ張ってきたくなかったのでコレ。

*1:Webデータベースシステム

*2:製作者本当にありがとう

*3:一般的な使い方だと思っているが、中にはそんな使い方しないという方は社内にも結構居た。

*4:大抵こういう時はブチギレ状態

*5:これを機会に作ってもいいけど