6月
01
2011
2

[α版]はてブエントリーページを旧仕様っぽくする Greasemonkey

はてブのエントリーページを旧仕様っぽくする Greasemonkey 書きました。
まだ超α版なので、user.js ファイルでは置きません。
Chrome でしか確認してないです。まあ Firefox でも動くんじゃないかな?たぶん。

// ==UserScript==
// @name         Hatebu Entry Page Downgrader
// @namespace    http://www.otchy.net/
// @version      0.0.1
// @include      http://b.hatena.ne.jp/entry*
// ==/UserScript==

(function (callback) {
    var script = document.createElement("script");
    script.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js");
    script.addEventListener('load', function() {
        var script = document.createElement("script");
        script.textContent = "(" + callback.toString() + ")();";
        document.body.appendChild(script);
    }, false);
    document.body.appendChild(script);
})(function() {
    var isMore = (location.href.indexOf('mode=more') >= 0);
    if (!isMore) {
        var iframe = $('<iframe />');
        iframe.hide();
        $(document.body).append(iframe);
        var href = $('#more-link a').attr('href');
        iframe.attr('src', href);
    } else {
        var pBody = $(parent.document.body);
        var iBody = $(document.body);
        var bk = iBody.find('#new-bookmarks');
        pBody.find('#new-bookmarks').html(bk.html());
        pBody.find('ul.bookmark-list li').css({'padding': '5px 0px 5px 30px'}).find('img.profile-image').css({'width': '16px', 'height': '16px', 'margin-left': '-20px'});
        var scored = pBody.find('#scored-bookmarks');
        var sToggle = $('<span />').toggle(function() {
            scored.find('.bookmark-list').hide();
            $(this).text('[開く]');
        }, function() {
            scored.find('.bookmark-list').show();
            $(this).text('[閉じる]');
        });
        scored.find('h4.entry-page-main-subtitle .inner').append(sToggle);
        sToggle.css({'cursor': 'pointer'}).click();
    }
});

出来る事

  • エントリーページの「新着」ブックマークを「全ての」ブックマークに差し替え
  • ユーザのアイコンを 16 x 16 に変更
  • 人気のブックマークの表示/非表示切り替え

出来ない事

  • コメントのみ表示チェックが効かない
  • スターが付けられない
  • グラフが見れない

現状は、全てのブックマークを表示するページから HTML を親ページに流し込んでる実装です。
この実装だと、上記の問題解決はかなり難しそうです。
なので、全てのブックマークページをそのまま iframe で埋め込む方法に実装を変更する予定なのですが、とりあえず情報参照だけなら綺麗に動いたのでアルファ版として公開してみました。

フィードバック、改造報告などがあれば是非コメントに!

Written by Otchy in: Development | タグ: ,
11月
17
2010
2

GoogleFloatingForm 修正版を公開

むかーし作って、ずっと放置したままになっていた、Greasemonkey ユーザスクリプトの、GoogleFloatingForm を今の Google にあわせて修正したものを公開しました。
GoogleFloatingForm

なぜ突然そんな事をする気になったかというと、GoogleFloatingForm改造と、検索結果CSS変更 [javascript][greasemonkey]:みにちゅあがーでん とか、-MB- Google仕様変更 とか、Google の仕様が変わっても、旧版の GoogleFloatingForm を改造しながら使い続けて下さっている方がいると分かったからです。
2ch のスレッドでも時々話題になっているようでした。

自分の作ったスクリプトが、こうして人の手に渡って修正されながらも使い続けられていくって、嬉しいもんですね。

今回、修正といっても今のブラウザの仕様にあわせてほとんどを書き換えた感じです。
今は、querySelector が使えるので、xpath とか使う必要が無くなりましたし、スタイルをちょっといじってフォームが浮いている事が分かりやすい感じにしました。

また、色々と改造して使ってくれる人がいる事も分かったので、スクリプト自体改造されやすさを意識して書いています。

そんなわけで、新生 GoogleFloatingForm をよろしくお願いします。

Written by Otchy in: Development | タグ: ,
9月
28
2010
2

Tumblr の引用元を一発で開く方法

明示的に開くならブックマークレットで。Redirect Tumblr

javascript:(function(e){if(!e)return;location.href=e.href;})(document.querySelector&&document.querySelector('.source%20a'));

自動的に開くなら GreaseMonkey で。

// ==UserScript==
// @name           Auto redirect from Tumblr
// @namespace      http://www.otchy.net/
// @include        http://*.tumblr.com/post/*
// ==/UserScript==
(function(e){
	if (!e) return;
	location.href = e.href;
})(document.querySelector && document.querySelector('.source a'));

まあ、引用元のリンクが見えているのであんまり需要はないですかね?
引用元のリンクのテキストや位置が常に変わるので、探すのが面倒という場合などにどうぞ。

サポートブラウザ:document.querySelector を実装しているブラウザ (IE 以外 らしい)

Written by Otchy in: Development | タグ: , ,
1月
29
2010
2

Chrome 正式版 Greasemonkey でクロスドメイン POST をする方法

最近公開された、Google Chrome の Ver 4 では、正式に Greasemonkey がサポートされ、以前のように特別なオプションを指定することなく、ワンクリックでユーザスクリプトがインストール出来るようになりました。
それ自体は非常に嬉しい事だったんですが、バージョンアップに伴い、はてブ with Twitter が動かなくなってしまっていました。(現在は修正済み)

以前、JavaScript だけでクロスドメインで POST メソッドを送る方法で紹介したやり方が、Chrome のバージョンアップによって無効になってしまったためです。
無効になったとはいえ、通常の JavaScript として使用する分には問題なく、Greasemonkey だけに問題が発生していました。
動的に生成した iframe の contentWidow オブジェクトが取得出来なくなっており、セキュリティの制限が強化されたものと思われます。

最終的にはその制限を回避する方法を見つけたので、以下に解説します。

通常 JavaScript の記述

まず、Greasemonkey ではなく普通の JavaScript としてJavaScript だけでクロスドメインで POST メソッドを送る方法等を参考に、本来やりたい処理を記述します。
この時は普通に script タグでスクリプトを読み込んで、正常動作を確認しておきます。

そして、正常に動作するスクリプトが作成出来たら、それを任意のサーバにアップします。

Greasemonkey の記述

以下のようなスクリプトを書きます。

(function() {
    var d = document;
    var s = d.createElement('script');
    s.src = 'http://www ...'; // スクリプトファイルをアップした場所
    d.body.appendChild(s);
})();

これだけで、本来の window オブジェクトから実行したかった処理が実行され、Greasemonkey の制限に掛かることなく、iframe を使用したクロスドメイン POST が実現します。

でもちょっと待って

Greasemonkey が実行されるたびに、自分のサーバから js ファイルがダウンロードされるなんて嫌ですよね?私は嫌です。レスポンスを考えたって好ましくないですし。

そこで、data スキームを使って外部スクリプト自体を Greasemonkey スクリプトの中に埋め込んでしまう事にします。(data スキームについてはこの辺を参照して下さい。)

data スキームへの変換には、[JavaScript] dataスキームURI生成(画像データのBase64変換)を使用させていただきました。
このサイトで、先ほどアップした js ファイルの URL を指定し、data スキームに変換した文字列を取得します。

その上で、Greasemonkey を以下のように書き換えます。

(function() {
    var data = 'data:application/x-javascript;base64,'+
        'KGZ1bmN0aW9uKCkgewoJdmFyIGQgPSBkb2N1bWVudDsKCWZ1bmN0aW9uIGdldEVsZW1lbnQoeHBh'+
        // 中略
        'fSkoKTs=';
        var d = document;
    var s = d.createElement('script');
    s.src = data;
    d.body.appendChild(s);
})();

これで、単体の Greasemonkey スクリプトでありながら、外部スクリプトを読み込んだのと同等の状況を作り出す事が出来ます。

これでスッキリしましたね!

Written by Otchy in: Development | タグ: , , ,
11月
04
2009
3

Greasemonkey で 超お手軽に jQuery を使うスニペット

【2011-06-07 追記】
下記の手法は Chrome の Greasemoneky では無効なため、Firefox / Chrome 両対応としたい場合は
Greasemonkey で 超お手軽に jQuery を使うスニペット [Chrome 対応版] を参照してください。

タイトルの通りです。

特徴

  • script タグ追加型の読み込み
  • $ 関数として利用可能
  • 該当ページですでに jQuery が読み込まれていればそれを利用
  • jQuery スクリプト自体のアップは不要 (Gogole の CDN を利用)
  • ローカルのキャッシュも多分有効 (CDN が適切なヘッダを返してれば)
  • jQuery 読み込み完了を待ってから実行される

作成動機

Greasemonkey で jQuery を使う方法検索してみると、GM_xmlhttpRequest で読み込んで eval する方法と、script タグを追加する方法に大別されます。
前者の方がスマートなやり方ではあるのですが、スニペットとして貼り付けるにはいかんせんコードが長くなりがちなのと、jQuery が導入される名前空間の違いからか、jQuery がフル機能で利用出来ないといった制限があるようです。
そこで後者を選択しようと思ったのですが、検索で上位に来るスクリプトはいまいち洗練されていなくて、二重読み込みなどの問題が解決されていなかったりします。

で、自分で書く事にしました。
特に任意のサイトで動作させるスクリプトを書くような場合、元々のページに jQuery が導入済みでもそれに干渉しない、というのがウリでしょうか。

スクリプト

(function(d, func) {
    var check = function() {
        if (typeof unsafeWindow.jQuery == 'undefined') return false;
        func(unsafeWindow.jQuery); return true;
    }
    if (check()) return;
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js';
    d.getElementsByTagName('head')[0].appendChild(s);
    (function() {
        if (check()) return;
        setTimeout(arguments.callee, 100);
    })();
})(document, function($) {
    // ここにメインの処理を書く
    $('#button').click(function(){
        alert('clicked!');
    });
});

重たい処理は必要ないぞ、っていう場合はこちらも参考にどうぞ。
Greasemonkey スクリプトの冒頭に書く 5 行

Greasemonkey を書く時に頻繁に利用する関数をまとめたので、公開してみます。
外部の JavaScript ライブラリを読み込む方法を解説したサイトもありますが、そこまで大げさな機能が必要でもなく、軽く動作させたいときに便利です。
特に共通ライブラリを利用すると、Firefox 以外のブラウザの対応も無駄に読み込む事になるので、スマートじゃないなぁと思います。

Written by Otchy in: Development | タグ: , ,

Powered by WordPress | Aeros Theme | TheBuckmaker.com