kdcsライブラリー

2026年3月現在、ロリポップのデータベース環境は「php8.3 + MySQL8.0系」になっている。
XAMPPは開発が止まっており、最終バージョンは8.2.12なのでphpは8.2でデータベースはMariaDB。

MariaDBをMySQL8.0系に改造する方法は、こちら

ここからは、php8.2をphp8.3にする手順
１．XAMPP8.2.12内のphpフォルダを「php8.2」にリネームする
２．ダウンロードしたphp8.3をXAMPP内にコピーして「php」にリネームする

３．以下、php8.2からphp（8.3）にコピーするフォルダ
・cfg
・CompatInfo
・data
・docs
・man
・pear
・script
・tests
・tmp
・windowsXamppPhp
・www

４．以下、php8.2からphp（8.3）にコピーするファイル
・CompatInfo.php

５．php8.2のextrasフォルダ内のssl以外全部をphp（8.3）にコピー

６．php.iniをphp8.2からphp（8.3）にコピー

以上で完了

Theme My Loginは会員サイト用のログインページを作ってくれるプラグインだが、6系から7系で大きく変わり、ほぼ有料版でないと機能しない状態になっている。旧6系を使っているとphp8.1以上で「Deprecated 警告」が出る（wordpressデバッグモード）ので応急処置で対応。

Deprecated 警告

Deprecated:  parse_str(): Passing null to parameter #1 ($string) of type string is deprecated in C:\xampp\htdocs\wp662-xxxx\wp-content\plugins\theme-my-login\includes\class-theme-my-login.php on line 745

これに該当する箇所を修正する

修正後

parse_str( parse_url( $url, PHP_URL_QUERY ) ?? '', $query );

修正前

parse_str( parse_url( $url, PHP_URL_QUERY ), $query );

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

View Transitions APIの開発はスマートフォンの方が先行していてパソコンのブラウザについてはedgeは比較的安定しているがchromeは開発中で不安定になる。そこで、安定的に使えるスマートフォンだけView Transitions APIを使うための切り替え方法。

スマホだけUserAgentで判定する方法（こちらが確実）

javascript

// スマホ判定（iPhone / Android）
const ua = navigator.userAgent.toLowerCase();
const isMobile =
  ua.includes("iphone") ||
  (ua.includes("android") && ua.includes("mobile"));

if (isMobile) {
  document.documentElement.style.setProperty("--vt-enabled", "1");
} else {
  document.documentElement.style.setProperty("--vt-enabled", "0");
}

css

@view-transition {
  navigation: auto;
}

/* スマホ以外では View Transitions を完全に無効化 */
:root:not([style*="--vt-enabled: 1"]) {
  view-transition-name: none !important;
}

:root:not([style*="--vt-enabled: 1"]) .photo-1 {
  view-transition-name: none !important;
}

/* root のアニメーション */
@keyframes zoom-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes zoom-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.05); }
}

::view-transition-new(root) {
  animation: zoom-fade-in 0.5s ease;
}

::view-transition-old(root) {
  animation: zoom-fade-out 0.4s ease;
}

/* スマホでのみ有効になる .photo-1 */
.photo-1 {
  view-transition-name: photo-example-1;
  contain: paint;
}

画面幅（768px）で切り替える方方法

javascript

if (window.matchMedia("(max-width: 768px)").matches) {
  document.documentElement.style.setProperty("--vt-enabled", "1");
} else {
  document.documentElement.style.setProperty("--vt-enabled", "0");
}

css

@view-transition {
  navigation: auto;
}

/* スマホ以外では View Transitions を完全に無効化 */
:root:not([style*="--vt-enabled: 1"]) {
  view-transition-name: none !important;
}

:root:not([style*="--vt-enabled: 1"]) .photo-1 {
  view-transition-name: none !important;
}

/* root のアニメーション */
@keyframes zoom-fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes zoom-fade-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.05); }
}

::view-transition-new(root) {
  animation: zoom-fade-in 0.5s ease;
}

::view-transition-old(root) {
  animation: zoom-fade-out 0.4s ease;
}

/* スマホでのみ有効になる .photo-1 */
.photo-1 {
  view-transition-name: photo-example-1;
  contain: paint;
}

jQueryを使わないウェブサイトを構築するための手法「デートピッカー編」

flatpickr

html

<link rel="stylesheet" href="flatpickr.min.css">
<script src="flatpickr.min.js"></script>

<input id="date" type="text">

設定例
・毎週の休日：土日を無効化
・個別の休日：配列で指定
・第1・第3・第5土曜日を休日：disableに関数を渡して判定

// 個別の休日（文字列 or Date）
const specificHolidays = [
  "2026-03-21",
  "2026-04-29",
  new Date(2026, 4, 3) // 2026-05-03
];

// 第1・第3・第5土曜日かどうか判定する関数
function isNthSaturday(date) {
  const day = date.getDay();      // 0:日〜6:土
  if (day !== 6) return false;    // 土曜以外は対象外

  const d = date.getDate();       // 日にち
  const nth = Math.floor((d - 1) / 7) + 1; // 第何週か（1〜5）
  return nth === 1 || nth === 3 || nth === 5;
}

flatpickr("#date", {
  dateFormat: "Y-m-d",
  disable: [
    // 個別の休日
    ...specificHolidays,

    // 関数で動的に無効化
    function(date) {
      const day = date.getDay();

      // 毎週の休日（例：日曜=0, 土曜=6）
      if (day === 0 || day === 6) return true;

      // 第1・第3・第5土曜日を休日にする
      if (isNthSaturday(date)) return true;

      // それ以外は有効
      return false;
    }
  ]
});