Web scratch

Posts Tagged ‘Greasemonkey’

Post Now browsing to Twitterで設定画面がうまく開かない現象が起きていたみたいで、以前はGM_configというGUI用のライブラリを使っていたのですが、今回usconfigに移行しました。
なので、今まで設定画面が開かないなどの現象が起きていた人はインストールしなおしてください。
(おかしいときは ツール→Greasemonkey(もしくはステータスバーの猿アイコン)→ユーザースクリプトの管理→Post Now browsing to Twitterを選択→✓関連付けられた設定も削除にチェック→アンインストール → インストール)

• Post Now browsing to Twitter for Greasemonkey

こっからはGM_configからUSConfigへ移行方法について。

• Greasemonkeyスクリプトに設定画面を追加するライブラリ USConfig – Alone Like a Rhinoceros Horn
• Usconfig のページ一覧 – GitHub

GM_configは前から少し不安定な感じがあったので、同種のライブラリであるUSConfigに変えました。
GM_configとUSConfigの違いを簡単に挙げてみると(移行するに当たっての変更点)

まずはGUIの書き方が別物なので、そこはすべて書き直す必要があります。

GM_configの場合

GM_config.init('Configuration for Post Now browsing to Twitter', {
    'defaultTag': {
        'label': 'Prefix:',
        'type': 'text',
        'default':'Now browsing: '
    },
    'isSelection': {
        'label': 'Use selectionQuote',
        'type': 'checkbox',
        'default':true
    },
    'ShortURL': {
        'label': 'Short URL',
        'type': 'select',
        'options': {
            'bit.ly': 'bit.ly',
            'j.mp': 'j.mp',
            'goo.gl': 'goo.gl',
            'is.gd': 'is.gd',
            'tinyurl.com': 'tinyurl.com'
        },
        'default':'bit.ly'
    },
    'ShortCutKey': {
        'label': 'ShortcutKey:',
        'type': 'text',
        'default':'CS-Enter'
    },
    'PostWithCtrl': {
        'label': 'Post with Ctrl+Enter:',
        'type': 'checkbox',
        'default': false
    },
    'bitlyUserName': {
        'section': ['bit.ly'],
        'label': 'bit.ly Username:',
        'type': 'text',
    'default':
        'remiko'
    },
    'bitlyAPIKey': {
        'label': 'bit.ly APIKey :',
        'type': 'text',
        'default': 'R_fa2240c646c07b2091x'
    }
}, configStyle , {
    open: function () {
        // ショートカットの入力補助
        var iframe = document.getElementById("GM_config");
        var iframeDoc = iframe.contentDocument;
        iframeDoc.getElementById("field_ShortCutKey").addEventListener('keydown', function (evt) {
            evt.preventDefault();
            this.value = shortcut.get(evt);
        }, false);
        // OAuth Setting
        if (TWOauth.isAuthorize()) {
            TWOauth.injectToConfig();
        } else {
            XHRloading.createText(iframeDoc);
            TWOauth.getRequestToken(TWOauth.injectToConfig);
        }
    },
    save: function () {

    } // reload the page when configuration was changed
});

USConfigの場合

Config.define('usc_basic', function() {
	with (this.builder) {
		var shortURL_opt = [
			'bit.ly',
			'j.mp',
			'goo.gl',
			'is.gd',
			'tinyurl.com'
		]
		dialog(
			"Post Now browsing to Twitter Settings",
			{ width: 600, height: 700 },

				section(
						"User options",
						"Behavior/keyboard Preference",
						grid(
								text("Prefix:", 'defaultTag', "Now browsing: ", { size: 20 }), '\n',
								checkbox("Use selection quote", 'isSelection', true), '\n',
								checkbox("Post with Ctrl+Enter", 'PostWithCtrl', false), '\n',
								text("ShortcutKey:", 'ShortCutKey', "CS-Enter", { size: 16 })
								)
						),
				section(
						"Short URL options",
						"select used Short URL service",

						grid(
								select("Short URL Services", 'ShortURL', shortURL_opt, "bit.ly"), '\n',
								text("bit.ly Username:", 'bitlyUserName', "remiko"), '\n',
								text("bit.ly APIKey :", 'bitlyAPIKey', 'R_fa2240c646c07b2091c6bc6d109089ef', { size: 30 })
								)
						),
				section(
						"OAuth Authorization",
						"Sign in with Twitter"
						)
				);
	}
}, {
	saveKey: 'GM_config',
	aftersave: function() {

	},
	afteropen : function() {
		// ショートカットの入力補助
		var iframeDoc = this.frame.contentDocument;
		iframeDoc.getElementById("control_ShortCutKey").addEventListener('keydown', function (evt) {
			evt.preventDefault();
			this.value = shortcut.get(evt);
		}, false);
		// OAuth Setting
		if (TWOauth.isAuthorize()) {
			TWOauth.injectToConfig();
		} else {
			XHRloading.createText(iframeDoc);
			TWOauth.getRequestToken(TWOauth.injectToConfig);
		}
	}
});

二つを見比べると、GM_configはオブジェクトを定義する感じだけど、USConfigはその都度関数を呼び出す感じになってる。レイアウトの自由度はUSConfigの方が上ですが、ちょっとインデント管理が大変で書きにくい。
またUSConfigではselectに連想配列っぽいオブジェクトを使えないので、配列に直す必要があります。
後、Text() のデフォルトサイズが少し小さいので第4引数で属性にsizeを追加してます。
最後の空sectionはafteropen時に書き換えるようにしてるので、本質とはあんまり関係ないです。
USConfigの方がConfig.define()でのコールバック(afteropenなど)が豊富なので、細かい制御がしやすいと思います。
そのコードバックで設定画面のiframeをとるにはthis.frameとすればよいみたいです。

• Twitter / h1mesuke: @azu_re はじめまして。afteropen と …

次に設定情報の取り出し方
GM_configがそのつど、keyを指定してvalueを取り出す感じだったのが(GreasemonkeyのGM_getvalueに近い)

GM_config.get(key);// value

USConfigでは設定全部をまとめたオブジェクトを最初にロードする感じになっています

var settings = Config.load();
settings.key;// value

また、設定を保存するキーの初期値はGM_configと違うのでそのまま移行させるためにはsaveKeyを’GM_config’にします。

Config.define('dialog_name', function() { with (this.builder) {
  dialog(...);
}}, {
  saveKey: 'GM_config',
  aftersave: function() {...},
});

後はGM_config.*()がConfig.*()など細かい違いあるので、それを手直しすれば移行できました。
(GM_config.close()がConfig.remove()だったのが少しはまった)

WebStorm/PhpStormのEAP build 98.458でJavaScript Librariesのスコープを決定できる機能が追加されました。

• WebStorm & PhpStorm Blog » Blog Archive » Working with JavaScript Libraries in PhpStorm & WebStorm

なので、この方法が使えるのはWebStorm & PhpStorm 2.0以上(EAPビルド)の場合のみです。

Read the rest of this entry »

Firebugを拡張するアドオンを紹介

Firecookie

クッキーの編集や削除をする
クッキーの変更に反応してログを吐いてくれる

Software is hard | Firecookie

NetExport

通信タブの記録をHTTP Archive 1.1 (HAR)形式で保存
通信タブの表示を画像としてクリップボードにコピー

Firebug Autocompleter

FirebugのCommand EditorにJavaScriptのコード補完機能をつける。
(Firebugにもデフォルトで補完機能はあるが、一行Command Lineにしか反応しない)

Firescroll for Firebug

“Auto-Scroll” 自動でFirebugのログをスクロール
“Log to top” Firebugのログで上が最新になるようにするTweak

Widerbug

Firebugを縦置きにするTweak

Firebugmonkey

Greasemonkeyをスクリプトタブでデバッグする
UxU（うず）のように内部でGreasemonkey APIのエミュレートをしてる
Greasemonkeyはスクリプトタブに表示されずブレークポイントをうつなどのデバッガーを使ったデバッグが行えない
デバッガーでデバッグできない理由はevalInSandboxで実行されていて、evalInSandboxはC++実装だから。(多分Firebugでも同じ)
Greasemonkey のユーザスクリプトは Venkman the JavaScript debugger でデバッグできない：experiment：So-net blog

JavaScript Deminifier

Firebugのスクリプトタブで表示するJavaScriptを整形表示する
整形表示した状態でブレークポイントを打てるので圧縮されたファイルでもブレークできる
IE9 PP6 F12 開発者ツールのJavaScript整形みたいな機能
整形はjs-beautifyを使用、FireRainbowと競合する

FireRainbow

FirebugのスクリプトタブでJavaScriptのシンタックスハイライト表示を行う
HTML、CSSも一応対応

Eventbug

要素に適当されているイベントハンドラを表示する
clickしたらどの関数が実行されるかなどが分かる
(バージョンで動かない事が多い)

FireQuery

jQuery言語の表現をFirebugでも認識できるようにする
jQueryがないページでもCommand LineからjQueryを使える要にする
jQuery Lintの有効化

YSlow

ページ表示にかかる時間を計測
ページのボトルネックを調査

Firepicker

FirebugのCSSタブでカラーピッカーを使えるようにする

FireXPath

FirebugにXPathとCSSセレクタの確認ができるタブを追加する

Firequark

Firebugに選択要素のCSSセレクタをコピーできるようにするアドオン
(デフォルトはXPathしかないのでね)

CodeBurner

FirebugにHTML+CSSのリファレンスを追加する
他のソフトウェア向けにも出している

Adobe BrowserLab for Firebug

Firebugで加えた一時的な変更をAdobe BrowserLabを使ってプレビューする。
ページを変更してスクリーンショットで各ブラウザ表示を確認できる。

Pixel Perfect

指定した画像をFirefox上に重ねて表示してデザインがずれてないかを確認する

Arboreal

DOMツリーを視覚化して表示する
似たようなものとしてはView Source Chart

Illumination for Developers

ExtJSやjQuery UIなどのコンポーネントやデータの状態を表示する
現在はExt JSとSencha Touchに対応してて、有料で正式リリースする
Illumination for Developers によるとクロスプラットフォームを目指している

XRefresh

ファイルを監視してエディタで編集されたらブラウザをリロードする
クロスプラットフォーム対応

CSS Usage

読み込んだCSSで、それぞれのstyleが閲覧ページ内で本当に適用されているかどうか確認する
使われてないstyleを見つける

Firefocus

閲覧ページのどの要素にフォーカスがあるのかをHTMLタブに表示する

FireFile

サーバーサイドにスクリプトを用意(FireFile Instructions)することで、Firebugで変更した内容を反映させる事ができる。
また、Firebugで変更を反映したファイルをダウンロードすることができる。

FireUnit

Firebugで使えるユニットテスト
何か放置されてるような気がする

Log to Netpanel

JavaScriptから通信タブにマーカーを挿入可能になる
Teun.ToString(): Announcing Log to Netpanel – by Teun Duynstee

Omnibug

Omniture、WebTrends、Google Analytics、Urchin、Moniforceなどの計測データを確認。
utm_*などのアクセス解析のログを見やすく表示する

FireLogger

Python、PHP、RubyからFirebugへログを吐く

Flashbug

FlashのログをFirebugに表示することができる。
1.6からAMF dataにも対応

FlashFirebug

AS側にO-Mindsを仕込んでおくことでFirebugを使ったデバッグをできるようにする

書いてる途中でWikiがあるのを思い出して、大体被ってた気がしたけど問題ない。

Firebug Extensions – FirebugWiki

http://getfirebug.com/wiki/index.php/Firebug_Extensions

Twitterを検索するサービス、自分のTweets、Favを検索するサービスをまとめてみた。

まずはTwitterを検索するサービス

• Twitter Search
  Twitter公式の検索サービス。最も反映が早いけど、日本語とかの検索は不向き
  一週間分のデータしか検索できません。
• Replay
  GoogleによるTwitterのアーカイブ検索です。
  反映もとても早く、過去の内容も検索でき、日本語もGoogleのエンジンで検索するので多少曖昧でも引っかかります。
  誰か知らないけど、こういう事言ってたという感じのものを検索する場合はReplayが一番期待に添えると思います。
  適当に作ったFirefoxの検索プラグイン(ChromeとIEも検索サイトに追加できるみたい)はここから
• twitter検索(yats)
  日本語に絞ったTwitter検索です。
  user:オプションや-noiseオプションなどを使う事でかなり絞ってかつ日本語圏の発言が検索できるのでとても重宝する。
  情報の精度が高いという感じなのでTwitter search(ja) result on Google for Greasemonkeyを使ったりしてよく利用しています。

自分の発言やお気に入りを検索するサービス

• Twilog – Twitterのつぶやきをブログ形式で保存
  自分の発言をアーカイブできるサービス。
  ログインすることで公式ReTweetしたものもアーカイブできるので、発言+RTが保存できます
  • twilog date linker for Greasemonkey
    検索結果に日付別へ飛ぶリンクをつけます
• favolog – Twitterのお気に入りをらくらく管理
  TwilogのFavバージョン。
  Favmemoと同じくタグ編集機能があります。
  基本的な作りはTwilogと同じなので、自分以外のユーザーへも公開できます。
• Favmemo
  自分のお気に入り(Fav)したものを検索できるサービス
  過去をさかのぼって、お気に入りしたものも取り込んでくれます。
  お気に入りにタグをつけて管理することもできるのでこれからも期待。
  検索がAjaxで行われるので体感的に早く感じます。
  Favmemoの検索プラグインはこちらから
• ふぁぼるっく
  お気に入りしたものやお気に入りされたものを検索できる。(ふぁぼったーにあったような感じ)
  ただ取りこぼしもあるので完璧ではない。

Favmemoができた事で、Twitterでの事は大体アーカイブでき検索できる環境が整った気がします。
FavstarとかふぁぼったーとかTwistarは通常は検索できないので今回は除外した。

では良き検索生活を。

Greasemonkeyはとても便利ですが、使用してないけどアンインストールするのが面倒で使わないスクリプトが貯まっていったりします。使わないスクリプトが貯まると猿アイコンを右クリックしたときに画面いっぱいになったり、管理画面が見づらくなったりしてとても邪魔になります。
そこで、今無効となっているスクリプトを適当なフォルダに移動して、Greasemonkeyスクリプトを整理するNILScriptを書いてみました。
(タイトルが削除とかなってますが、実際は移動させるだけ)

使い方

最初にgm_scriptsをバックアップして下さい(おかしな動作をして失敗しても大丈夫なように)
Firefoxが起動してないときに実行して下さい。

• ngスクリプト(remove_noused_Greasemonkey.ng)をダウンロード
• ngスクリプトをエディタで開いて、 var saveDirPath = “C:\\path\\to\\dir\\”; 移動先のディレクトリパスを書き換える
• ngスクリプトをFirefoxのプロファイルフォルダにあるgm_scriptsフォルダ内に置きます。
• Firefoxが起動してるならばFirefoxを終了しましょう
• 必ずgm_scriptsをバックアップしてからngスクリプトを実行しましょう

ngスクリプトの実行方法はNILScriptの使い方と書き方やreadme.txtを見ると良いでしょう。
一応ログっぽいのも表示してるのでダブルクリック実行が手軽でしょう。
完了すると”無効になっているスクリプト m/n を移動しました”というメッセージが出て終わりです。

猿アイコンのコンテキストメニューがスッキリして気持ち軽くなりました(実際に動作が軽くなるかは知りません)
各Greasemonkeyがpref.jsに保存していた情報は消えてないので、完璧に綺麗になったわけではありません。
戻すときはバックアップしていたものを上書きすればもどせると思います。

utilityTools/Greasemonkey at master from azu/NILScript – GitHub

https://github.com/azu/NILScript/tree/master/utilityTools/Greasemonkey

NILScript

http://lukewarm.s151.xrea.com/nilscript.html

最近になってSlideShareではスライドの下部に広告が出るようになったので、それを自動で閉じて非表示にするGreasemonkeyです。

• slideshare ad close for Greasemonkey

広告の閉じるx部分を自動でクリックする事で消しています。
全く興味のない広告をコンテンツを覆うように表示する広告は嫌いです。
UstreamのFlash動画内広告を消す方法 | Web scratchとかでも同じような方式広告が出ていますが、何度もでてきてウイルスみたいだ。
CNETとかマイコミジャーナルとかあの辺の広告も理解できない。

最近使ってたりするJavaScript関係のツールまとめてみた。
主にWebサービスです。

• Global is the new private
  JavaScriptライブラリの名前空間汚染をチェックするツール。
  元々載ってるもの以外でもAnalyze your own scripts!から調査したいライブラリを追加できる。
• jsFiddle
  ブラウザ上で HTML / CSS / JavaScript の実行結果を表示できる。
  Embedコードもあるので、ブログにjsやCSSなどを載っけるのに便利。
  エディタ機能も整形、シンタックスハイライトしてくれるので使いやすい。
  HTML5のコードを使うにはInfoからDTDを変更してから使う。
  類似:MooShell
• Gist – GitHub
  gistです。コードスニペット共有サービスです。
  Greasemonkey貼るときgist fill in fileName automatically for Greasemonkeyを使うと楽です。
• jsPerf
  benchmark.jsを使った比較ツール。JavaScriptのスニペットを登録して処理時間を比較できる。
  実行結果がサイトに記録されるので、他人がやった結果がどんどん貯まるのも良い点。
• HiFi Regex Tester
  JavaScriptの正規表現を確認できるツール。
  類似:RegExpChecker.js
  正規表現関係で、正規表現をオートマトン的に図示してくれるstrfriendも便利です。
• Pretty Diff
  JavaScript、CSS、CSV、HTMLのコードを整形、圧縮、Diffなどができる。
  いろんなものを詰め込んだ感じのツール
  JavaScriptの整形自体はJS Beautifierが好き(Pretty Diffでも使ってる)
• Experimentation Harness
  DOMイベントの調査ツール。
  DOMイベントが網羅的に載ってるので確認に使ったりする。
• Keycode library test
  キーボードのキーコード調査ツール。
  修飾キーとの組み合わせにも対応してます。(各ブラウザのキーコード表[JavaScript])
• Online JSON Viewer
  JSONビューアー。ツリー表示や整形機能。
  Firebugとかでみたりもするけど、UIが好き。
• エンコードマニアックス – 各種エンコードやハッシュを一発作成
  エンコード/デコード結果がまとめて見られるので結構使います。
  汎用的に使えます。
• Unicode code converter [ishida >> utilities]
  同じくエンコード。数値文字参照とかJavaScriptのエスケープ。
  少し特殊っぽいの多め
• XPath検索バー (for Mozilla/Firefox) | 東京嫉妬
  XPathのチェックブックマークレット
  ちょっとだけいじった気がするバージョン : XPath Tester
  Firefoxの拡張だとxpath finderがシンプルで使いやすいチェックツール。
• XPathGenerator – Hatena::Let
  インスペクタからクリックで要素のXpathを生成するブックマークレット

2010.8月末にTwitterのBASIC認証が終わったので、今までのまたニコぐりもんは動かなくなっていると思います。
なのでOAuth認証に対応してるまたニコニコ見てるを作ってみました。(作ったのは結構前だけどね)

• mataniconicomiteru for Greasemonkey

使用方法

まずはニコニコ動画の動画ページでステータスバーのGreasemonkeyアイコンを右クリック→ユーザースクリプトコマンドからOAuth認証をする必要があります。

コマンドを実行するとOAuth認証のパネルが出てくるので、ボタンからTwitterへ行きOAuth認証してPINコードをコピーしてテキストエリアに入力すると準備完了です。

認証済みだったら動画タイトル部分にまたニコのボタンが出るので、それをクリックしてコメントを入力してまたボタンを押せばTwitterへ投稿できます。(nico.msのURLを使って投稿します。

オリジナルの機能としてはコメント入力欄の右側に文字数のカウンターが付いてるぐらいです。

mataniconicomiteru for Greasemonkey

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

以前、GreasemonkeyにGrowlのような通知を呼ぶ機能を加える「Dbus Notify」 | Web scratchでGreasemonkeyから使える機能を増やせたら楽しそうと書いたと書きましたが、calloutのソースを参考にGreasemonkeyスクリプトから使える関数を追加するuseChrome.jsを書いてみました。

このuserChrome.jsを読み込むと、

fbug
Clipboard.get
Clipboard.set

などのメソッドがGreasemonkeyスクリプトから使えるようになります。
fbugはconsole.logと同じ動作ですが、Firebugのウィンドウを開いていない状態(Firebugがオフ)でもFirebugのウィンドウを開いてからlogを出してくれる関数です。(元ネタはxqjs)
Clipboardの方はjetpack prototypeからのコピペなのであんまり確認してません。

当たり前ですがこのuseChrome.jsをインストールしてない人の環境ではfbugなどの関数は使えないため、デバッグ目的か自分用のGreasemonkeyに使用する感じになると思います。
以下のようにデバッグ時のみ動く関数でラップしておけば、配布の際にDEBUG = false;とするだけでいいので楽かも知れません。

var DEBUG = true;

    log("なんとか");
    // DEBUG - http://gist.github.com/428596
    function log() {
        if ( typeof DEBUG != 'undefined' && DEBUG ) {
            fbug.apply(this, arguments);
        }
    }

何かもっと便利なデバッグ関数とか作れそうな気がします。
多分Greasemonkeyスクリプトからしか動かないようにできているので(あんまり自信ない)、そこまで危険な事は起こらないかと思いますが安全は保証できないので自己責任でというテンプレを入れておく。

gist: 428596 – Greasemonkeyから使える関数を追加するuserChrome.js- GitHub

http://gist.github.com/428596

Post Now browsing to TwitterをOAuth認証に対応しました | Web scratchでGreasemonkeyスクリプトの「Post Now browsing to Twitter」をOAuth認証に対応したものを作りました。
OAuthのJavaScript実装はいくつかあるみたいですがGreasemonkeyで使う感じになってるものは無かったみたいなので、OAuth.jsを使ったtwitterでのOAuth認証を手助けするラッパーみたいなものを書きました。

xAuthを使えば楽な気もしますがブラウザベースのものはxAuthを使わずにOAuthを使ってねとの事です

大部分は

• TwitterクライアントのOAuth対応(JavaScript編) | tomatomax.net
• Twitter API を OAuth で認証するスクリプトを 0 から書いてみた – trial and error
• H.Basic認証/OAuth認証 (陽昇れども地の底に光届かず)

を参考に書きました。
何となく分かるかも知れませんが、今回扱うアプリはApplication Typeがclientタイプのものです。

Read the rest of this entry »