グリースモンキーで印刷向けのレイアウトにする - 檜山正幸のキマイラ飼育記 (はてなBlog)

Firefoxのグリースモンキー（Greasemonkey）ですが、「これは押さえておかなきゃね」とか思っていながらも、触っていませんでした。必要に迫られてイジッテみましたよ、遅ればせながら。-- 「おっ、おもろいで！コレッ」

内容：

自分の日記を印刷したいのだが
おべんきょう
もっとやってみよう
いくつかの注意
印刷向けレイアウトに替えるボタンを付けてみた
感想

●自分の日記を印刷したいのだが

この「キマイラ飼育記」を印刷すると、サイドバー部分も印刷されて、本文幅は狭くなり、なんか無意味に紙が消費されちまう。ウチにかぎらず、うまく印刷できないブログって多いですよね。

で、スタイルシートを少し調べて、div.sidebar {display:none;} .main {margin: 0 0 0 0;}を加えればサイドバーが消えてくれることが判明（これ、あくまで今の「キマイラ飼育記」の場合）。

つーことは、http://d.hatena.ne.jp/m-hiyama/*（最後の* はワイルドカード）というURLのページに対して、上記のスタイル指定を加えるようなスクリプトを書けばいいってことだね。さー、クリカラモンモンじゃなくてグリグリモンモンの出番だわさ。

いざ、試さん。あたりまえだけど、Greacemonkey拡張がインストールされたFirefoxが必要ですね。右下にチッチャイお猿さんが出てますか？

●おべんきょう

まず、http://greasemonkey.mozdev.org/authoring.htmlの最初（1/4くらい）を読んでみました。とりあえず手順は次のようだ。

スクリプト（JavaScriptプログラム）をテキストエディタで書く。
ファイル名は *.user.js でなくてはならない。
[ファイル]-[ファイルを開く]（またはDnD）でスクリプトファイルを開く。
[ツール]-[Install This User Script]でイントールする。僕の場合はこのとき、Include pages の * を http://d.hatena.ne.jp/m-hiyama/* に書き換えます。
目的のURL（僕なら自分の日記）にアクセスしてテスト。
うまくいかないなら、直しては、以上の手順を繰り返す。

最初に書いたスクリプトは：

gm_hello.user.js



 alert("Hello from User Script.");

http://d.hatena.ne.jp/m-hiyama/にアクセスしたら、アラートがでた。ナルホド。オッケェーーイ（HG風）

次に、http://userscripts.org/ から、なるべく短いスクリプトをダウンロードして眺めてみる。僕は次の3つを眺めました。

Add CSS Signature (969.user.js)
Add Comment Edit Link in Blogger (1805.user.js)
Unstyle (1412.user.js)

●もっとやってみよう

よくはわからないけど、そこはかとなく雰囲気はつかめたので、次を書いてみました。

gm_red-body.user.js



// ==UserScript==

// @name Red Body

// @namespace http://www.chimaira.org/user-script

// @include http://d.hatena.ne.jp/m-hiyama/*

// ==/UserScript==
(function() {

 var STYLE = "body {color:red;}";

 var stylesheet = (document.getElementsByTagName('style'))[0];

 var styleText = document.createTextNode(STYLE);

 stylesheet.appendChild(styleText);

})();

無名関数を使った疑似ブロックを使うのは、大域スコープを汚さないお作法。上のやり方が、スタイルシートを操作する適切な方法かどうかはあやしい（あまりにもDOMくさい）けど、とりあえず僕の日記は赤字（color:red）になりました。んじゃ、サイドバーを消すこともできるはず。

gm _no-sidebar.user.js



// ...

// 下の1行以外は gm_red-body.user.jsとまったく同じ

 var STYLE = "div.sidebar {display:none;} .main {margin: 0 0 0 0;}";

// ...

ヤタッ、期待どおり。

●いくつかの注意

スクリプトのコメント内にメタ情報を書けます。@include http://d.hatena.ne.jp/m-hiyama/*のように書いておけば、ダイアログで指定する手間が省けます。

テストのとき、１つのページに複数のスクリプトが走るとわかりにくいので、他のスクリプトは無効にしておきましょう。

テストのときは、JavaScriptコンソールを出しておいて、何が起きてるか観察できるようにしましょう。

あとは、「テキストエディタで修正 → スクリプトをリロード → Install This User Script → 対象ページをリロード → JavaScriptコンソールを眺める」の繰り返し。

●印刷向けレイアウトに替えるボタンを付けてみた

サイドバーが邪魔になるのは印刷のときだけなので、サイドバーを消すボタンを日記タイトルの脇に付けるようにしました。なんか洗練されてないけど、こんな感じ（↓）。

gm_for-printing.user.js



// ==UserScript==

// @name For Printing

// @namespace http://www.chimaira.org/user-script

// @include http://d.hatena.ne.jp/m-hiyama/*

// ==/UserScript==
if (!window.m_hiyama) var m_hiyama = {}; // namespace object for me
/* 

 * constants

 */
m_hiyama.BUTTON_LABEL = "4P"; // means "for printing"

m_hiyama.BUTTON_ID = "for-printing-by-m-hiyama";

m_hiyama.BUTTON_STYLE = "#" + m_hiyama.BUTTON_ID + 

  "{margin-left:1em;}";

m_hiyama.NO_SIDEBAR_STYLE = "div.sidebar {display:none;} .main {margin: 0 0 0 0;}";
/*

 * add button style

 */
(function() {

 var stylesheets = document.getElementsByTagName('style');

 if (stylesheets.length > 0) {

  var styleText = document.createTextNode(m_hiyama.BUTTON_STYLE);

  stylesheets[0].appendChild(styleText);

 }

})();
/* 

 * function definitions

 */
m_hiyama.findDiaryTitle = function () {

 var bodyContent = document.body.childNodes;

 for (var i = 0, node; node = bodyContent[i]; i++) {

  if (node.nodeName.toLowerCase() == 'h1') {

   return node;

  }

 }

 return null;

};
m_hiyama.addButton = function () {

 var title = m_hiyama.findDiaryTitle();

 if (title) {

  var button = document.createElement('button');

  button.setAttribute('id', m_hiyama.BUTTON_ID);  

  button.id = m_hiyama.BUTTON_ID;

  var label = document.createTextNode(m_hiyama.BUTTON_LABEL);

  button.appendChild(label);

  title.appendChild(button);

  return true;

 } else {

  alert("UserScript: Cannot find diary title");

  return false;

 }

};
m_hiyama.setStyleForPrinting = function() {

 var stylesheets = document.getElementsByTagName('style');

 if (stylesheets.length > 0) {

  var styleText = document.createTextNode(m_hiyama.NO_SIDEBAR_STYLE);

  stylesheets[0].appendChild(styleText);

 } else {

  alert("UserScript: Cannot find stylesheet");

 }

};
/* 

 * and modify this page

 */
if (m_hiyama.addButton()) {

 document.getElementById(m_hiyama.BUTTON_ID).addEventListener("click", m_hiyama.setStyleForPrinting, false);

}

消したサイドバーを元に戻すにはリロードです -- それでも十分でしょう。当然ながら、「キマイラ飼育記」以外でうまく動く保証はありません。他の「はてな」日記でやってみたら、サイドバーは消えても本文幅が狭いままが多いですね。工夫すれば、もう少し汎用にすることはできるかもしれませんが、僕はやりません、たぶん。

●感想

たいていは、コチラ（自分のブラウザ）側で変形を加える対象ページ／対象サイトの構造を調べる必要がありますが、その構造が把握できていれば、やりたい放題ですね。

他のブラウザもこの機能をサポートしてくれるとうれしいのだけど。そうすれば、ページ／サイトの作り方も変わってくると思いますよ -- 構造が把握しやすく、加工しやすいページが好まれるようになるでしょうから。