Posts Tagged ‘Firefox’

GreasemonkeyからScriptishへ環境設定を移行する

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にリネームして使うなどしてください。
不完全かもしれないので、保証はできません。

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

これを期にGreasemonkeyスクリプトのファイル自体をDropboxで共有しようと思ったので、移行手順の1の時にDropboxにgm_scriptsフォルダを移して、プロファイルフォルダにscriptish_scriptsへのシンボリックリンクを作りました。
Windowsだとmklinkとかコマンドラインがややこしいので、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でcan’t wrap XML objectsというエラーが出る件について

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’));して使うなどでもいいと思います。

もしくは下のように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');
}

書き換えの参考

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

参考

Google検索でのuserContent.cssの設定やGreasemonkeyなど

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

まずはGreasemonkeyから

と、このぐらいで思ったより、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++ for Greasemonkeyを結構参考にしました。

twicliの設定とプラグインのメモ

ずっとメインで使っているTwitterブラウザクライアントのtwicliの設定メモ

twicliはブラウザで動くのでUnified Sidebarを使ってサイドバーに縦置きタブバーと一緒に表示しています。
サイドバーへの表示はブックマークは面倒なのでCustom Buttonsのボタンとしておいています。

twiclitwicli

次はCSSの設定、CSSは基本的に最小限で無駄なものを消したりするぐらいです。

.uname{
    display:none;
}
#counter{
    font-size: 9pt!important;
}
/* Removeボタン */
#user_info > input{
    display:none;

}
/* shortcut.js */
.selected {
    background-color: #DDD !important
}

Removeボタンを消してるのはプラグインの関係で誤爆を防ぐためです。(通常は確認ダイアログがでるので誤爆しないかな)
次にプラグインの設定

ssl.js
regexp.js
lists.js
shortcutkey.js
search.js
search2.js
followers.js
shorten_url.js
resolve_url.js
translate.js
scroll.js
thumbnail.js
geomap.js
tweet_url_reply.js

https://gist.github.com/510112.txt#multi-users.js


https://gist.github.com/567983.txt#twicli_post_canceler.js


https://gist.github.com/655300.txt#switchViewedSearches.js

data:text/javascript,var fst=$('fst');fst.focus=fst.select=confirm=Array;

URLじゃないの部分はデフォルトのプラグインなので説明を省きますが、最後の4つが使ってるプラグインです。

一度タイムラインを表示したことのあるユーザーのタイムラインを簡単に再表示するプラグイン

ポストをした際に5秒以内なら中止できるボタンを出す

ハッシュタグや検索結果のタブを一つのタブにまとめる。
サイドバーで使うと狭いので、まとめるために使ってる。

最後のデータスキームURIとなってる部分はわざわざjsファイルとして読み込ませるほど長くはないので直接書いています。

data:text/javascript,var fst=$('fst');fst.focus=fst.select=confirm=Array;

これは、twicliはデフォルトだとポスト後に入力フォーム(fst)へのフォーカスしてしまって、サイドバーで使っているとフォーカスが奪われるのでかなり邪魔になります。なので、focusやselectを潰して、またRTなどで確認ダイアログが面倒になっているので同じように潰しています。(Removeボタンも確認ダイアログがなくなるので、RemoveボタンはCSSで非表示にしています)

他のTwicliプラグインはtwicli plugins – GitHubにまとめられているそうです。

Pickup Patternはそこまで使ってないでの省略。

twicliはJavaScriptで拡張できて、ブラウザで動くのでどこでも使える感じで便利。
みんなもっと設定公開するといいよ

twicli – A Web Browser-Based Lightweight Twitter Client
http://www.geocities.jp/twicli/

ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ

JavaScriptやWeb開発に興味を持っている人はブラウザ周りの新しい情報も知っておくと良い場合も多いです。
なのでブラウザ周りに絞ってブラウザ別のブログなどを紹介。

Internet Explorer(IE)

Mozilla(Firefox)

  • Bit Stampede
    MDCの更新情報を書かれています。
    Firefoxの最新情報が把握しやすいので是非購読しておくといいです。
  • A Better Project@はてなダイアリー
    MDCのローカライズ情報を書かれています。
    MDC-ja 通信など最近の起きたことが分かりやすいです。
  • Mozilla Hacks – the Web developer blog
    Mozillaについてだけではなく最新の技術などについても扱っているのでとても重要です。
  • Mozilla Flux
    Firefox/Mozillaについてについて、幅広い情報から書かれているブログ。
    情報をしっかり取り込んでから書かれていると思われるため、内容も深いものとなっていてとてもいい。
    筆者id:Rockridge のはてなブックマークもおすすめです。
  • Mozilla Developer Street (modest)
    “Mozilla 関連の開発者や利用者が集まり 知識・アイディア の共有とコミュニケーションの場”
    アドオン開発者向けの情報やMozilla Add-ons Blogの翻訳記事などが掲載されています。
  • Mozilla Japan ブログ
    名前の通りです。
  • MozillaZine.jp
    Mozilla関係のリリース情報を扱っています。
  • Scene Side B
    Firefoxのリリース情報やbug fixの情報を書かれています。
    どのような変更が行われたかがまとめて見られます。
  • Firefox Hacks 翻訳日記/ウェブリブログ
    Mozilla WikiなどからのFirefoxについて情報を書かれています。
  • もずはっく日記 – WebStudio
    “Mozilla Japanのプロダクトへの貢献を中心に書いています”
    最近はIME周りのお話が多いです
  • alice0775のファイル置き場 – Yahoo!ジオシティーズ
    Friends of the Treeに掲載されるほど多くの貢献をされている方です。
    bugzillaの情報をメインに載せています。またuserChrome.jsスクリプトを多数書かれていることでも知られています。
  • @dynamitter
    Mozilla Japanの浅井さんのアカウントです。
    Firefoxだけではなく、W3Cなどの仕様に関しての情報も多いので参考になると思います。

他にもMozilla本家にはセキュリティとかいろいろブログがあったと思います。
(なのでちょっと本家の方は省き気味です)

Webkit系(Chrome,Safari)

OperaはきっとOperaを愛する人がやってくれるはずです…
追記: Opera版 Operaの最新情報を知るために、Web開発者が読んでおくべきブログ – あまたの何かしら。

その他

いろいろなサイト(主にブログ)を乗せましたが、一個づつRSS購読するのは面倒だという人は、LDRならこのページのリンクをまとめて購読する機能があるのでそれを利用するといいですよ。

まとめて購読機能は、リンク集から一括登録できて便利 – livedoor Reader 開発日誌

おまけ

Planetシリーズ
原点はよくわかりませんが、様々なFeedを集めてまとめたアグリゲートブログのようです。
(ちょっと強欲すぎるので、Planet Chromiumのような公式系でまとまったもの以外は破綻する感じがします)

etc..

おわり

他にこのブログ忘れちゃだめだなどのご指摘があったらお願いします。

Google Tasksをサイドバーに表示するボタン作ってみた

Custom Buttonsで、Google Tasksをサイドバーに表示するボタンを作ってみました。
いつもはGoogle の公式 ToDo リスト ガジェットを使ってサブのTodoしてGoogle Tasksを使っています。
操作が軽快でツリー上にTodoを書いていけるので直ぐに消化するタイプのTodoに向いていると思います。

上記のボタンをクリックしてインストールできます。

アイコンはGoogle TasksのFluid用アイコン作った – ( ノ・ω・)ノ⌒○・。から拝借しました。

サイトの最終更新日をステータスバーに表示するアドオン「Google Date」

よくTwitterやSBMなどからURLに飛んで、それが書かれたのが結構昔だったりして誤解を生むことがあったりします。
なのでそのサイトの最終更新日を直ぐに確認できるようにした方がいいのですが、意外と日付が書いてないサイトも多いです。
そこでGoogle Dateを使うと、Googleのクロールによる更新日をステータスバーに表示することができます。

元々はGoogle検索の結果に日付を表示するアドオンだった気がしますが、いつの間にかサイト内でも更新日を表示する機能がついていました。

一応、仕組みの方が気になったのでコードを見てみると

doGetDate: function() {
    var doc = gBrowser.selectedTab.linkedBrowser.contentDocument;
    if (doc.location.href != "about:blank" && doc.location.href.match(/^http:\/\//i)) {
        if (typeof this.reqUrl[doc.location.href] != "undefined") {
            document.getElementById("googledateStatusDate").value = this.reqUrl[doc.location.href];
        } else {
            var uri;
            if (this.reqCnt % 2 == 0) {
                uri = "http://www.google.co.jp/search?num=1&tbs=qdr%3Ay15&q=site%3A" + encodeURIComponent(doc.location.href);
            } else {
                uri = "http://www.google.com/search?num=1&tbs=qdr%3Ay15&q=site%3A" + encodeURIComponent(doc.location.href);
            }
            this.reqCnt++;
            var httpOj = new XMLHttpRequest();
            httpOj.open('GET', uri);
            httpOj.onreadystatechange = function() {
                if (httpOj.readyState == 4 && (httpOj.status == 200 || httpOj.status == 304)) {
                    var str = httpOj.responseText.match(/<span class="f std">.*?<\/span>/i)[0].replace(/<\/?[^>]+>/gi, "");
                    document.getElementById("googledateStatusDate").value = str;
                    googleDateHttpRequestObserver.reqUrl[doc.location.href] = str;
                }
            }
            httpOj.send(null);
        }
    }
}

site:http://efcl.info/2011/0218/res2272 – Google 検索みたいな感じでサイト内検索の検索結果から日付部分を正規表現で切り取ってる感じでした。
Googleにクロールされてないサイトでは日付取得ができませんが、日付の精度自体は使ってて問題ない感じになること多いのでとても便利です。

Google Date :: Add-ons for Firefox
https://addons.mozilla.org/ja/firefox/addon/google-date/

Mozilla勉強会@東京 5thで「世界のJavaScript情報を読もう」という発表をしました

Mozilla 勉強会@東京 5thでのLT枠で「世界のJavaScript情報を読もう」というタイトルで発表してきましたので、その補足などの記事。
以下が発表に使ったスライドとなります。

Read the rest of this entry »

ThinkPad USB トラックポイントキーボードを購入した


レノボ・ジャパン ThinkPad USB トラックポイントキーボード(日本語) 55Y9024を購入した。

Firefoxでセンターボタンによるスクロールを行うおうとすると検索バーに行ってしまうので、keyconfigを使ってCtrl+Kのショートカットを削除した。
後ついでにabout:configでui.trackpoint_hack.enabledを1にした。

キー配置

Fnキーが左下にあるのでCtrl時にものすごく誤爆してしまうので、CapsキーをCtrlとして使うようにしてる。
それと無変換をIME OFF、変換をIME ONにしてる、使わない半角/全角はとりあえずdeleteキーにしたけど使わないかも。

後はカタカナ/ひらがなキーは↓、右Altは↑という配置にしてる。
Thinkpadキーボードには戻る、進むボタンがあるみたいだけど使わないと思うからこれをどうかしたいかも。

キーを打った感じがちゃんとあるので値段の割にはいい感じ。
トラックポイントはイマイチ使い切れてないので、慣れれば便利そう。

8th way to explore the world: 新型ThinkPad USBキーボード
http://8thway.blogspot.com/2009/09/thinkpad-usb.html

JavaScriptからメモリ情報を取得する方法

JavaScriptにおいてメモリ管理は基本的にエンジン任せなのであまり意識することは無いかもしれませんが、メモリリークの調査やパフォーマンスの実験のためにメモリ情報をJavaScriptから扱いたいときがあると思います。

Read the rest of this entry »

プロフィール: azu(アズ)
Firefoxの事やソフトウェアの紹介や使い道、Greasemonkeyの作成
  • OS:Windows Vista, 7
  • ブラウザ:Firefox
  • Twitterのアカウントはこちら
  • azu_re
  • メールアドレス(Twitterの方が確実)
  • info@ドメイン名
リンク