かなり久しぶりに Greasemonkey で UserScript を書いた

• Greasemonkey とかナツい。

今日かいたスクリプト

// ==UserScript==
// @name        Live CSS for the.nyarla.net
// @namespace   https://the.nyarla.net/about
// @version     1
// @grant       none
// @include     http://the.nyarla.net/*
// ==/UserScript==

(function () {
"use strict";

const liveCSSUrl = "http://127.0.0.1:9999/kalaclism.css";
const replaceFn  = function replaceFn() {
const list = Array.from(document.querySelectorAll('link [[rel="stylesheet"]] '));

PICKUP: for ( let idx = 0, len = list.length; idx < len; idx++ ) {
let link = list [[idx]] ;

if ( link.getAttribute('href').match(/\-\/blog_style/) ) {
link.disabled = true;
break PICKUP;
}
}

let el = document.createElement('link');
el.setAttribute('rel', 'stylesheet');
el.setAttribute('type', 'text/css');
el.setAttribute('href', liveCSSUrl);

document.getElementsByTagName('head') [[0]] .appendChild(el);
};

document.addEventListener('DOMContentLoaded', replaceFn, false);
})();

これは何をするモノなのか

基本的には、はてなブログで設定している CSS を、ローカルに立てた HTTP Server 上の CSS に挿げ替える類の代物。 liveCSSUrl と @include を書き換えれば、他のはてなブログでも使えると思う。

何故これを書いたのか

これを書いたのは、

今のブログの Design と Styling を壊さずに、新しい Stylesheet を開発する

というコトを実現するため。

それで、以前では CSS を挿げ替えるために、HTTP Proxy とか立ててたんだけど、 Firefox でそれを使うと、なんか微妙に表示が壊れて、あれ？ ってなったのが開発の動機。

まあ、基本的にはコンテンツ置換の類いなので、他の方法でも実現できそうな類いのスクリプトではある。

以上

ちなみに、今現在開発している CSS は node-sass で SCSS を使って開発していたりする。

と言うのも、前は postcss とか使ってたんだけど、僕が実際に必要とした機能って、

• SCSS で十二分にカバー出来てたりするので、まあ時代とは逆行している気はするんだけども、 とりあえず SCSS 使えば良いやって感じで使ってます。

また、僕は CSS のバグ修正ならともかく、新しくデザイン等を改良するときは、基本、 フルスクラッチで CSS を書いているので、そう言った面では、 toolchain の変更はそんなに面倒ではなかったりする。

ただし、僕が思うに、これからの時代、postcss を使ってた方が次の CSS specs がブラウザに実装され切った際に、 色々と便利だと思うので、そういった意味では、scss とか使うのは、あんまりオススメ出来ないかなー、なんて思います。 はい。