ラベル Firefox 3 の投稿を表示しています。 すべての投稿を表示
ラベル Firefox 3 の投稿を表示しています。 すべての投稿を表示

2011年3月9日水曜日

Google マップに登録した地点間のルートを検索する - マイマップの活用

1. 登録地点間のルートを知りたい

旅行へ行く前、Google マップで下調べをし、マイマップを作成する。

マイマップは行きたい場所を一覧するのには便利。しかし、

「地図に保存してある 2 つの地点をどうやって移動するか?」

についてルート検索する方法がちょっと面倒。

 

2. ルート検索の手順

手順の概略

ルートを検索するには、マイマップを開いた後、次の手順で行う。

  1. 出発地の設定: スタート地点のアイコンを右クリックして、「ここからのルート」を選択。
  2. ブラウザの戻るボタンを押す。
  3. 目的地の設定: 目的地で左クリック して、吹き出しに表示された「ルート」を選択。
  4. 検索ボタンを押す。

※ 登録した地点間を正確に検索する必要がなければ、以下を参照。

 

3. ルート検索の具体例

例えば、「東京タワー」から「東京スカイツリー」へ移動したい場合。


より大きな地図で 地点間のルートを検索 を表示

 

a. 出発地点の設定

予め作成したマイマップを開き、「東京タワー」の場所を示すアイコンを右クリック

ここからのルート」を選択する。

CropperCapture[103][5]

これにより、「ルート・乗換案内」の A 地点に「東京タワー」の場所が入力された状態になる。

CropperCapture[98]

 

b. 戻る

次にブラウザの「戻る」ボタンを押して、マイマップに戻る。

CropperCapture[99]

 

c. 目的地の設定

マイマップで目的地である「東京スカイツリー」を選択。

表示さた吹き出しの左下にある「ルート」のリンクを左クリックする。

CropperCapture[100]

これにより、「ルート・乗換案内」の B 地点に目的地である「東京スカイツリー」が入力された状態になる。

CropperCapture[101]

 

d. 検索結果

「検索」ボタンを押すと、ルートが表示される。

CropperCapture[102]

 

4. ルート検索の結果を示す URL を取得する

「車で行く」のアイコンをクリックした場合は、マイマップに経路を保存できる。

しかし、電車の場合はできない。

更新(2013/01/14): 探した経路を表示するためのリンクが必要な場合は、ルート検索をした後、「リンク」ボタンをクリックして URL を表示しコピーする。

SnapCrab_NoName_2013-1-14_16-21-26_No-00

 

リンク付きテキストの作成

「経路を表示する URL」と「タイトル」を取得したい場合、Firefox のアドオン Make Link を使えば簡単に行える。

次の手順を踏む。

  1. 上記のリンクをブラウザのロケーションバーに入力し、Enter キーを押す。
  2. 経路が再表示されたら、Make Link で URL とタイトルを取得する。

これにより、以下のようなリンク付きのテキストを作成できる。。

2010年8月22日日曜日

Ubiquity で不正な IP を調べる

以下のサイトでは、不正な IP がデータベース化されている。

DroneBL

DroneBL is a realtime monitor of abusable IPs, which has the goal of stopping abuse of infected machines.

EFnet RBL

The EFnet IRC Network RBL is comprised of a collection of data from several sources with the purpose of providing a "one stop shop" for IRC admins to block a multitude of undesirable clients.

Ubiquity でこれらのデータベースに IP アドレスを問い合わせ、何れかに登録されているかどうか調べたい。

インストールはこちらから。

使い方 : IP アドレスをブラウザ上で選択してから checkIP コマンドを実行。いづれかのデータベースに登録されている場合は true、そうでなければ false がプレビューに表示される。

 

ソースコードについて

上記二つのデータベースの問い合わせでは、単純にサイトの URL と IP を組み合わせてアクセスすると結果が HTML で返される。その中に含まれる文字列をチェックすることにより登録状態をチェック。

新たにデータベースを増やしたい場合は、問い合わせ先の URL と、問い合わせの結果が返されたら IP が存在することをチェックする述語 existp を記述して、dbSet に追加する。

CmdUtils.CreateCommand({
    names: ["checkIP"],
    preview: function preview(pblock, args){
        // プレビューをクリア
        pblock.innerHTML = "";
        
        /**
        * DB は IP を検索するサイト。
        *
        * {spec.url サイトの URL,
        * spec.existp サイトでの検索結果から、対象がサイトに存在するか判定する述語}
        *
        * @param {Object} spec
        */
        var db = function(spec){
            var that = {};
            
            // public --------------------------------------------
            
            /**
            * 与えられた IP が存在することを確認し、その結果に対して関数 f を適用する。
            * @param {Object} ip IP アドレス
            * @param {Function} f コールバック関数
            */
            var exists = function(ip, f){
                jq(ip, function(page){
                    f(spec.existp(page));
                });
            };
            that.exists = exists;
            
            /**
            * 与えられた IP に対する存否の結果ページを取得し、その結果に対して関数 f を適用する。
            * @param {Object} ip IP アドレス
            * @param {Function} f コールバック関数
            */
            var getHTML = function(ip, f){
                jq(ip, function(page){
                    f(page);
                });
            };
            that.getHTML = getHTML;
            
            // private --------------------------------------------
            
            /**
            * jQuery.get をラップした関数
            * @param {Object} ip
            * @param {Function} f
            */
            var jq = function(ip, f){
                jQuery.get(spec.url + ip, null, function(page){
                    f(page);
                });
            };
            
            return that;
        };
        
        /**
        * DB SET は検索対象の DB を集約。
        *
        * {spec.dbs db の配列}
        *
        * @param {Object} spec
        */
        var dbSet = function(spec){
            var that = {};
            
            /**
            * DB における IP アドレスの存否の結果を HTML で取得し、それに関数 f を適用する。
            * @param {Object} ip
            * @param {Function} f
            */
            var getHTML = function(ip, f){
                each(function(db){
                    db.getHTML(ip, function(page){
                        f(page);
                    });
                });
            };
            that.getHTML = getHTML;
            
            /**
            * いずれかの DB に与えられた IP が存在するか確認し、その結果に対して関数 f を適用する。
            *
            * @param {Object} ip
            * @param {Function} f
            */
            var exists = function(ip, f){
                var result = [];

                var allChecked = function(){
                    var b = false;
                    if (result.length === spec.dbs.length) {
                        for (var i = 0; i < spec.dbs.length; i++) {
                            b = b || result[i];
                        }
                        f(b);
                    }
                };
                
                each(function(db){
                    db.exists(ip, function(exists){
                        var idx = result.length;
                        exists ? result[idx] = true : result[idx] = false;
                        allChecked();
                    });
                });
            };
            that.exists = exists;
            
            // private ----------------------------------------------
            
            /**
            * 各 DB に対して関数 f を適用する
            * @param {Function} f
            */
            var each = function(f){
                for (var i = 0; i < spec.dbs.length; i++) {
                    f(spec.dbs[i]);
                }
            };
            
            return that;
        };
        
        // 各 DB の設定
        var dronebl = db({
            url: "http://dronebl.org/lookup_branded.do?ip=",
            existp: function(page){
                var msg = /This means that your IP is not listed in DroneBL/;
                return page.match(msg) ? false : true;
            }
        });
        
        var efnetrbl = db({
            url: "http://rbl.efnetrbl.org/?i=",
            existp: function(page){
                var msg = /was found in the database/;
                return page.match(msg) ? true : false;
            }
        });
        
        // ブラウザで選択された IP アドレス
        var ip = CmdUtils.getSelection("").match(/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/);
               
        // DB を集約
        dbSet({
            dbs: [dronebl, efnetrbl],
        }).exists(ip, function(b){
            pblock.innerHTML += b;
        });
    },
});

 

関連記事

2010年8月21日土曜日

Ubiquity で特定のサイトをプレビューに表示

Firefox のアドオン Ubiquity を使い、そのプレビューに特定のサイトの内容を表示したい。

予め下記のサイトの解説を読んでおき、基本的な書き方を確認。

API の解説は Ubiquity のコマンドで help 。 ハッキング にある 「コマンド API ドキュメント」 を参照。

 

Ubiquity とその他アプリケーションの設定

Ubiquity を使う前に、コマンド help > 各種設定 > 言語設定 において 「Parse 2 を使用」 のチェックをはずす。これがあるとコマンドが思ったように実行されなかった。

「ぴたすちお」 のようなマウスホイールの回転を 「カーソルの下のウィンドウに送る」設定がされている場合、Ubiquity 内のプレビューでスクロールができないので設定をはずしておく必要がある。

 

コマンドの編集

コマンド Command-Editor により、ブラウザ上でコードを編集できる。

コマンドテンプレートを挿入」 し、不必要なコードを削除。ここではコマンド名の設定とプレビューの表示関数だけ残す。

「ファイルに保存」 すると保存した場所が Ubiquity に記録されるので、後はエディタで直接編集するのが楽。

 

プレビューの表示

例えば、コマンド test を実行して、 Apple のサイトをプレビューに表示させたいとする。

iframe で外部サイトを表示させるなら、

CmdUtils.CreateCommand({
    names: ["test"],
    preview: function preview(pblock, args){
        pblock.innerHTML = '<iframe width="100%" height="475px" src="http://www.apple.com" />';
    },
});

preview 関数が Ubiquity のプレビュー表示に対応しており、その第1引数がプレビュー領域を指し示す。

 

テンプレートの使用

テンプレート機能を使うなら、「API ドキュメント」 より以下の関数を使う。

CmdUtils.renderTemplate(template, data)

Renders a template by substituting values from a dictionary. The templating language used is trimpath, which is defined at http://code.google.com/p/trimpath/wiki/JavaScriptTemplates.

renderTemplate 関数は第一引数がテンプレートで、第二引数は埋め込むデータ。

テンプレート内では、

${dataのプロパティ}

と記述することにより、値が置き換えられる。(詳しくは上記サイトを参照)

CmdUtils.CreateCommand({
    names: ["test"],
    preview: function preview(pblock, args){
        var data = {
            width: "100%",
            height: "475px",
            src: "http://www.apple.com"
        };
        var template = '<iframe width=${width} height=${height} src=${src} />';
        pblock.innerHTML = CmdUtils.renderTemplate(template, data);
    },
});

 

jQuery でアクセス

5 Documentation > Labs/Ubiquity/Bundled Libraries - MozillaWiki によると、

Ubiquity currently includes the following JavaScript libraries:

  • jQuery -- the awesome jQuery library
  • DateJS -- fantastic date natural language parser

Labs/Ubiquity/Ubiquity 0.1 Author Tutorial - MozillaWiki

Because we include jQuery with Ubiquity, it is simple to perform Ajax calls as well as parse returning data.

Ubiquity から他のサイトにアクセスするは jQuery を使えばいいと。

jQuery.get() – jQuery API によると

Description: Load data from the server using a HTTP GET request.

jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] )

  • url A string containing the URL to which the request is sent.
  • data A map or string that is sent to the server with the request.
  • callback(data, textStatus, XMLHttpRequest) A callback function that is executed if the request succeeds.
  • dataType The type of data expected from the server.

これを使うなら、

CmdUtils.CreateCommand({
    names: ["test"],
    preview: function preview(pblock, args){
        jQuery.get("http://www.apple.com", null, function(page){
            pblock.innerHTML = page;
        });
    },
});

 

選択された文字列の取得

URL を表わす文字列`http://XXXXX.XX.XXX’ があった場合、XXXXX.XX.XXX の部分を選択した後、コマンドを入力したらそのサイトをプレビューに表示するように変更したい。

ブラウザ中の選択した文字列を取得するには、API の CmdUtils より、

CmdUtils inherits ContextUtils. The methods are wrapped so that the context argument isn't needed. (i.e. CmdUtils.getSelection("") is equivalent to ContextUtils.getSelection(context, ""))

CmdUtils は ContextUtils を継承しているということなので、API の ContextUtils を見ると、

ContextUtils.getSelection(context, joint = "\n\n")

Returns a string containing the text and just the text of the user's current selection, i.e. with HTML tags stripped out.

joint is an optional string to join multiple selections.

これを使い、

CmdUtils.CreateCommand({
    names: ["test"],
    preview: function preview(pblock, args){
        jQuery.get("http://" + CmdUtils.getSelection(""), null, function(page){
            pblock.innerHTML = page;
        });
    },
});

 

jQuery.get の代替となる関数

CmdUtils には jQuery.get の代替となる  関数が定義されている。違いは、

The difference is that previewGet()/previewPost() is designed to handle command previews, which can be cancelled by the user between the time that it's requested and the time it displays. If the preview is cancelled, the given callback will not be called.

(API のドキュメントより)

これを用いるなら、

CmdUtils.CreateCommand({
    names: ["test"],
    preview: function preview(pblock, args){
        pblock.innerHTML = "";
        CmdUtils.previewGet(pblock, "http://" + CmdUtils.getSelection(""), null, function(page){
            pblock.innerHTML = page;
        });
    },
});

2010年8月12日木曜日

USTREAM のダッシュボードにおける配信動画のサイズを大きくする

USTREAM のダッシュボードに表示される動画のサイズは小さい。これをスタイルシートで以下のように大きくする。

image2826-2

Firefox, Google Chrome を使っている場合、アドオン Stylish をそれぞれ予めインストールしておく。

その後、以下の install with Stylish ボタンでインストール。

2010年8月10日火曜日

Firefox で Google スプレッドシートの日本語入力がおかしい

家のばぁちゃんの体調が悪くなり、Google スプレッドシートで簡単な体調記録を付けることにした。 Google スプレッドシートなら家族で共有できるので、誰でも必要なとき印刷をして病院に持っていける。

 

入力が滅茶苦茶

Firefox で久しぶりに Google スプレッドシートを使ったら、どうも日本語の入力がおかしい。例えば、「本日は晴天なり」と入力をはじめたら、

img08-10-2010[4]

となり、終いには滅茶苦茶になった。

img08-10-2010[6]

ただし、IE8, Google Chrome では問題ない。

また、Firefox でも Google スプレッドシートで「旧バージョン」に戻せばちゃんと入力できる。

img08-10-2010[11]

 

入力する前に Enter キーを押す

これを回避するには、入力する前に一度 Enter キーを押して、入力可能な状態にした後、

img08-10-2010[9]

日本語を入力すればよい。

img08-10-2010[10]

(※ 上図で入力フィールドがピンク色になっているのは、アドオン IMEStatus をインストールしてあるため。「編集」ボタンが表示されているのは It's All Text! をインストールしてあるから。)

しかし、面倒だなぁ。。 (+_+) 素直に Chrome 使っておこうかな。

2010年5月10日月曜日

Make Link で Google スプレッドシートのリンクを作成

1. ハイパーリンクを入力するための数式

Google スプレッドシートはセルに URL を入力した後、そのセルをクリックするとリンク先に飛ぶためのポップアップが表示される。

img05-10-2010[3]

URL ではなくテキストでリンクしたい場合は、

… 該当するセルに次のようなハイパーリンクの数式を入力します。

=hyperlink("www.google.com";"ウェブを検索")

(リンクを挿入する : スプレッドシートの編集 - Google ドキュメント ヘルプ より)

 

2. Firefox のアドオン Make Link で数式を作成

上記の数式を一々入力するのは面倒なので、Make Link :: Add-ons for Firefox を使って簡単に入力できるようにする。

  1. Firefox を開き適当な位置で「右クリック > Make Link > 設定」。
  2. 新規ボタン」で新しい設定を作成。
  3. 名前を適当に付け、フォーマットに以下を入力。

=hyperlink("%url%";"%text%")

img05-10-2010[2]

これで Make Link に新しく作成したものが表示されるので、リンクを貼りたいページで右クリックして Make Link  > Google Spreadsheets を選択し、素早く以下のように入力できる。

img05-10-2010[4]

 

参考記事

2010年5月4日火曜日

Firefox のアドオン Notepad (QuickFox) でメモを書く – QuickNote から乗り換え

1. Firefox でアドオン QuickNote を使いメモをとる

img05-03-2010[11]Firefox でメモをとるとき、アドオン QuickNote を使っていた。

このアドオンが便利な点は、以下の 2 点。

  • ツールバーのアイコンから、すぐに起動できる
  • 一定の文字数を入力すると、自動的に保存してくれる

問題は、タブの上限が 4 つであること。これにより、メモが混在し、どこに内を書いたかわからなくなる。

 

2. QuickNote より高機能なアドオン QuickFox Notes

SnapCrab_No-1035 QuickNoteに対して、Notepad (QuickFox) は機能が豊富なメモ帳。

インストールすると、ツールバーにアイコンを登録できる。

img05-04-2010[4]

Notepad (QuickFox) が便利なのは、次の 5 点。

 

a. タブの数を好きなだけ増やせる

タブを増やすには、タブの左側の十字アイコンをクリックする。または、タブがない空いている場所でダブルクリック。

img05-04-2010[3]

QuickNote ではタブの数の上限が 4 つだったけれど、QuickFox Notesでは、5 つ以上のタブを作成できる。

 

b. 間違えて消したらゴミ箱から取り出せる

必要なくなったタブを削除したい場合は、タブの右側のペケ印をクリック。安心なのは間違えて削除しても、その上のゴミ箱から取り出すことができること。

img05-04-2010[1]

 

c. タブが増えすぎたらアーカイブ

たくさんタブが増えたら、どこに何があるのかわからなくなる。スッキリと整理しておきたい場合、Gmail ライクにアーカイブすることができる。

  • メニューの Archive > Add to archive

を選択する。または、タブをダブルクリックすることでアーカイブされ、タブが見えなくなる。

img05-04-2010[1][5]

元に戻したいときは、Archive > Send back to Editor を選択。

 

d. Xmarks との連携

ブックマークの同期に Xmarks を使っている。このアドオンは、ブックマークをサーバ上に保存してくれる。QuickFox Notes は、これにも対応している。

if you already have a bookmarks synchronization add-on installed in your Firefox (e.g. Xmarks or Mozilla Weave), your notes will be synchronized automatically.

(QuickFox Notes :: Add-ons for Firefox  より)

ブックマークの一覧を見ると、QuickFox Notes というフォルダが作成されている。

  • ブックマークの名前 –> QuickFox Notes のタブの名前
  • ブックマークの説明 –> QuickFox Notes のメモの内容

という対応付けがされていた。

QuickFox Notes のデータの保存は、ブックマークを利用している。そのため、Xmarks の同期機能により、他の Firefox とめもの内容を同期できる。

 

e. URL をダブルクリックで開くことができる

追記 (2010.5.26) : URL がテキストとして書かれている場合、ダブルクリックするとそのページを開くことができる。

2010年3月31日水曜日

Firefox で開いているタブを一覧して切り替える - 「タブプレビュー」の活用と、マウスジェスチャーへの割り当て

1. アドオン FoxTab を使うのをやめた

 FoxTab はタブを切り替えるための Firefox アドオン。タブを切り替えるときに、タブのサムネイルを一覧してくれる。

このアドオンにべた惚れだったけれど、最近利用していない。理由は、表示されるサムネイルがぼやけた画像になったため。

それ以来、普通にタブを切り替える方法に戻した。

しかし、ブラウズ中、たくさんのタブを開くことが多い。そのため、どの位置に何のサイトを開いたのか忘れてしまう。

開いているタブが多い場合は、内容を分類して、別のウィンドウへ移す。今のバージョンの Firefox は、タブを D&D で移動できる。直観的で扱いやすい。

それでも、多くのタブを開いていると、もっと自在にタブ間を行きしたい。

 

2. タブプレビュー機能を使う

アドオン Firefox Secrets を使うと、タブプレビューを表示させることができる。

窓の杜 - 【REVIEW】「Firefox」v3.6の隠し機能を手軽にON/OFFできる拡張機能「Firefox Secrets」 によると、

「Firefox」v3.6には機能自体は追加されたが、標準で無効化されており、通常の設定画面から有効化することもできない機能がいくつか存在する。…

ON/OFFできるのは、[Ctrl]+[Tab]キーによるタブのプレビュー表示機能、タブバー右端のボタンによるタブプレビュー機能、…

タブを選択するためのプレビュー表示機能の動作は、Vista の Aero と親和性の高いデザイン。

タブプレビューの上部には、タブをタイトルで抽出するための検索フィールドがある。プレビューウィンドウの上で、タブを閉じることもできて便利。 ^^

 

3. タブプレビューを有効にする

a. Firefox Secrets で設定する場合

上記の設定は about:config でも設定できる。

GUI を使って設定したい場合は、Firefox Secrets を利用すれば良い。

Firefox Secrets の設定画面で Settings において

  • Tab previews
  • Tabs previews menu button

の二つにチェックを入れた。

img03-31-2010[1]

 

b. Configuration Mania で設定する場合

アドオン Configuration Mania で設定する場合、

  • ブラウザ > タブブラウジング > タブのプレビュー表示

において、「タブの一覧表示」「Ctrl+TAB」にチェックを入れる。

SnapCrab_Configuration Mania_2013-1-12_15-5-12_No-00

 

4. タブ一覧をすぐに表示する方法

Ctrl + Tab

の入力により、タブの切り替え画面が表示される。ただし、多くのタブが開かれている場合、一部が表示される。これに対し、

Shift + Ctrl + Tab

を押すと、全てのタブがすぐに表示される。マウスによって選択しない限り、選択画面が消えることはない。

 

連続したキー入力

KeySwap などの、キーを入れ替えるアプリケーションで、CapsLocks に Ctrl を割りてておけば、

  1. Shift
  2. Ctrl
  3. Tab

という順にキーが並ぶ。そのため、キーの押下を素早く行える。

 

5. FireGestures でタブプレビューを表示する

FireGestures を使うと、タブプレビューを表示する操作を、マウスジェスチャーに割り当てることができる。

FireGestures の設定画面を開き、

スクリプトを追加

にあるスクリプトを貼り付け、ジェスチャーを割り当てた。

タブの切り替えはよく行う操作なので、マウスを上方向へ移動させる動作にした。

img03-31-2010[2]

ちなみに、マウスを下方向へ移動する動作は、「タブを閉じる」に割り当てている。

追記 (2010.6.6) :  マウスを上方向へ動かすジェスチャは「新規タブ」に戻した。

代わりに 下左 (DL) のジェスチャーをタブプレビューに割り当てた。

DL

というマウスの動きは、下方向、左方向へとカクカクと動かす必要はない。円を描くようなつもりでクルッとマウスを動かせばいいので、割とスムーズにタブプレビューを表示させることができる。

 

参考サイト

2010年2月16日火曜日

Firefox が起動できなくなる - プロファイルの cert8.db を削除

この頃、また Firefox がよく落ちる。長時間起動していると激重。久しぶりに再インストールし、まっさらにしたにも関わらず。。 (+_+)  アドオンを入れ過ぎがいけないのだろうか?

しかも、落ちるときに意味不明なことを言われた。

ハードディスクの空き容量が足りない

という旨だったと思うけれど、ハードディスクはガラガラに空いている。仕方がないので、反応が悪くなったら再起動という使い方で我慢。

しかし、終いには次のエラーが表示され、全く起動できなくなった。

セキュリティコンポーネントを初期化できませんでした。多くの場合この原因はこのプログラムのプロファイルフォルダの問題です。プロファイルフォルダへの読み書き権限があるか、ディスクの空き容量が少なくなっていないか確認してください。このままセッションを継続するとセキュリティ機能が異常動作する可能性があるため、このプログラムを一度終了して問題を解消することをお勧めします。

これは「セキュリティコンポーネントを初期化できませんでした」によると、ハードディスクの容量を増やすか、もしくは、

プロファイルフォルダ内の cert8.db ファイルが壊れている可能性があります。Firefox を閉じて、このファイルを削除してください。…

cert8.db ファイルは Firefox の再起動時に再生成されます。これは通常の動作です。

(ファイルが壊れている より)

とのこと。指示に従ったら起動できるようになったし、反応もよくなった。 ^^ この前もこれが原因で調子が悪くなってたのかな? 長時間起動しておけば動きは悪くなるけれど、以前ほどではなくなった。

2010年2月10日水曜日

Firefox のアドオン QuickDrag で選択した文字をドラッグして検索 - EasyDragToGo の代替

追記 (2010.3.29) : Easy DragToGo が 3.6 に対応していたので QuickDrag から乗り換えた。やはり、Easy DragToGo は使いやすい。


 

単語の検索、リンクを開く操作はドラッグで

Firefox で閲覧中、

  • わからない言葉を検索したい
  • リンクを新しいタブで開きたい

場合、対象をドラッグして目的を達成する。この機能を実現してくれるのが Drag de Go だった。しかし、途中から新しい Firefox に対応しなくなり Easy DragToGo に乗り換え。しかし、これまた Firefox 3.6 には対応していない。

アドオン MR Tech Toolkit を使って非対応の Easy DragToGo を使えるようにしようかと思ったけれど、いつもアドオンの入れ過ぎで激重フォックスになり動作がぎこちなくなるので、極力対応していないアドオンは入れない方向で。しかし、ドラッグで検索したり、リンクを開くことは日常的な必須業務。これ使えないと不便。 (+_+)

 

QuickDrag

同じ系統のアドオンがないかと探したら、QuickDrag というのがあった。ただし、ドラッグする方向によって、新しいタブを前面・背面で開くということはできない。

基本はバックグランドで新しくタブが開かれる。

前面で開きたい場合は、

Shift キーを押しながドラッグ

操作をする。

 

Tab Mix Plus との併用で一連の動作をスムーズに

ドラッグの方向によって操作を切り替えられないのは不便だけれど、アドオン Tab Mix Plus により 「マウスオーバーでタブを開く」 設定 をしておけば、

  1. 選択した文字を上方向へドラッグすることによって検索
  2. 開かれたタブの上へポインタを移動させる

というように一連の動作を流れるように行なえば我慢できる。

 

関連記事

2009年12月27日日曜日

Tumblr で高速に Reblog するための Firefox の設定 - AutoPager で早めに次ページを読み込み、スクロール量を増やし、ダッシュボードをカスタマイズ、表示領域を広くし、専用のプロファイルを作る

1. AutoPager で早めに次のページを読み込む

次のページを読み込むタイミングを早くする
  1. AutoPager をインストール。
  2. ステータスバー に表示された AutoPager のアイコンを「右クリック > 設定の管理
  3. 右側の「全般」タブ > 「 残りスペースがウィンドウ高さ」の値を適当に大きくする。
予め1ページ以上読み込んでおく

追記(2013/02/11)

  1. ステータスバー に表示された AutoPager のアイコンを右クリック
  2. オプション > 前もって読み込むページ数:」を 1 以上に設定する。

cf. Guide for computers with FAST internet to tweak AutoPager

 

2. Firefox のスクロール量を大きくする

 

3. Tumblr のダッシュボードの表示をカスタマイズ

自分のポストを隠す
  1. Stylish をインストール。
  2. A smart dashboard is_mine で自分のポストを隠す。
Quote のフォントを大きく

 

4. Firefox の表示領域を広くする

  • メニューより、「ツール > オプション > 常にタブバーを表示」をはずす
  • メニューを表示しなくて済むように Personal Menu をインストール。
  • 全画面表示させたい場合は F11 キー。

Alt キー で 隠したメニューの表示ができることを覚えておく。

ロケーションバー が必要ないなら、「表示 > ツールバー > ナビゲーションツールバー」のチェックをはずす。

 

5. Tumblr 専用のプロファイルを作成

  • Tumblr 専用のブラウザを作成しておけば、不必要なアドオンをインストールしないで済む。設定の異なる複数の Firefox を起動できるようにし、ショートカットを作成。名前を tumblr とする。
  • Launchy をインストールし、キーボードで tumblr と入力したら起動できるように。
  • メニューより、「ツール > オプション > 一般」で起動のホームページを Tumblr のダッシュボードにする。
  • Personas をインストールし、普段使っているブラウザと一見して違うことがわかるように。
  • WinDeskWide のような仮想デスクトップを使い、専用の画面を設けておくとよい。

 

6. その他

追記 (2010.4.4) : Adblock や Stylish の広告を排除しているアドオンを使っていると重くなる感じがする。

 

関連記事

2009年12月21日月曜日

Firefox のアドオン Stylish の設定ファイルを Dropbox へ移動

1. Stylish の設定ファイルを Drpobox へ置く

よく見るサイトの表示をカスタマイズするために Stylish を使う。

Firefox のプロファイルが壊れたときや、PC が起動できなくなったときのために、Stylish の設定ファイルを Dropbox に設定ファイルを置くと良い。

 

2. 設定ファイルを about:config で指定する場合

Stylish の設定ファイルの位置は、

  • extensions.stylish.dbFile

で指定する。Stylish のバージョン履歴 :: Add-ons for Firefox によると、

… a new preference extensions.stylish.dbFile that lets you choose where your styles are stored. (太字は引用者による)

以前とは設定名の値が異なる。設定ファイルの位置を変更した場合に変更するパラメータも変更されている。

 

a. Stylish の設定ファイルを移動

予め Stylish の設定ファイルを確認しておく。ファイルがある位置は、

  • C:\Documents and Settings\ユーザ名\Application Data\Mozilla\Firefox\Profiles\ランダムな文字列.プロファイル名’ の `stylish.sqlite

上記の設定ファイルを Dropbox 上の適当なフォルダに移動する。

 

b. Firefox による設定
  1. Firefox のロケーションバーに about:config と入力。
  2. フィルタに extensions.stylish.dbFile と入力。
  3. 抽出された行をダブルクリックし、Dropbox 上の stylish.sqlite へのパス文字列で入力する。
  4. Firefox を再起動する。

パスの指定は、Windows のパス形式で入力すればよい。 以前のバージョンでは fileURL で入力する必要があった。

 

3. シンボリックリンクで指定する場合

追記(2014/12/25): シンボリックリンクを使った方がより簡単に設定できる。

  1. Stylish の設定ファイルを移動
  2. `stylish.sqlite’ があった元の位置から、移動先のファイルへシンボリックリンクを張る

 

関連記事

2009年11月17日火曜日

Google Chrome で HootSuite のフォントサイズを少し大きくしたい

user script のインストール

http://userstyles.org/styles/22613 の Load as user script ボタンを押してインストール。

 

HootSuite の文字が小さくて読みにくい

愛用していた pbtweet が twitter の仕様の変更のためなのか、表示が上手くされないときがあった。pbtweet 以外の twitter クライアントを色々と検討したけれど、やはり pbtweet の会話調の吹き出しに敵うものなし。敢えて別のものを使うとしたら、HootSuite 。しかし、デフォルトでは文字が小さいので読みずらい。 (+_+)

Firefox なら Stylish を使って、

.tweetContent {
    font-size:100% !important;
}

と書けば問題ない。

Chrome でも Stylish のようなものがあるのかな?と思い探したけれどわからなかった。

 

User Script

今、Chrome は開発版を使っている。 どのバージョンからか知らないけれど、XXXXX.user.js という名前のユーザスクリプトファイルを Chrome に D&D してやると簡単にインストールできる。(削除するときは、Google Chrome の設定 > 拡張機能 を開く)

Google Chrome Converts User Scripts into Extensions によると、

Now you can visit userscripts.org and any other site that links to Greasemonkey scripts and other flavors of user scripts, click on the link to a *.user.js file and install it in one click.

ということで、userscripts を書くことに。

userstyles.org のサンプルを見て、必要であろうところのみ抽出。JavaScript で head 要素に style タグを追加するだけ。

// ==UserScript==
// @name           set hootsuite fontsize
// @description    hootsuite 
// @namespace      http://jutememo.blogspot.com
// @include        http://hootsuite.com/dashboard* 
// ==/UserScript==
(function(){
    var fontsize = "100%";
    
    var css = ".tweetContent{font-size:" + fontsize + " !important;}";
    var style = document.createElement('style');
    style.type = "text/css";
    style.appendChild(document.createTextNode(css));
    document.getElementsByTagName("head")[0].appendChild(style);
})();

 

userstyles.org を利用

当初これをエディタに書いて、Chrome に D&D していた。しかし、userstyles.org でアカウントを取得してみたら、CSS を入力するだけで、後は全部自動で上記のようなコードを生成してくれた。userstyles.org のコードはよく使わせてもらっていたけれど、こんなにお手軽に user script を作れるとは今まで知らなかった。 (@_@;)

これなら表示をカスタマイズしたいサイトがあったら、

  1. userstyles.org で CSS を入力
  2. user script を生成
  3. Chrome へインストール

で簡単にできる。 ^^

http://userstyles.org/styles/new

New style | userstyles.org via kwout

2009年10月19日月曜日

Firefox のアドオン Migemo によるページ内検索

アドオンをたくさん入れていると、何がどの機能か忘れてしまう。 ^^;

つい最近まで Firefox の標準の機能だと勘違いしていたのが

のページ内検索によるハイライト。

  1. Ctrl + F を入力
  2. 検索したい単語を入力
  3. Alt + A で「すべてを強調表示」

090918-003.png

検索した単語の位置をウィンドウの右に示してくれるので、ブラウザでコードを見るとき重宝している。

090918-002.png

 

デフォルトのページ内検索

久しぶりに Firefox のプロファイルを新しく作り、アドオンをインストールしていない状態で、上記と同様な動作をしたら、

090918-001.png

あれ?いつもと表示が違うのはなぜ?と悩んでしまった。 (@_@;)

 

検索時の操作

しかも、最近になってはじめて気がついたのは、単語を選択した後に Ctrl + F をした時点でページ内検索のフィールドに単語がコピーされること。

今までしていた操作

実際にはこれだけで済む

  1. 単語を選択
  2. コピー
  3. Ctrl + F
  4. ペースト
  5. Alt + A で「すべてを強調表示」
  1. 単語を選択
  2. Ctrl + F
  3. Alt + A で「すべてを強調表示」

コピーからペーストまでの一連の動作が習慣化していたために、コピーが必要ないことに気づいてなかった。

ちなみに、「すべてを強調表示」が有効になっている限り、他の単語を強調表示したい場合、当該の単語を選択した後 Ctrl + F だけで連続して検索できる。

 

Migemo で長い文章の検索

基本的な操作ですら気がついてなかったことがあるので、XUL/Migemo でも色々とあるはずだと思い調べてみたら、

… 「nihongo deno pe-zi nai kensaku」と、スペースキーで言葉を句切りながらローマ字入力してみてください。「日本語でのページ内検索」という文章が検索されるはずです。…

いわゆるSKK方式での入力もサポートしています。「nihongoDenoPe-ziNaiKensaku」…

(長い文章の検索 より)

なるほど、これで文章を検索できるとは。

 

関連記事

2009年10月6日火曜日

Google 検索と同時に Google ブックマーク の検索結果を表示する Greasemonkey スクリプト

ブックマークの保存に Google ブックマーク

保存しておきたいサイトやページは全て Google ブックマーク で管理している。Firefox のブックマークは、ツールバーに頻繁に見るサイトを置いているのと、「あとで読む」用の一時的な保管場所として使っているのみ。ブックマークをツリー状に整理整頓しなくなって久しい。 ^^;

オンラインブックマークに移行して随分経過した。当初、はてブ を使うことも考えたけれど、完全にプライベート目的だったので Google ブックマークを選んだ。

 

Firefox のアドオン Gmarks で素早く入力

Google ブックマークを使うときは、Firefox のアドオン GMarks を利用。ブックマークしたくなったら、Ctrl + D で素早くブックマーク。後で検索できるように、なるべく多くタグを付けておく。分類目的のタグに加え、読んだときに気になった単語、「おもしろい」「なるほど」などという感想もタグとして付ける。場合によっては、そこから連想すること、人から教えてもらったらその人の名前、人に教えたいことなら相手の名前をタグとしてつけることも。後で検索するときに手がかりをたくさんつけておくのがポイント。

 

検索時にブックマークも同時に検索してほしい

検索をしていて、以前に見たページに辿りつけなくなることはよくある。なんとなく見たいサイトをぼやっと覚えているものの、肝心のそこへ辿り着くための検索ワードが思い出せない。 (+_+) そんなとき、Google ブックマークで再検索すると見つかることがある。Google 検索の後、ブックマーク検索するのは面倒なので、検索と同時にブックマークも検索して表示するスクリプトを書くことにした。

動作イメージは下図の通り。検索した単語に応じて、右側にブックマーク検索の結果を表示する。ただし、表示されるブックマークは、Google ブックマークで検索したときの 1 ページ目のみを表示するというシンプルなものに。

091001-003.png

 

インストール

前提 : Greasemonkey がインストールされていること。

インストールはこちらをクリック → search_extention.user.js

更新情報
  • 2011.9.10 : Google Bookmarks からの検索結果が表示されない問題を修正。
  • 2010.11.15 : Google のデザインの変更に対応。ただし、Google の検索結果の幅を固定したので、幅の狭い PC では見ずらくなるかも。
  • 2010.7.31 : Google のデザインの変更に対応。マーカーとして数値を振る。

 

Firefox のブックマークを Google ブックマークへインポート

Google ブックマークを普段使ってない場合は、Google ツールバー を使うと Firefox のブックマークをインポートすることができる。

ツールバーの機能 : ブックマーク - ツールバー ヘルプ によると、

  1. ツールバーの [ログイン] ログインボタンをクリックして、Google アカウントにログインします。
  2. [ブックマーク] ドロップダウン メニューをクリックし、(…) [Firefox ブックマークをインポートする] をクリックします。
  3. インポートしたいブックマークのチェックボックスをオンにします。
  4. [インポート] をクリックします。

ただし、ブックマークを階層化している場合、分類しているフォルダが独立したタグになるのではなく、

フォルダ名1:フォルダ名2

のように `:’ で区切られた文字列で一つのタグになるようなので注意。

 

ソースコードについて

GitHub

当初、Gist – GitHub に置こうと思っていたけれど、なぜか途中で切れてしまったので以下に置いた。

Git の使い方覚えなければ。。 (+_+)

追記 (2010.7.31) : Windows で GitHub の利用 - msysgit, TortoiseGit を使って

 

オブジェクト間の関係

大雑把に言えば、以下の図のような動作。

091005-001

 

スクリプトでは、トップレベルのオブジェクトを名前空間として利用。以下の図では便宜的に名前空間をパッケージとして描いた。

classDiagram2

 

当初、スーパークラスに相当する Abstract 内のオブジェクトは考えていなかった。Google 検索時には Google ブックマークからデータを引っぱてくるだけでよいと。しかし、スクリプトを書いている内に、Google 検索時に はてブ 、Bing 検索時に Delicious から読み込みたいなど、検索サイトとオンラインブックマークの組み合わせを変えたくなるかもしれないと思、共通になりそうな部分を抽出した。必要であればスーパークラスのメソッドをオーバーライドするだけ。しかし、他を実装していないので、実際に書いたときに色々と問題がでてくると思うけれど。。 ^^;

一応想定では、スクリプトの起動部分である最後の文を

searchResultArea({
    searchSite: Google.searchSite(),
    bookmarkService: Hatena.bookmarkService()
}).load();

または、

searchResultArea({
    searchSite: Bing.searchSite(),
    bookmarkService: Delicious.bookmarkService()
}).load();

のように切り替えられるつもり。

 

処理の流れ

大雑把な流れは以下の通り。

sequenceDiagram

 

参考書籍

スクリプトを書くのに以下を参考にした。

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス より

4873113911

  • 3.9 グローバル領域の利用を減らす, p28
  • 4.10 クロージャ, p43
  • 5.2 オブジェクト指定子, p57
  • 5.4 関数型, p59

上記の本では、new 演算子を想定している関数に対して、普通に関数呼出しをした場合、グローバル変数を上書きしていしまう可能性があるために、new を JavaScript の「悪いパーツ」と評している。(p133) その代わりとして、クロージャによるメソッドのアクセス制御と継承の方法について解説があった。これを読み、new 演算子の必要性を感じなくなったので、オブジェクトの生成に new は全く使っていない。クロージャは、はじめ取っつきにくかったけれど、慣れたらクラスと同じように見えてきた。クラスベースのオブジェクト指向のように、クラスの構文を持ち込まなくても、関数だけで表現できるのというのはシンプルでいいかも。 ^^

ところで、下記コードにおける searchSite 関数内の defaultInitArea メソッドは、引数 `my’ によって、searchSite 関数 (コンストラクタ) によって生成されたオブジェクトを継承したオブジェクトからのみアセクス可能であることを想定したが、こういう書き方で良かったのかな? JavaScritp に不慣れなので自信なし。。 (+_+)

 

関連記事

2009年9月27日日曜日

Flickr へのアップロードは Firefox Universal Uploader で

1. jUploadr はアップロードした後の通知が鬱陶しい

ブログを書くとき、写真の置き場に Flickr を使っている。

アップロードするためのツールは jUploadr を利用。jUploadr でも純正のツールと同じように、アップロードが完了すると通知のダイアログが表示される。通知に対応しなければならいので面倒だった。 (+_+)

 

2. Firefox Universal Uploader は通知してこない

これに対して、Firefox Universal Uploader (fireuploader) は、アップロードが終ってもダイアログで通知してこない。 ^^ これに乗り換えよ~。

JavaScript で XML を読み込む

DOMParser で XML を DOM ツリーに変換する

Firefox で XMLを解析し、DOM ツリーを生成するには、DOMParser を使う。

Parsing and serializing XML – MDC によると、

Mozilla は現時点では W3C の Document Object Model Load and Save に対応していない ( bug 155749) ので、DOM ツリーをシリアライズおよびデシリアライズするには次の Mozilla 専用のインターフェイスを使うのが最も簡単です。…

  • DOMParser - XML を文字列から DOM ツリーにパースする

例えば、「名前」と「年齢」を含む XML から、名前のみを抽出する。

var theString = '<persons>' +
	'<person><name>太郎</name><age>20</age></person>' +
	'<person><name>次郎</name><age>25</age></person>' +
	'<person><name>花子</name><age>30</age></person>' +
	'</persons>';
var parser = new DOMParser();
var dom = parser.parseFromString(theString, "text/xml");
var persons = dom.getElementsByTagName("person");
for (var i=0; i<persons.length; i++){
	console.log(persons[i].getElementsByTagName("name")[0].textContent);
}

Firebug のコンソールで実行した結果は、

太郎
次郎
花子

XML に対して、HTML で要素を取得するときに使う getElementsByTagName メソッドを利用している。これは、getElementsByTagName メソッドが定義されている Document インターフェイスは、HTML と XML を表現したものであるため。

2009年9月15日火曜日

Ubiquity が正常に動作しない

Firefox のアドオン ubiquity を使って Gmail に Google Map を貼り付けようとしたら動作しなかった。

 

対策

Ctrl + Space で Ubiquity を呼出し、help コマンド。

メニュー より 「設定」の「言語設定」の 「Parser 2 (次世代パーサ)を使用」のチェックをはずして、再起動したら動作した。

090915-001

 

tinyurl のコマンドも正常に動作しないと思ったら、これが原因だったのか。。 (+_+)

 

参考

2009年9月1日火曜日

Ameblo の 全文配信 RSS の登録を簡単にするブックマークレット - Yahoo Pipes でユーザ入力に対応したパイプをブックマークレットで呼出す例

1. ブックマークレットの登録

  1. アメブロ登録」のリンクをブックマークツールバーへ D&D
  2. 登録したいブログを開いたら、上記で登録したブックマークをクリックする。
  3. Pipes: Ameblo Content All が開かれるので、Get as RSS をクリックしてフィードリーダーに登録する。

追記(2012.3.5): 現在、全文配信のために、Full Text RSS Feed を利用している。

 

RefControl で画像を表示させる

 

2. ブックマークレットの作り方

以下、上記のブックマークレットで利用しているサービスと作り方。

Ameblo の RSS を全文取得するために Pipes: Ameblo Content All をブックマークレットで呼出す。(cf. Yahoo! Pipes で強制全文配信化 - てっく煮ブログ )

パイプの入力フィールドを見ると、input 要素の name 属性が `ameblo_rss’ になっている。

090901-001.png

上記を利用してクエリ文字列を作成。名前は ameblo_rss で、値は http://rssblog.ameba.jp/[ユーザ名]/rss20.xml を URLエンコード

ブログ上でブックマークレットをクリックして利用することを想定。

var user = location.href.split("/")[3],
yp = "http://pipes.yahoo.com/closer_nabeshimaeido/amebloall?ameblo_rss=",
rss0 = "http://rssblog.ameba.jp/",
rss1 = "/rss20.xml";
location.href = yp + encodeURIComponent(rss0 + user + rss1);

 

ブックマークレットに変換

Compress javascript でコードを圧縮したものをブックマークレット変換。 → アメブロ登録

このブックマークレットを上記のパイプを利用したいブログ上でクリック。

ブックマークレットを作るための参考

 

3. クエリ文字列の名前に対応するところ

試しに自分でユーザ入力が可能なパイプを作成してみる。

Blogger で複数のタグ (ラベル) の付いた記事を抽出 - サイトフィードを使って」で書いたように、Blogger では特定のタグが付いた記事を RSS で取得できる。この RSS を生成するパイプを作成。ユーザが入力できる部分は、「Blogger のドメイン」と「タグ名」の二つ。

 

パイプ の作成

Yahoo Pipes の作成画面において、User Inputs より Blogger のドメインを受ける URL Input と、タグを受ける Text Input を使う。(ただし、今回はタグを一つ指定できるのみ。)

上記の入力を、Url の URL Builder  >>> Source の Fetch Feed に流し込む。

090901-003.png

Pipes: test User inputs

 

JavaScript でテスト

URL Input > Name と、Text Input > Name で設定した値を使ってクエリ文字列を作成する。

var yp = "http://pipes.yahoo.com/pipes/pipe.info?_id=e2aaad527b948dfd1dab9aa69162d98a",
url = "jutememo.blogspot.com",
tag = "Firefox";
location.href = yp + "&url=" + encodeURIComponent(url) + "&tag=" + encodeURIComponent(tag);

 

4. 余談

RSS の URL の取得

アメブロの RSS の URL の取得は、link 要素から自前で検索した方がいいのかな?

function getRSS(){
 var links = document.getElementsByTagName("link");
 for (var i = 0; i < links.length; i++){
  if (links[i].type === "application/rss+xml"){
   return links[i].href;
  }
 }
}

 

わからなかったこと

当初、以下のようにパイプに遷移してからテキストフィールドに値を設定すればいいのかと思った。

location.href = "http://pipes.yahoo.com/closer_nabeshimaeido/amebloall";
document.forms["runform"].ameblo_rss.value = // ここに RSS の URL を設定

しかし、パイプにパラメータを渡す方法がわからず。 Tumblr のブックマークレットを見て、クエリ文字列にブログの RSS の情報を持たせ、遷移後にそこからデータを取り出せばいいのかと考えたけれど断念。。

 

それならば、ブログ内に iframe を作り、その中にパイプを読み込みフィールドの値を操作すればいいかと考えた。

// ページの上部に iframe を挿入
var newElem = document.createElement("iframe");
newElem.src = "http://pipes.yahoo.com/closer_nabeshimaeido/amebloall";
newElem.setAttribute("id", "yahooPipes");
document.body.insertBefore(newElem, document.body.firstChild);
// iframe の読み込みが完了した後に iframe にアクセスすると..
document.getElementById("yahooPipes").contentWindow.document.getElementById("runform");

しかし、結果は

"Permission denied for <http://ameblo.jp> to get property Window.document from <http://pipes.yahoo.com>."

Javascript & Dhtml Cookbook (p.448) によると、

保護されている iframe のコンテンツ領域に、スクリプトからアクセスできるように、主ページと外部ページの両方が同じドメインとサーバから送信されていなければなりません。

なるほど、クロスドメインだと色々と制約があるのかぁ。。 (@_@;)