はてなダイアリーを印刷用に加工する

この前書いたPowerShellの勉強会のページを印刷しようと思ったら、ヘッダとかサイドバーとか余計なものがまるまる表示されていたので、ローカルにHTMLを取り込んで加工しようかと思った。

でも、それじゃ毎回やらないと駄目なので、Greasemonkeyを使ってJavaScriptでいじることにした。

準備

以下のサイトからFirefox用の拡張機能であるGreasemonkeyをインストールする。
http://www.mozilla-japan.org/addons/firefox/extensions/

DOMの操作にはjQueryを使いたいので、まずはjQueryをGreasemonkeyに登録する。

「jquery-1.2.1.pack.js」のファイル名を「jquery-1.2.1.pack.user.js」に変更して、FirefoxにDrag&Dropする。
Greasemonkey登録用のダイアログが表示されるので、「インストール」をクリックする。
Greasemonkeyの「ユーザスクリプトの管理」から「jquery-1.2.1.pack」の「ユーザスクリプトを実行するページ」を「http://d.hatena.ne.jp/coma2n/*」に設定する。

これで自分のはてなダイアリーでだけjQueryのスクリプトが読み込まれるようになる。

いじくる

「新規ユーザスクリプトの登録」で

名前: d-hatena-print
名前空間: cozy
説明: はてなダイアリーを印刷用に加工する
実行するページ: http://d.hatena.ne.jp/coma2n/*

と設定して、「OK」をクリックする。
「ユーザスクリプトの管理」から「d-hatena-print」を選択して「編集」をクリックする。

function main() {
    jQuery("body h1").hide();           // タイトル
    jQuery("div.sidebar").hide();       // サイドバー
    jQuery("div.calendar").hide();      // 日付
    jQuery("div.day h2").hide();
    jQuery("#simple-header").hide();    // ヘッダ
    jQuery("div.main").css("margin-left", "0px");   // サイドバー部分を詰める
    jQuery("div.hatena-body").css("width", "98%");  // 全体の幅
    jQuery("p.sectionfooter").hide();
}

main();

はてなダイアリーはprototype.jsが読み込まれているみたいなので、「$()」ではなく「jQuery()」を使っている。
いらない要素を片っ端から非表示にした。これでなんとか印刷に耐えられる画面ができた。

しかし、Greasemonkeyは恐ろしい。やりたり放題できてしまう。