Lycolog

今回はサイトトップが、ひとまずの理想形になったので、その成果発表をしていく。

このページは2023/04/06に重い腰を上げてBioサイトを作ったで作成したが、そこから先でも思い立った時にちまちまメンテし続けていた。

ひとまず、前回の記事と今回を比較していく。

まず、ビジュアル面では、ずっと入れたかった指紋情報を書くことができた。最初は公開鍵を何とか書こうとしていたのだが、ダイアログやアコーディオン的なものは使いたくなかったし、JSも使いたくなかったので、短く収められる指紋で妥協した。

次にアイコンサイズの統一だ。以前はブログ、YAMAP、はてブのアイコンサイズが異なっていて統一感がなかったが、これを揃えることで統一感を出すことができた。代償としてブログの存在感が薄くなってしまったので、これはどうにかしたい気もする。

またRootsの表示が他の要素と微妙に異なっており、ズレている問題があったが、これも直した。直したらスマホ表示時に途中で折れるようになってしまったのでフォントサイズを落とした。この部分はほかにもSSIを使って更新日時を表示したり、コピーライトの最新年もSSIで動的に吐くようにしていたり、地味に工夫している。アクセスカウンターもaltにカウント値と様相を出すようにして、もし画像が見れなくとも読み取れるようにしている。恐らくアクセスカウンターのAltにカウント値をSSIで入れる試みはなかなか珍しく、ひょっとしたら私くらいしかやっていないのではなかろうか？

前回	今回

ビジュアル面以外ではページサイズの削減やCSSの見直しをしている。ページサイズの削減ではfontawesomeのCSSを外しSVGを直接埋めることで大幅に容量を落としているほか、GZIP転送を利用してページサイズを圧縮している。CSSの見直しはDOM階層構造でしていた部分を個別のクラスに分けて保守性を高めている。DOM構造に依存していると意図しない部分にCSSが当たって崩れることもあり、あまりよくなかった。とはいえ、全部消したわけではなく、支障がない場所はそのまま残しているので臨機応変にやっている。

以下はそれぞれ、SP/PCでの前回と今回のパフォーマンス比較だ。SPはFirst Contentful Paintが1.4秒から0.9秒に、Largest Contentful Paintが1.4秒から1.0秒に減っており、PCもSPはFirst Contentful Paintが0.4秒から0.3秒に、Largest Contentful Paintが1.0秒から0.6秒に減っており、大きな効果が出ていることがわかる。パフォーマンスも99だったSPが100に上がったので十分だろう。全体スコアもPCはオール100、SPもSEO以外は100なので十分といえる。SPのSEOを改善する気は今のところないので、これでFixにする。

以前のSPビューでの結果	今回のSPビューでの結果

以前のPCビューでの結果	今回のPCビューでの結果

しかし、HTTPSに対応しており、レスポンシブデザインであるにも関わらず、CGIによるアクセスカウンターとSSIによる動的生成を使っていて、どこにもJavaScriptが書かれていないサイトというのは、そうそうないと思うので、今時珍しいサイトとしてネタにしていきたいところだ。何ならHugoのような静的ジェネレータも使っていない手書きのHTMLである。全て私が丹精を込めてキーボードを打鍵して作っている。当たり前だがChatGPTやCodeCopilotをはじめとしたAIも使っていない。

Google Search Consoleで状況を確認してみることにする。（Google Analyticsやレンサバのログ解析も似たような結果になっている）

アクセス数は以前よりかなり落ちている。これはタイミングの問題かもしれない。もし、CMS変更が原因であれば、URL変更やHTMLの構造変更が影響しているのだろう。少なくともコンテンツは丸ごと移してるし、URLのリダイレクトもほとんどは機能しているはずだ。いや実際に機能しているかまで確認はしてないが…。

まぁアクセスが多くても負荷が高まってサーバーが落ちたりするので、このくらいが程よいのかもしれない。

またインデックスについては未登録URLがグッと増えた。グラフを見る感じWordPressのURLがまるっと未登録になり、adiaryの分が増えた感じだろう。adiaryの方が記事URLに対してサイトマップの登録率が高いが、これはadiaryとWordPressでサイトマップのファイル構成が異なることに起因している可能性がある。例えばadiaryはサイトマップが1ファイルなのに対し、WordPressは複数ファイルであるため、Google側の解釈に差が出ているとか、そもそもXMLの内容も違うはずなので、色々影響しているのかもしれない。

インデックス状況についてはWordPressの頃は手動登録しないとインデックスされないことが少なくなかったが、adiaryでは何もせずともインデックスされるので、ここについては大きく満足している。やはりこれはWordPressよりadiaryの方が早いことに起因しているだろう。

親クラスをモックして子クラスの単体テストをしたいときに

確認環境

サンプルコード

コードのフルセットは以下
https://github.com/Lycolia/typescript-code-examples/tree/main/mocking-base-class-with-extension-class-swc-ts

ディレクトリ構成

src
 ├─BaseClass
 │  └─index.ts
 └─ChildrenClass
    ├─index.ts
    └─index.spec.ts

src/BaseClass/index.ts

親クラス。この例は抽象クラスだが別に具象クラスでも何でもいいと思う

export abstract class BaseClass {
  constructor(
    private baseValue: string,
    private ctx: { [key: string]: unknown }
  ) {}

  public hoge<ResultT>(payload: { [key: string]: unknown }) {
    // テスト走行時には全て無効な値を流し込むため
    // それらの影響で落ちないことの確認のために、オブジェクトの子を意図的に書いている
    console.log(this.baseValue, this.ctx.hoge, payload.piyo);
    // サンプルコードなので戻り値はスタブ
    return {} as ResultT;
  }
}

src/ChildrenClass/index.ts

子クラス

import { BaseClass } from '../BaseClass';

export class ChildrenClass extends BaseClass {
  constructor(baseValue: string, ctx: { [key: string]: unknown }) {
    super(baseValue, ctx);
  }

  public piyo<ResultT>(payload: { [key: string]: unknown }) {
    try {
      // このsuper.hoge()をモックして、
      // catchの中に流れるかどうかを確認するのが目的
      return super.hoge<ResultT>(payload);
    } catch (err) {
      // 実際はロガーが動くような部分だが、サンプルコードのためconsole.logで代用する
      console.log(err);

      throw err;
    }
  }
}

src/ChildrenClass/index.spec.ts

子クラスのテスト

import { ChildrenClass } from '.';
import { BaseClass } from '../BaseClass';

describe('fetch', () => {
  it('親のfetchが呼ばれ、親の戻り値が返ってくること', () => {
    // 子が正しくreturnしてくるかどうかを確認するための値
    const expected = { code: 200 };

    // Class.prototypeとやるとモック出来る
    const spiedSuperFetch = jest
      .spyOn(BaseClass.prototype, 'hoge')
      .mockReturnValue(expected);

    // 親クラスの処理はモックするので適当な値を入れておく
    // この内容が実行されていればテストが落ちるのでテストコードが間違っていることの検証に使える
    const inst = new ChildrenClass('aaaa', {} as { [key: string]: unknown });
    const actual = inst.piyo({ foo: 123 });

    // 親クラスのメソッドが正しい引数で呼ばれたことの確認
    expect(spiedSuperFetch).toHaveBeenCalledWith({ foo: 123 });
    // 子クラスのメソッドの戻り値が正しいことの確認
    expect(actual).toStrictEqual(expected);
  });

  it('親のfetchで例外が出たときに、ログ出力とリスローがされること', () => {
    const expected = Error('ERR');
    // 親クラスのメソッドが例外をスローするケースを作る
    jest.spyOn(BaseClass.prototype, 'hoge').mockImplementation(() => {
      throw expected;
    });

    // catch句の中でロガーが動いているかどうかの検査用
    const spiedConsoleLog = jest.spyOn(console, 'log');

    const inst = new ChildrenClass('aaaa', {} as { [key: string]: unknown });

    // 例外がリスローされていることを確認
    expect(() => {
      inst.piyo({ foo: 123 });
    }).toThrow(expected);
    // ロガーが動いていることを確認
    expect(spiedConsoleLog).toHaveBeenCalled();
  });
});

電子辞書 (EX-word)

ここ最近言葉の意味を調べようとするとコタツ記事であふれた検索結果や検索エンジンによる謎の解説ばかり出てきて本来の意味に辿り着けないケースが増えてきたので電子辞書を買った。

スマホアプリとかもあるにはあるのだがサブスク型で日々勝手が勝手に変わりそうでなんか嫌だったので買い切り型の物理デバイスにした。最近の電子辞書は中のコンテンツを充実させることで高価格を維持する路線をとっているらしく、広辞苑や国語辞典、英和辞典辺りがあれば十分だった私は型落ちの安いのを選んだ。

昔と違ってローマ字入力ができるのがありがたい。今でも廉価版だと五十音キーボードになっているらしく結構つらいものがある…。というので、ローマ字入力できるもので一番安いのを買ったが、ぼちぼちした。

Surface Laptop 4

勉強会とかにもっと出たいけどノートPC買いたくないなぁ…という呪縛を破るために買った。Surface Laptop 4 5AI-00039だ。

スペックはCore i5 1135G7 4.20GHz/4C8T、MEM 16GB、ストレージ 512GB、重量 1,265g。因みにもう売った。

売った理由だが、まずキーボードがクソなのである。カーソルキーがノートPCあるあるな形状なのだが、特に↑↓の誤打鍵が酷く、文書作成やコーディング目的に使うにはクソ過ぎた。やってられなかった。

もう一つ理由があり、それはしょっちゅうフリーズすること、動きがもっさりすることだ。店頭で触ったのでこれは知っていたが、ちょっと正気ではなかった。我慢できなかった。私は短気なのだ。

因みにWin+Eを数回連打するだけでありえない遅さだということが如実にわかるので、店頭の動作展示がこれほどよくわかる例もそうないだろう。それでも買ったのは以前Surface Pro 4を使っていたことと、単に見た目である。

因みにSurface Laptop 4はイマイチだが、Arcマウスはポータブルマウスとしてよく出来ている。平らにたためるのと、ホイールがなく、カバンの中で嵩張らず壊れづらいのは、とてもいい。

ノートPC (NEC Lavie)

Surfaceがクソ過ぎたので速攻買い替えたPC。Surfaceより遥かに軽いし、日本製だし、カーソルキーがまともだし、最高じゃないか。

マシンはNECのLavieで型式はPC-GN20D72DYEDYH2YAA。スペックはAMD Ryzen 5 7530U 4.5GHz/6C12T、MEM 16GB、ストレージ 256GB、重量 972gだ。

キーボードはカーソルキーがSurfaceと比べ大幅に改善され、極めてまともな形になっている。しかもHome, End, PageUp, PageDownがここにあるので使いやすい。Surfaceの奴は遠すぎる。

放熱にも気配りがされていて通風孔が多く、熱にも強そうだ。

使ってみての感想だが、まずやはりキーボードがいい。FnLockが凄い都合よく作られていて、Fキーはロックされるが、カーソルキーやDeleteとかの部分はロックされていないように感じた。これは地味に使いやすく、恐らく装飾キーだけロックし、それ以外はロックしない設計なのだろう。他はロックされても困るので非常に良い（いや別にChgKeyで配置換えすればいいだけなのでどうでもいいが

そしてパフォーマンスもいい。エクスプローラーの起動がもっさりすることもないし、今のところフリーズもしていない。欠点はNECの初期アプリを消すのに手間がかかったがそのくらいだ。

この端末は勉強会などでの開発に使う予定だが、最低限まともにGUIが動けば後はどうでもいいのでスペックを抑えている。何故なら実際の開発に関係する処理はUbuntuサーバーを利用するため、このマシン自体はシンクライアント機として機能すればいいからである。メモリ16GBは一般的には多くも見えるが、私は普通に作業してるだけで10GB程度はメモリを使うので、8GBでは足りないのである。

ヤマハルーター

いわゆる高いルータ。RTX830。

買った理由としてはVPNを引こうと思い、VPNルーターを買おうとして目についたので買った。要件を考えた結果、色々あり、結局のところVPNは使っていない。VPNは一度侵入を許すとやりたい放題されてしまうリスクがあるのと、セキュリティを考えたときにセットアップや維持がクソめんどくさそうだったのがある（端的に言うとルートCA証明書が必要で、これは作るのも面倒だし、これで署名した証明書を維持管理するのもしんどい）

結局VPNを使おうとしていた用途には公開鍵暗号方式のSSH接続で繋ぐことで事なきを得たが、この用途だけに限れば特にルーターを買い替える必要はなかった。

今のところの大きな利点としてはルーター再起動時にOCNバーチャルコネクトに安定接続できるのと、DNSサーバーが入っていることくらいだ。前使っていたルーターはOCNバーチャルコネクトの初回接続が極めて不安定で、メンテや停電などで一度でも再起動がかかると再接続に5～120分ほどかかるという地獄があり、これが嫌すぎて再起動のストレスがやばかったが、このルーターにしてこれは解消した。またDNSサーバーも思いのほか便利で、example.comを外出先ではグローバルIP、自宅ではローカルIPに自然とマップできるので、これは重宝している。

細かいことはコマンドで設定できるのでGUIを触らなくていいことくらいで、今のところそんなにすごい恩恵はないが、きっといつの日か何か恩恵が来ることもあるだろうというので、あまり後悔はしていない。出来ることは多いはずなので一種の投資だ。

ひとまず業務用ルーターということで見た目が強固だし、電源ケーブルが抜けないようにするアタッチメントもイケていい感じだ。

これまでに使っていたルーターはRTX830にぶら下げてWiFiのAPにするためのブリッジルーターとして使っている。因みにルーター交換に伴い通信環境が改善したとかはなかった。以前はBuffaloのWSR-1166DHP4を使っていたが、ここは非常にコストパフォーマンスのいいルーターを出しているので、安く早くある程度設定ができるルーターを求めている場合には重宝すると思う。夏場落ちたりすることもないし、5年単位で壊れないので作りもいい。低価格製品だと設定画面がお世辞にも使いやすいとは言えないが、用はこなせるので問題になることは一般用途では少ないだろう。

ブルーレイドライブ

今時光学ドライブ買う？と思われるだろうが、買ったのだ。しかもでかいやつ。CDドライブのころからそうなのだが、光学ドライブはデカいほうが性能がいい法則がある。コンパクトドライブと比較したときR/W速度が倍くらい違う。コンパクトドライブだとCDのReadはx24が上限だが、デカいやつはx48が一般的だ。異次元だ。その代わり値段は高い。需要が減ってきていると思われるので買うなら今だろうというので大型機を買うことにした。（こういう一般人に理解されがたいものは需要が薄そうなので追々消える懸念がある

これは以前まで使っていたコンパクトDVDドライブだ。この期に売却となった。

自作デスクトップPCを持っているのに外付けドライブを買うのは何とも奇妙な話だが、最近のケースには5インチベイが付いてないのである。勿論付いているのもあるのだが、見栄えがいいケースには大抵付いていない。というわけで外付けになっている。

しかし何故DVDドライブではなくBDドライブを買ったかだが、実は前回もBDドライブを検討したのだが高かったし、インターネット全盛のこの時代にBDを使う機会はないと思っていたのだ。実際ディスクレスは増えている。しかし、実際は違った。レンタルではなく永続的に自分の手元に映像データを置いておくにはBDが必要だったのだ。dアニメやAmazon Prime Videoは一生見れる保証がない。ある日突然消える。それは困るというのでBDを買うことにしたわけだ。

と言う訳でDVDも買っている。ひとまず印象深い映画ということで、SAOP二作、夏トン、ジョゼ虎、あしせかのBDを買った。映画館で見た作品を好きなタイミングで、また見れるというのはいいものだ。

また丁度いいので久々にCDも買った。これまでもAmazonにMP3がないのはCDを買っていたのだが、ここ数年Amazon Digital Musicの改悪が酷く、まともにMP3を買えない問題があった。探すのも大変だし、買うのも大変だし、ダウンロードするのも大変だ。時期によっては酷いバグがあって力技を使わないとダウンロードできないことさえあった。最早Amazonは特定の曲を買わせる気など毛頭なく、Unlimitedに加入させてランダムな曲を再生させて集金することしか頭にないと思う。彼らにアーティストは理解できないのだ。どうせ禄でもない輩が開発しているに違いない。古きオタクには辛い時代になったが、そんならCDを買えばいい。幸いアニメイトが近所にあるので買いに行くのに困ることはない。ゲーマーズも虎の穴もつぶれたがアニメイトとメロンブックスはある。今こそ地の利を生かす時だ。通販で買うより行って買ったほうが運動になるしゴミも出ない！

x24がx48になっただけあり、CDは爆速でリッピングできたし、読み取り時の爆音もなくなって非常に快適だった。よい買い物をしたと思う。

ここ数年見かける有効期限付きのURLの名前には署名付きURLとか、Private Cache Distributionパターンの様なものがあるらしい。

これはFantiaみたいな課金サービスを利用している人にはもはや当たり前だと思うが、ページを表示してから一定時間たつと画像が表示できなくなるが、一定時間内であればそのURLは誰でも見れるみたいなやつだ。要するにURLに短めの有効期限を付けて認証されたユーザーにしか見えなくする仕組みのことだ。

参考

• AmazonS3での署名付きURLの使用
• CDP:Private Cache Distributionパターン