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

読了まで:約1分


  • [[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 とか​使うのは、​あんまり​オススメ出来ないかなー、​なんて​思います。​ はい。

にゃるら(カラクリスタ)

『輝かしい青春』なんて失かった人。
次に備えて待機中。

今は趣味でプログラミングをして
生活しています。