カラクリサイクル

『輝かしい青春』なんて失かった人の雑記

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

Greasemomnkey とかナツい。

今日かいたスクリプト

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