Web scratch

Archive for the ‘Firefox’ Category

ConsoleのTabsでシェルにcmd+activateの実行をさせる

こうすれば、タブを開くだけでJetpackのコマンドが読み込まれて便利。

Shellにnyaosとかを使う方法はよく分からない。

• インストール – Jetpack SDK – あすかぜ・ねっと

今のニコニコだと好きな動画を探すときに、特定の検索をして探すって感じの場合が多くなってきた気がするので、検索履歴を保存して表示できるGreasemonkeyを書いてみました。

• Nico Search History for Greasemonkey

検索画面の右上の方にボタンが出るようになるので、それをクリックすると検索した履歴が表示されます。
検索履歴は検索キーだけではなくてsort方法によっても別々に保存されます。

また、検索キーの横にある☆マークをクリックすることで、その検索キーを常に上の方に表示して、自動的に削除されないようにします。(お気に入り機能)
お気に入りではない検索キーは100個ぐらいで自動的に削除されます。

コード内容

これを書き始めたときSandbox Patternを試してみたくて書いてたので、あんまり見ない書き方をしてると思う。
それぞれ必要な部品をモジュールhistory,templeteとして定義して、必要な時に
Sandbox(“history”, function(box) { … }) という感じで使うというような書き方になってる。

• nico_search_history at master from azu/Greasemonkey – GitHub

Firefoxのデバッグ拡張ことFirebugですが、Firefox4よりFirebugとは別にWeb Consoleという機能が入りました。
しかし、Firebug自体もさらに便利になっているので、少し紹介します。(Firebug1.7 –1.8 の範囲で)

現在のFirefox4に正式対応しているのはFirebug1.7xで、Firebug1.8xはAlpha版として公開されているのでまだ不安定な部分もあることに注意して下さい。
特に注意書きしてない部分はFirebug1.7の項目だと思って大丈夫だと思います

Read the rest of this entry »

ParamCleanerというURLからutm_*など不要なパラメーターを除去するGreasemonkeyを書きました。
すでに同じ目的のGreasemonkeyやアドオンなどがありますが、

• UrlCleaner for Greasemonkey
• FeedBurnerのトラッキングパラメータらしきものを削るGreasemonkey – ariyasacca(2009-11-18)
• URLのトラッキング用パラメータを無視するFirefox拡張 Through utm_ – SWDYH

history.replaceStateを使う事で他のものに比べて簡潔な処理でURLからトラッキングパラメーターなどを消せます。
またhistory.replaceStateを使ってるのでFirefox4以上向けで(一応Firefox3でも動くようにしてある)、Scriptish向けに最適化してあるので、できればScriptishで使った方がいいです(Greasemonkeyでも動きます)

• GreasemonkeyからScriptishへ環境設定を移行する | Web scratch

history.replaceState(data, title [, url])の使い方

historyオブジェクトについてはgithubなどで話題になったので知ってる人も多いと思いますが、pushStateはブラウザの履歴に新規エントリを追加するAPIで、replaceStateは現在のエントリを入れ替えるAPIです。
引数はpushState()と同じで、

history.replaceState(stateプロパティに入る値, 状態識別用のタイトル, [現在の状態に対応するURL]);

という引数をとります。
第三引数を指定してSame OriginならURLバーの表示を書き換える事ができるので、以下のように実際に移動しなくても表示が書き換わります。

// http://example.com/ で実行
history.replaceState(null, "", "/hey");
// => http://example.com/hey とURLバーの表示が変わる

• history.pushState、history.replaceState – 素人がプログラミングを勉強するブログ
• Firefox 4 での History API の変更 « Mozilla Developer Street (modest)

これを使って、今回はトラッキングパラメーターが存在するURL(アイテム – データベース: UrlCleaner – wedataで管理)にアクセスしたとき、トラッキングパラメーターを除去したURLへhistory.replaceStateを使って書き換えているので他のGreasemonkeyのようなリロードがなかったり、アドオンのように通信を監視する手間が省けます。(以前同じ名前でアドオンを作ってたけど重すぎた)

UrlCleanerと同じWedataで管理されたものを勝手に使ってるので、処理自体は互換性があるようにしています(一部拡張してるけど) 気になったものがあったらSITEINFOを書いて、UrlCleaner – wedataに登録するとよいです。

ParamCleaner for Greasemonkeyi

http://userscripts.org/scripts/show/100611

C++で書かれたAdblock++アドオンを使用していましたが、Firefox4で上手く動いてなかった(リストに空になるとか)ので、原因は何だろと探してみたらビルド環境がVisual C++ 2010 Expressに変わってたようです。

PCに入ってたランタイムは2008ぐらいのだったので、Microsoft Visual C++ 2010 再頒布可能パッケージからランタイムをダウンロードし、インストールし直したら動作するようになりました。

ついでに広告配信先が変わって動かなくなってたUstreamのFlash動画内広告を消す方法もアップデートしました。

BENKIi

http://park2.wakwak.com/~benki/index.html

KeySnailついて

自分はEmacsユーザーでもありませんが、KeyConfigの代わりにKeySnailを使い始めました。
そもそもKeyConfigとは役割違うし、KeyConfigもFirefox4対応したので併用しています。
keysnailはuserChrome.jsのキー特化みたいな存在で、便利なAPIがある環境みたいなとらえ方でもいいかもしれないです。(emacsのキーバインドは一切使わないで、まっさらな状態で始めました)

Read the rest of this entry »

GreasemonkeyからScriptishへの環境移行メモです。
ScriptishについてはScriptish wiki!やScriptish （Greasemonkey フォーク版） キタ━━━ヽ(ﾟ∀ﾟ)ﾉ━ – hogehoge @teramakoを見るとよいです。
簡単にまとめると、使えるAPIが増えた(開発者的にうれしい)、管理画面の設定項目がGreasemonkeyより豊富(Greasemonkey0.9で削られたinclude,excludeの設定もGUIからできます)、UIが日本語化されてる(ちょっと分かりづらい訳だけど…)
Greasemonkeyからフォークしてるので、Greasemonkey向けに書かれたスクリプト自体の互換性は問題ないです。
逆にScriptishの新APIを使ったものはGreasemonkeyでは動かない事があるぐらいだと思います。

環境の移行方法

How To: Manually transfer user scripts from Greasemonkey to Scriptish – GitHub
に手動での環境移行手順が書かれています。
簡単に書き出してみると

1. スクリプトフォルダ名はgm_scriptsからscriptish_scriptsになった
   (フォルダの中のconfig.xmlや配置自体は同じなのでフォルダ名だけ変更すればOK)
2. prefs.jsへスクリプトの設定の保存書式が変更された
これが移行時にネックになってる大きな変更で、GM_setValueなどGreasemonkeyスクリプトから値を保存するとpref.jsに書き込まれますが、そのときの書式が変わっているためGreasemonkey時に保存した値が引き継がれません。
一応手動での書き換え手順も書かれています。
greasemonkey.scriptvals から extensions.scriptish.scriptvals へ置換する
スクリプト名とネームスペースの間の/を@に置き換える

GreasemonkeyとScriptishのpref.jsの書式の違いを見てみると

user_pref("greasemonkey.scriptvals.http://efcl.info//Post Now browsing to Twitter.GM_config", "{"defaultTag":"見てる:","isSelection":true,"removeUtm":true,"avoidLinktoMeta":true,"PostWithCtrl":true,"ShortCutKey":"C-Delete","ShortURL":"bit.ly","bitlyUserName":"remiko","bitlyAPIKey":"R_fa2240c646c07b2091c6bc6d109089ef","googlAPIKey":"AIzaSyDYer57o2GyHX_xylyaa4iGIyyjd81kGxc"}");

// =>

user_pref("extensions.scriptish.scriptvals.PostNowbrowsingtoTwitter@httpefcl.info.GM_config",  "{"defaultTag":"Now  browsing:","isSelection":true,"removeUtm":true,"avoidLinktoMeta":true,"PostWithCtrl":true,"ShortCutKey":"C-Delete","ShortURL":"bit.ly","bitlyUserName":"remiko","bitlyAPIKey":"R_fa2240c646c07b2091c6bc6d109089ef","googlAPIKey":""}");

という風にpref.jsに保存される書式が変化しています。
ネームスペースとスクリプト名の位置も逆転してまたスペースなど除去されてたりします。
手動でやっても結構手間がかかるので、大事なものだけやって、後は普通に設定し直した方が楽だと思います。
一応、自動的にできるようにNILScriptでGreasemonkeyToScriptish.ngというものを作ってみました。

    pref.jsに保存された値をGreasemonkeyからScriptishの書式へ変更する
    pref.jsと同じディレクトリにこのngスクリプトを置いて実行するとnew_pref.jsが生成される。

実行する前にpref.jsのバックアップをとっておいてから、pref.jsと同じディレクトリにおいて実行すると、それぞれの値を書き換えたnew_pref.jsというのができるので、後はpref.jsのコピーし直すかpref.jsにリネームして使うなどしてください。
不完全かもしれないので、保証はできません。

• utilityTools/Greasemonkey/GreasemonkeyToScriptish.ng at master from azu/NILScript – GitHub

Dropboxフォルダでスクリプト管理

これを期にGreasemonkeyスクリプトのファイル自体をDropboxで共有しようと思ったので、移行手順の1の時にDropboxにgm_scriptsフォルダを移して、プロファイルフォルダにscriptish_scriptsへのシンボリックリンクを作りました。
Windowsだとmklinkとかコマンドラインがややこしいので、Link Shell Extensionを使ってシンボリックリンクを張りました。

• 隙間マニュアル: Dropboxで任意のフォルダやファイルを同期する方法
• 窓の杜 – 【REVIEW】エクスプローラ上で手軽にシンボリックリンクを作成「Link Shell Extension」

このソフトを使えば普通のショートカットみたいにシンボリックリンクが貼れるので簡単。
(シンボリックリンクのフォルダ名をちゃんとscriptish_scriptsにするのを忘れない)

追記:起動時に変更がたくさんある(Dropbox共有してると起きやすい)とnotificationが大量に通知されて使い物にならないので、
Manual: Preferences – GitHubを参考にabout:configのextensions.scriptish.enableScriptRefreshing を false にして変更の監視をオフにしました。副作用として、スクリプトのメタブロックを書き換えても反映されなくなると思います。
(Greasemonkey0.8あたりと同じ動作になると思う)

これでGreasemonkeyからScriptishへの移行手順は終わりです。
Firefox4への移行と同時にGreasemonkeyもScriptishへ移行を行えば、無駄なスクリプトを削除できたり汚れたpref.jsも掃除できるので同時期にやると良いかと思います。(使ってないGreasemonkeyスクリプトを削除するngスクリプトも以前書きました)
まだどっちのアドオンが優れてるのかはよく分かってないので、使ってるうちに何らかの違いが分かるんではないかと。
(Scriptish向けのスクリプトってなんて呼べば良いんだろ?)

Firefox4にしてから主にGreasemonkeyのGM_addStyleメソッドで

TypeError: can’t wrap XML objects

というエラーが出たりすることがあります。
これはBug 609143 – E4X XML objects cannot be passed to sandboxのsandbox内でのE4X(XML)の挙動が変わった(意図的に)のが原因らしいです。(あまり詳しくないので…)

GM_addStyle(<><![CDATA[ 
/* 適当なCSSのコード*/
    .clearfix:after {
        content: ".";  /* 新しい要素を作る */
        display: block;  /* ブロックレベル要素に */
        clear: both;
        height: 0;
        visibility: hidden;/*表示はしない*/
    }
 ]]></>)

のような感じでE4X(XML)を直接GM_addStyleに渡しているときなどに起きています。
これを回避するためには、E4X(XML)を明示的に文字列化して渡せばよい見たいです。

GM_addStyle(String(<><![CDATA[
/* CSSコード */
]]></>));

のようにString(E4X)するか、E4X全体をtoString()、”"+E4X のような感じで文字列化すればいい。
もしくはGreasemonkeyにはメタ情報に// @resource CSS example.css という感じで、CSSファイルをロードできるので、そのファイルをGM_addStyle(GM_getResourceText(‘CSS’));して使うなどでもいいと思います。

• @require, @resource of Greasemonkey – KBDAHOLIC – やぬすさんとこ

もしくは下のようにGM_addStyleを書き換えてしまう事でも回避できそうです。(あんまり推奨しないけど)

function GM_addStyle(css) {
    if (!GM_addStyle.style) {
        var head = document.getElementsByTagName("head")[0] ||
                document.documentElement;
        if (!head) {
            return;
        }
        GM_addStyle.style = document.createElement('style');
        GM_addStyle.style.type = 'text/css';
        head.insertBefore(GM_addStyle.style, head.firstChild);
    }
    GM_addStyle.style.appendChild(document.createTextNode(css) + '\n');
}

書き換えの参考

• GM_addStyleの実装と最適化 – 0xFF
• Surefire DOM Element insertion « Paul Irish

Constellation’s gist: 803115 — GistのようにTomblooパッチでGM_addStyleの挙動を変えてしまおうと思ったけどよく分からなくなってあきらめました。

参考

• Firefox 4.0b8～b9 でLDRize (Minibufferの修正) – wltの日記

Google検索は最も使うサービスの一つだと思うので、できる限り快適にしたいです。いろいろいじってたのがやっと落ち着いたので設定のメモです。

まずはGreasemonkeyから

• Twitter search(ja) result on Google for Greasemonkey
  検索結果にTwitter検索の結果を表示する
• En Google modified by Gulfweed
  検索中に言語の切り替えを簡単に行える
• Remove Google Redirection for Greasemonkey
  各ページへのリンクにGoogleのリダイレクトを挟まないようする

と、このぐらいで思ったより、Greasemonkeyは入れてない感じします。
Google検索自体が結構高機能なので、そこまで機能を付け加える必要が無いのかもしれないです。(期間指定をもっと簡単にやりたいけど)
後はアドオンでGoogle Date :: Add-ons for Firefoxを入れているぐらいです。
入れている理由は最終更新日を知るためなのでちょっと関係ないかもしれないです。

次にuserContent.cssの設定。
Stylishは入れてないので直接userContent.cssに書いています。(デバッグにはuserMenu.uc.jsのCSSリロードが便利)

/* Google検索ページ
+結果欄の幅拡張
+検索バーを固定
+サイトの背景色を奇数で色分
+広告は犠牲になった
*/
@-moz-document url-prefix("http://www.google.co.jp/search"),
                 url-prefix("http://www.google.com/search"){
    /* 「もっと見る」を押さなくても、最初から全部表示 */
    .nojsb {
        display: block !important;
    }
    #tads{
        display: none !important;
    }
    #showmodes {
        display: none !important;
    }
    #mbEnd{
        display:none !important;
    }
    /* fixedSearchbar */
    #nr_container {
        margin-top: 115px;
    }
    #sfcnt {
        -moz-box-shadow:0 1px 5px #000000;
        box-shadow:0 1px 5px #000000;
        left:0;
        padding:18px 0;
        top:25px;
        width:100%;
        z-index:10;
    }
    #gog {
        left:0;
        top: 0;
        width:100%;
        z-index:11;
    }
    #gog, #sfcnt, #subform_ctrl{
        background:none repeat scroll 0 0 rgba(255, 255, 255, 0.9)!important;
        position:fixed;
    }
    #sfcnt {
        height:70px !important;
        padding-top:0 !important;
    }
    #subform_ctrl {
      text-align:right;
      z-index: 10;
      right: 0;
      top: 88px;
      min-height: 0;
      background:none repeat scroll 0 0 transparent!important;
    }
    #guser, #gbar{
          padding: 1px 0;
    }
    #gbar nobr, #guser nobr {
        line-height: 22px;
    }
    /* oddには色をつける */
    li.g:nth-child(odd){
        background:#F7F7F7;
    }
    /* 説明文を横に延長 */
    .g{
        min-width:800px;
        padding:5px!important;
        -moz-border-radius : 5px;
        border-radius : 5px;
    }
    .s {
        min-width: 800px !important;
    }

    /* RealTimeの場合横幅に必要 */
    #center_col{
        min-width:820px!important;
    }
    /*右側のbox*/
    #rtro{
        width: 800px!important;
    }
    /* 普段は隠しておいて、マウスオーバーで表示させる */
    #rhs{
        -moz-box-shadow:-3px 3px 3px #000000;
        white-space: nowrap;
        background:#fff!important;
        right: 0!important;
        top: 0!important;
        width: 15px!important;
        overflow:hidden;
    }
    #rhs:hover{
        background:#fff!important;
        right: 0!important;
        top: 0!important;
        width: 800px!important;
    }
}

Googleの設定 — Gist

今はこんな感じで、結果欄の横幅拡張、検索バーを固定、サイトの背景色を奇数で色分けなどを行っています。
スクリーンショットで見ると以下のような感じになります。

また、先ほどGoogleのTwitter検索である”Google Realtime Search”のSITEINFOをwedataに書いておいたのでかなり快適になりました。
(各種AutopagerizeでSITEINFOの更新を行えば適応されると思います)

• アイテム: Google Realtime Search – データベース: AutoPagerize – wedata

思ったより地味ですが、こんな感じで使っています。
Google++ for Greasemonkeyを結構参考にしました。

ATNDのイベントページに最寄り駅情報の表示やGoogleカレンダーの登録ボタンを追加などをするGreasemonkeyスクリプトを書いてみました。 元ネタはATND++というものがあったのですが、メンテされてなかったので自分で修正(ATND++を適当に修正したもの — Gist)して使っていたのですが、そのままだとメンテしにくかったので最初から書き直してみました。

• Better ATND for Greasemonkey

機能としては以下のような機能が付いています。(2011-03-06)

• 最寄り駅情報の表示
• 最寄り駅をまとめた地図画像の表示
• Google Calendarへの登録ボタンの追加

Googleカレンダーへの登録時には、イベントページから場所や概要などの情報も自動で入力します(説明文は長すぎるとエラーになるので300文字ぐらいで切っています)

画像でみる機能

最寄り駅情報

Google Calendarの登録ボタン

Google Calendarの登録ページ

作った(使ってた)理由としては場所を言われてもピンとこない場合が多いのと、電車が主な移動手段であることが多いので、会場がどの駅に近いのかがわかると便利です。また参加してなくてもUstや後で資料を出してくれるイベントも多いので、忘れないように気になったイベントはGoogle Calendarに登録していました。最初はブックマークレット(ATNDのイベント画面にGoogleカレンダーへ予定を登録するボタンを追加するブックマークレット – 電脳戦士ハラキリ -SE道とは死ぬ事と見つけたり-)を使ってたのですが、少し面倒になったのでGreasemonkeyにその機能を入れました。
ATNDのリニューアルでicsリンクがでて、Google Calendarで読み込む事ができるのですが、icsを読み込むと”他のカレンダー”が増えるのであんまり好みじゃないので今まで通り登録ボタンにしました。

APIは以下の2つを使っています

• ATND API リファレンス
• SimpleAPI vol.2 – 最寄り駅Webサービス & 最寄り駅モバイル地図

両方ともjsonなどいろいろな形式ではいたりしてくれるので、手軽に使えて便利です。

Better ATND for Greasemonkey

http://userscripts.org/scripts/show/98456

better_atnd at master from azu/Greasemonkey – GitHub

https://github.com/azu/Greasemonkey/tree/master/better_atnd