カラクリサイクル

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

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

Electron と NW.js の違いについて (再調査)

と言う話。

話の前提

まず、Electron も NW.js も、

(Chromium ベースの ) Web技術でデスクトップアプリケーションを作れる

という所は同じです。

それで、そこまでは同じなんですが、そこだけに着目していると、

あれ? Electron と NW.js って何が違うんだ??

となると思います。というか、以前この件について調べたはずの自分でさえ、そうなっていました。

しかしながら、 Electron と NW.js は、構造とか API とかの違いがあるだけではなく、

そもそもの 想定された使い方違う

と判ったので、今日はサクっとその辺りまとめてみます。

Electron と NW.js の違い

先に結論から書きますが、まず、

Electron は ネイティブアプリケーション Web技術で作る

という事を目的にしているのに対し、

NW.js は Web アプリケーション ネイティブアプリケーション化 する

という事を、恐らくは目的にしています。

それで、これの何が違うかというと、僕も混同しがちだったのですが、 Electron はあくまで、

デスクトップアプリケーションを構築するという目的 に対して Web 技術を使えるようにしてある

のが本来の有り方っぽく、基本的には、

信頼できない Web ページ等をデスクトップに持ち込むだめの道具ではない

という造りになっています。

それに対し、 NW.js は、 Electron と同じ様なコトは出来つつも、基本的には、

信頼できない Web ページ等 でも、 セキュリティ設定に気をつければ デスクトップに安全に持ち込める

という造りになっています。

つまり、もう少し具体的に言うと、例えば、

  • Web 技術を使って Web ブラウザを作りたい!
  • Web 技術を使って RSS/Atom News Reader を作りたい!

と言う様な、

信頼できない Web リソースを表示し得る アプリケーションを Web 技術で作る

という場合においては、Electron を使うのは推奨されずNW.js を用いた方が良い と言え、 逆に、

信頼できる Web リソースのみを表示する アプリケーションを Web 技術で作る

と言う場合には、Electron の方が利用し易い 、と言えるかと思います。

まとめ

つまり、カギとなる考え方は、

信頼できる情報のみを扱うか or 信頼できない情報も含めて扱うか

と言う点で、その観点から言うと、

Electron は 信頼できる情報のみを扱う場合 に用い

逆に、

NW.js は 信頼できない情報を含めて扱う場合 に使う

と考えておけば良さそうです。

以上

です。はい。

まあ、NW.js の方は Chrome の Extension API を備えている様に、NW.js では Web ブラウザを Web 技術を使って作る、 みたいな事が割と簡単に出来る様になっているのに対し、Electron はそんなモノはデフォルトでは備えていないし、 また Webブラウザみたいな、信頼できないリソースを表示する、というのは、あまり想定はされてないっぽい 、 と言えるんじゃないかなー、と僕は思っています。

そのため、僕が一度は作ってみたいなーとか密かに思っている、

Web ブラウザ とか RSS/Atom NEWS Reader 等は、NW.js を使って作った方が良い

と言う結論になるのでした。


という事で今日の話は以上です。

ちなみに、この記事は正座して書いていたんですが、今、足がかなりシビれてて動けないでござる……

更新していないブログのマージをもうそろそろ始めようと思ってる話

とりあえず、いつぞやの話の続きです。


ここの所、PC のトラブルだったり、あるいは体調面での不調だったり、 もしくは人生を次のステップへ進めるための準備だったりで、

ブログを統合して云々

という話をすっかり放置していたんですが、流石にもうそろそろ状況も落ち着いてきたので、 (僕の中での) その話をもうそろそろ進めようかなーなんて考えています。

それで、一応、今の所の案としては、

  1. 現在のこのブログ (カラクリサイクル) を軸に統廃合を進める
  2. このブログ (カラクリサイクル) はそのまま、他はこのブログへ Merge
  3. あと デザインを一人二役以上こなせる様に変更

と言う感じです。

ま、あとは過去の記事の調整だったりとか、あるいは、Naver まとめにまとめたコンテンツの整理だったりだとか、 そういうのも、このはてなブログ上で整理できたらなーと考えています。はい

NixOS での monospace フォント RictyDiscord から MyricaM M に変えた

と言う話。

なんで変えたか

僕は今まで自前で合成した Ricty を使っていて、なんか、合成に失敗しているのか、 あるいはフォントを合成した FontForge がバグっているのか、理由は定かではないのですが、

  1. バッククオートの表示がなんかおかしい (後続文字に合成されてしまう)
  2. 何かの拍子に文字がやたらとデカくなって表示が崩れる

などの不具合があり、かつ、

  • 毎回 Ricty を合成するのがめんどい

という理由もあいまって、Ricty (正確には Ricty Discord) から、

myrica.estable.jp

に変えました。まあ正確には MyricaM M ですが。

なんで Myrica ?

理由がおおよおそ下記の通り:

  1. Ricty Discord と 英文書体が似てる (元ネタが同じ)
  2. 日本語部分に Mgen+ フォントを使っている
  3. あと、Mgen+ の元ネタが Noto Fonts CJK と同じ

ま、普段僕は NixOS での日本語環境については、

  • Noto Font CJK ファミリー

に統一しているので、その辺りの慣れも有って、 今回 Myrica に変えてみました。

で、使ってみてどうなの?

とりあえず、 Ricty で遭遇していた不具合はほぼ無くなったので、その点では良かったです。 ただ、Ricty の時と比べ、なんか線が細い気がしないでもないので、 その辺りはちょっと調整するかなぁ、と思っています。 とは言え、調整すると言っても NixOS 経由で設定をゴニョっと書き換えるぐらいですが。

ま、それはともかく、色々と合成結果に不具合が出ていた Ricty よりも、 一応はまともに monospace が表示される環境が出来たので、その点では変更して良かったと思っています。はい。

以上

ちなみに。

生成したフォントがバグる件なんですが、僕個人としては、

  1. FontForge の合成結果がなんか間違っている
  2. 合成に使ったフォントのバージョンが食い違っている
  3. freetype か fontconfig か何かが妙な事になっている

という順番で何かしらが怪しいかなぁ、と思っています。

ただ、そんなに深追いはしていないのと、あと深追いするにはちょっと技量が足りてないので、 その辺り、実際には何がどうなっているのか、については詳しくは判っていません。 というか、そんなにその辺り深追いする気も無いですしおすし。

ま、とりあえず今回はそういう感じで問題解決出来たので、それはそれで良かったです。はい。