April 5, 2008

form_debug_view.user.js

HTML Form の内容を見るための Greasemonkey スクリプトを書きました。
きっと役立つと思います。

ソース

form_debug_view.user.js

スクリーンショット

例えば Twitter のログインフォームを見てみると、

form_debug_view.user.js_2.png

こんな感じになります。

form_debug_view.user.js.png

February 29, 2008

show_cookie.user.js

左下のところに常に Cookie を表示しておくための Greasemonkey スクリプトです。
Web アプリの開発時とかに便利かもー、と思って作りました。

ソース

show_cookie.user.js

// ==UserScript==
// @name           show cookie
// @namespace      http://jugyo.org/
// @include        http://*
// ==/UserScript==

(function() {

  var content = document.createElement("div");
  content.innerHTML = document.cookie.split(/;[ ]*/).join('
');
  with (content.style) {
    fontFamily = "verdana, sans-serif";
    fontSize = "11px";
    textAlign = "left";
    margin = 0;
    padding = "4px";
    lineHeight = "15px";
    color = "black";
    backgroundColor = "gray";
    MozOpacity = 0.60;
    border = "none";
    position = "fixed";
    bottom = "0px";
    left = "0px";
    overflow = "auto";
  }
  document.body.appendChild(content);

})();

追記:
常に表示されているとうざいケースもあるかと思います。
以下はマウスオーバー時にのみ表示されるバージョンのソースです。

// ==UserScript==
// @name           show cookie
// @namespace      http://jugyo.org/
// @include        http://*
// ==/UserScript==

(function() {

  element_id = "show_cookie";

  function main() {
    var wrap = document.createElement("div");
    wrap.addEventListener("mouseover", show, false);
    wrap.addEventListener("mouseout", hide, false);
    with(wrap.style) {
      fontFamily = "verdana, sans-serif";
      fontSize = "12px";
      textAlign = "left";
      margin = 0;
      padding = "6px";
      lineHeight = "15px";
      color = "black";
      backgroundColor = "gray";
      MozOpacity = 0.90;
      border = "none";
      position = "fixed";
      bottom = "0px";
      left = "0px";
      overflow = "auto";
    }
    document.body.appendChild(wrap);

    var content = document.createElement("div");
    content.id = element_id;
    with (content.style) {
      display = "none";
    }
    content.innerHTML = document.cookie.split(/;[ ]*/).join('<br />');
    wrap.appendChild(content);
  }

  function show() {
    document.getElementById(element_id).style.display = "block";
  }

  function hide() {
    document.getElementById(element_id).style.display = "none";
  }

  main();

})();
December 13, 2007

hatebu_chart.js

あまり役に立ちそうにない Greasemonkey スクリプトをたまに作ってる jugyo です。
いや〜、忘年会シーズンですね。
道ばたで倒れている人を何人か見かけました。

さて、hatebu_chart.js という Greasemonkey スクリプトを作ったので公開します。
過去一ヶ月間の一日ごとのブックマーク数の推移をチャートで表示します。
Google Chart API を活用しました(便利!)。

ソース:
hatebu_chart.user.js

更新履歴:
1.1 - チャートに日付を表示するようにしました。さすがに日付が無いと不親切だと思ったので。
1.2 - 1月だけチャートが正常に表示されない(日付の計算ミスによる)バグを修正しました。(なんとも恥ずかしいバグでした。)

スクリーンショット:

画面右下の四角いとこにカーソルを合わせると…

こんな感じのが出てきます。

ていうかこれ作ってて思ったんですが、JavaScript の Date 型って気持ち悪いですね。
「1月から12月」が「0 から 11」で表現されるんですね(つまり1月は 0)。
知りませんでした。

November 23, 2007

show_refere.user.js

またまたくだらない Greasemonkey スクリプトを書いてしまいました。
リファラー(参照元)URL を表示します。
ただそれだけです。
もしかすると何かのときに役に立つかも。

ソース:
show_refere.user.js

スクリーンショット:

この四角いところにマウスカーソルを持っていくと…


じゃーん。

ていうか、リファラー URL って「document.referrer」で取得できるんですね。
さっき知りました。

November 20, 2007

make_link.user.js

リンクタグを書く手間を省いてくれる Greasemonkey スクリプトです。

ソース:
make_link.user.js

スクリーンショット:

感想:
ま、毎回ページの右隅に四角いのが出てくるのもいい加減うざったくなってくるしそれほど頻繁に使うようなものでもないとも思いますが、思いついたものはとりあえずなんでも(すぐに作れるものであれば)作ってみないと気が済まないので作った次第です。

November 16, 2007

tiwt.user.js

Twitter にポストするための Greasemonkey スクリプトを作りました。

とりいそぎ公開します。

ソース:
tiwt.user.js

更新履歴:
1.04 - インジケータの画像をbase64エンコードしてソースに埋め込むようにしました。
1.03 - textarea の value に デフォルトで url をセットするのをやめました。
1.02 - z-index を 1 にしました。インジケーターの GIF を変更しました。
1.01 - ポスト時にインジケーターを表示するようにしました。

使用方法:
画面右上に四角いのが現れます。

こいつにマウスカーソルを合わせると以下のような入力フィールドが出現します。

あとは適当になんか書いてポストしてください。
ちなみに、初回ポスト時は BASIC 認証のためのユーザーIDとパスワードを入力する必要があります。

思い立ったらすぐにポストできるので便利だと思いますよ。
いちいちウィンドウやタブを切り替える手間も省けますし。
ていうか、僕自身が欲しかったものを作っただけなんですけどね。

November 14, 2007

habocovi.user.js

はてなブックマークのコメントを表示する Greasemonkey スクリプトを作りました。
特に凝ったことはしてませんが、見た目にこだわりました。

ソース:
habocovi.user.js

更新履歴:
1.05 - table のスタイルを修正(width を 600px に)。
1.04 - z-index を 1 にしました。
1.03 - はてブ数がゼロのときに「0」と表示されるように修正しました(だんだんソースが汚くなってきました)。
1.02 - さらに表示周りのこまごました修正を行いました。
1.01 - 表示周りのこまごました修正を行いました。

使用方法:
画面の右下に小さい四角が現れます。

hbcv 1

これの上にマウスカーソルをのせると「はてブコメント」が読み込まれて表示されます。

hbcv 2

マウスカーソルをのせるまでサーバー(はてなの)にはアクセスしに行かないという動作が地球に優しくて良いと思います。

Greasemonkey って意外と簡単で楽しいですね。

参考: worris’ works - Greasemonkey - はてなブックマークコメントビューワ