2024-04-18

PHP 配列からいい感じに CSS のクラス名を作りたい

3億年ぶりに古の WordPress 製のサイトを更新する必要があり、PHP のテンプレートで CSS のクラス名を動的に作成する必要があった JavaScript で言うところの classnames のような挙動をさせたい

CSS のクラス

class="foo bar mofu" のような形

スペース区切りの文字列
クラス名が重複していても特に問題はない

配列から Falsey な値を取り除いてスペースで結合すれば良い

TypeScript での例

export const classnames = (
 ...args: (string | undefined | null | false)[]
): string => {
  if (!args.length) {
    return '';
  }
  return args.filter((value) => 
    value !== null && value !== undefined && value !== false && value !== ""
  ).join(' ').trim();
};

細かいことを抜きにしらこんな感じで実現できる
これに近いことを PHP で実装できれば OK

`array_filter` + `implode` で実現する

array_filter で配列から Falsey な値を取り除く
implode で配列をスペース区切りで文字列結合する

<?php declare(strict_types=1);
function classnames(array $arr): string {
  return implode(' ', array_filter($arr));
}

echo classnames(['ichigo', false, 'aoi', 0, 'ran', '', null, 'akari']);
// -> "ichigo aoi ran akari"

このコードには下記の問題があるが、ライブラリとして公開しているわけでもないのでヨシ！とした

0 や "0" も Falsey な値として除去されてしまうが、そんな class 名を付けることはほぼ無い想定とした
関数に型を設定しているが、PHP の形は array に含まれる要素の型を指定する方法がイマイチわからなかったので、文字列変換できないものが渡されるとクラッシュする可能性がある

`array_filter` Example #2 array_filter() without callback

<?php
$entry = [
    0 => 'foo',
    1 => false,
    2 => -1,
    3 => null,
    4 => '',
    5 => '0',
    6 => 0,
];
print_r(array_filter($entry));
// Array
// (
//     [0] => foo
//     [2] => -1
// )

cf. PHP: array_filter - Manual

うごいてるからヨシ！

おわり ฅ^•ω•^ฅ

[参考]

プログラミングPHP 第4版

作者:Kevin Tatroe,Peter MacIntyre
オーム社

Amazon

ちょうぜつソフトウェア設計入門――PHPで理解するオブジェクト指向の活用

作者:田中ひさてる
技術評論社

Amazon

TOYS CABIN 仕事猫ソフビフィギュア 1 「ヨシ!」全高約200mm ソフビ製塗装済み完成品フィギュア

トイズキャビン(Toys Cabin)

Amazon

2024-04-15

ムームードメインに移管したドメインが clientHold になり使えなくなってた

Tips Domain ムームードメイン GoogleDomains

Google Domains が亡くなり移行先の費用がお高そうだったので、ムームードメインにドメインを移管したのだけれどドメインが全くアクティブにならずハマってしまった。ドメインの移管は何度も行うものではないが、ハマってしまうとしばらくサイトが見れなかったりメールが使えなかったり困るので備忘録としてメモ

Google Domains からムームードメインに移管

Google Domains で Registration settings > Domain lockからドメインを unlock する
Transfer out > Get authorization code > To a different domain registrar から移行用の認証コード（AuthCode）を発行する
ムームドメイン > ドメイン取得・移管 > ドメイン移管から「ドメイン移管申請」をクリック
移管するドメイン名と 2 で発行した認証コード（AuthCode）を入力して入力内容確認 > 移管申請
数日後にムームードメインから移管費用のメールが来るので、支払いをする

この状態でムームードメインの管理画面からドメインの設定が変更できるようになっていたので移管が完了したと認識していたが、DNS などの設定を行っても一向にドメインが反映される気配がなかった

ドメインのステータスが `clientHold` になっていた

ICANN Lookup でドメインの状態を調べたら Domain Status が clientHold になっていた

clientHold
This status code tells your domain's registry to not activate your domain in the DNS and as a consequence, it will not resolve. It is an uncommon status that is usually enacted during legal disputes, non-payment, or when your domain is subject to deletion.
cf. EPP Status Codes | What Do They Mean, and Why Should I Know? - ICANN

ドメインの移行が正常に完了してないっぽいのが原因のようだった

ムームードメインから「ドメイン情報認証」関連のメールが来ていない問題

移管したドメインがムームードメインの管理画面未認証ドメイン一覧に乗ったままになっており、表示されるモダールで有効なメールアドレスである事を確認するボタンを押しても一向にドメイン情報認証のメールが送られてこない状況

WHOIS でムームードメインの情報を代理公開のしているとドメイン情報認証のメールが来ない

移管したドメインがの WHOIS が 弊社の情報を代理公開 になっていたのが原因

WHOIS情報変更ムームードメイン

WHOIS情報変更を お客様の情報 に変更
登録者情報 (Registrant)、管理者情報(Admin)、技術者情報 (Technical)、請求先情報 (Billing) を自分の情報に変更 (登録者情報をコピーできる)
ムームードメインから「登録者名義変更承認依頼」というメールが届くのでメール内の URL をクリックして承認
承認が完了すると「【重要】[ムームードメイン] ドメイン情報認証のお願い」というメールが届くのでメール内の URL をクリックして認証する
お客様情報公開完了のお知らせというメールが届き、数日後に clientHold が解除されドメインが有効になった

WHOIS をムームードメインに代理公開の設定をしているとドメインの移管が完了しないのは罠だった
未認証ドメイン一覧にもその旨が書いてあるが、かなり小さく書かれているので見逃してしまっていた
clientHold とかは全然知らなかったので勉強になった。ドメインがアクティブにならないときは ICANN Lookup でドメインの状態を確認すして原因を絞っていくのが良さそう

おわり

[参考]

ドメイン駆動設計入門ボトムアップでわかる！ドメイン駆動設計の基本

作者:成瀬允宣
翔泳社

Amazon

宇宙人ムームー(1) (ヤングキングコミックス)

作者:宮下裕樹
少年画報社

Amazon

2024-04-10

React TypeScript 改行が含まれれるテキストをいい感じに改行させたい

TypeScript React JavaScript

前にも同じようなことやったけど React.createElement を使った TypeScript 版を作ったのでメモ

import { ReactElement, createElement } from 'react';
const newlineRegex = /(\r\n|\r|\n)/g;

export const nl2br = (text: string): (string | ReactElement)[] => {
  return text.split(newlineRegex).map((line, index) => {
    if (line.match(newlineRegex)) {
      return createElement('br', { key: index });
    }
    return line;
  });
};

1 引数で渡された文字列 text に含まれる改行コードをキャプチャして分割

split(separator)
If separator is a regular expression that contains capturing parentheses ( ), matched results are included in the array.
cf. String.prototype.split() - JavaScript | MDN

"星宮いちご\n霧矢あおい\n紫吹蘭".split(/(\r\n|\r|\n)/g);
// => ['星宮いちご', '\n', '霧矢あおい', '\n', '紫吹蘭']

2 改行コードを createElement('br', { key: index }) で brタグに変換して返す

createElement(type, props, ...children)
props: The props argument must either be an object or null. If you pass null, it will be treated the same as an empty object. React will create an element with props matching the props you have passed. Note that ref and key from your props object are special and will not be available as element.props.ref and element.props.key on the returned element. They will be available as element.ref and element.key.
cf. createElement – React