@Blog

カラー選択からライトモードとダークモードに切り替えた話

2025.09.22

Logging

おはようございます.カラー選択からライトモードとダークモードに切り替えた話を書いています.カラー選択、実は結構自分は気に入っていたのだけどあまり使用されないだろうなぁという思いも前から思っていたのだけど、そのままにしていました.

切り替えたのはある動画を視聴して、その中でライトモード、ダークモードの仕様に全てのブラウザが対応したことを語っていたので、だったらこの際ライトモードダークモードに変更しようと思い立ちました.

休日の終わりごろに思い立って、サービスとギャラリー以外はライトモードダークモードに切り替えが終わりました.ただ、一つ課題があってOS（オペレーションシステム）とブラウザのモード設定がチグハグだった場合、コメント欄などが見にくくなっています.

ここだけは今のところ保留にしています.

残りのサービスとギャラリーは近日中に変更しようと思っています.

一応、切り替えを行うソースコードを貼っときますね.

document.addEventListener('DOMContentLoaded', () => {
  const switchToggle = document.getElementById('flexSwitchCheckDefault');
  const htmlElement = document.documentElement;

  // ページの初期ロード時にテーマを設定
  function setInitialTheme() {
    // ローカルストレージに設定があれば、それを使う
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      htmlElement.setAttribute('data-theme', savedTheme);
      switchToggle.checked = savedTheme === 'dark';
    } else {
      // なければOSの設定を使う
      const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
      htmlElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
      switchToggle.checked = isDarkMode;
    }
  }

  // スイッチが変更されたらテーマを切り替え、ローカルストレージに保存
  switchToggle.addEventListener('change', (event) => {
    const newTheme = event.target.checked ? 'dark' : 'light';
    htmlElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);
  });

  // 初期テーマを設定
  setInitialTheme();
});

明日へ続く

タグ

```, オペレーション, カラー, ギャラリー, コード, ここ, こと, コメント, ごろ, サービス, システム, スイッチ, ストレージ, ソース, それ, ダーク, チグハグ, テーマ, ところ, ブラウザ, ページ, モード, ライド, ライトモードダークモード, ローカル, ロード, 一つ, 仕様, 以外, 休日, 使用, 保存, 保留, 全て, 切り替え, 初期, 動画, 場合, 変更, 対応, 思い, 明日, 残り, 自分, 視聴, 設定, 課題, 近日, 選択,

サイトの画像有無を確認するNodeJSコード

2025.09.21

Logging

おはようございます.サイトの画像有無を確認するNodeJSコードを共有します、このコードを作った経緯は画像の有無を目視でチェックするのは結構大変でかつ、膨大にページがある場合は人の確認だとどうしても抜かりが出てくる場合があります.

そういう時にこのツールを使うとカバー出来ると思います、使用するにはまず前提条件としてご自身のOS（オペレーションシステム）にNodeJSバージョン22が入っていること、それ以降でも動くとは思いますが自分が動作確認を行ったのはバージョン22だったので動作保証するのは22になります.

環境を整えたらギットハブ（GitHub）の下記のリンクより、ダウンロードするかクローンしてご自身の任意のディレクトリにファイルを展開しその後、READMEを参照して手順を踏んで頂けたら確認が出来ます.

https://github.com/taoka3/checkImage

※同階層にライブラリのインストールすることをお忘れなく

トイウコトでサイトの画像有無を確認するNodeJSコードの話でした、尚、このコードは生成AIが殆どコードを書いています.

明日へ続く

タグ

インストール, オペレーション, カバー, ギットハブ, クローン, コード, こと, サイト, システム, その後, それ, ダウンロード, チェック, ツール, ディレクトリ, トイウコト, バージョン, ファイル, ページ, ライブラリ, リンク, 下記, 以降, 任意, 使用, 保証, 共有, 前提, 動作, 参照, 場合, 大変, 展開, 手順, 明日, 有無, 条件, 殆ど, 環境, 生成, 画像, 目視, 確認, 経緯, 膨大, 自分, 自身, 階層,

家のPersonalComputer様の調子が悪いので騙し騙し使っている件。

2021.06.17

Logging

家のPersonalComputer様の調子が悪いので騙し騙し使っている件。パーソナルコンピューターとはPC（パソコン）の略です。因みにこの頃のジェネレーションギャップ（generation gap）はアドレスバーやURLとか言っても若い女性には通じなかったことです・・・?。これには驚きを超えショックでした?、通じないというのは、知っていたのですが本当にZ世代などには通じない人が結構多そうです。

話戻しまして、家のパソコンのどこの調子が悪いのかといえば、Cドライブ（SSD）の認識がとても良くなく立ち上がりにOS（オペレーションシステム）を読んでくれません。いや、違うなBIOSがSSDを認識してくれないので立ち上がらないのです。BIOSを再起動すると何故か二回目はSSDを認識してくれてOS＝windowsが起動します。

自分はssdに問題があるという事までは突き止めています。SSDを違うポートに入れ替えても同じ現象が発生するのでおそらくCドライブのSSDだと断定したのですが・・・。この現象が発生したのがWindowsを21h1にアップグレードしてからなんで、実はソフトウェアのバグなのかもしれないのです。ダウングレードしても発生したので違うかもしれませんが・・・。

近々、SSDを交換しないといけないかなと思っています。ちなみにM.2に交換するつもりです！！！交換するなら爆速で立ち上げたいですよね。

タグ

BIOS, gap, GENERATION, OS, PC, PersonalComputer, SSD, url, Windows, アドレス, オペレーション, ギャップ, こと, これ, コンピューター, ジェネレーション, システム, ショック, どこ, ドライブ, バー, パーソナル, パソコン, ポート, 世代, 事, 二, 人, 件, 再起動, 問題, 女性, 家, 本当, 様, 略, 自分, 認識, 調子, 起動, 頃,