2024-04-15

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

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

React.createElement の第二引数が props なので key を設定できる

やってることは同じだけど、前の React.Fragment を使う方法よりシンプルにかけた気がする

おわり ₍ ᐢ. ̫ .ᐢ ₎

[参考]

1冊ですべて身につくJavaScript入門講座

作者:Mana
SBクリエイティブ

Amazon

【Amazon.co.jp限定】アイカツ！ミュージックフェスタ FINAL Day2 Live Blu-ray【初回生産限定版】（全巻購入特典：アクリルプレート引換シリアルコード＆Amazonオリジナル特典：A4キャラファインマット付き）

V.A.

Amazon

2024-04-09

CSS リストをいい感じに折り返す横並びにしたい

CSS HTML Tips

リストの間隔は gap で指定したい場合、flex だと各アイテムの width を設定しなければならず面倒

例えば上記の画像のように gap: 24px で 3つ並びにしたいと思った場合、リストアイテムの width を 33.333% にするとアイテム間の間隔分が足らず 100% を超えてしまうので 2 つで折り返してしまう。この程度のことに calc を使うのも計算量が増えるので避けたい

grid を使って折り返しのあるリスト表示を実現する

.list {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: repeat(3, auto);
  gap: 24px;
}

grid-template-columns に repeat を使うことで同じ感覚で自動的に折り返すグリッドを作ることができる

repeat(repeat count, tracks)

repeat count: the first argument specifies the number of times that the track list should be repeated. It is specified with an integer value of 1 or more, or with the keyword values auto-fill or auto-fit. These keyword values repeat the set of tracks as many times as is needed to fill the grid container.

tracks: the second argument specifies the set of tracks that will be repeated. Fundamentally this consists of one or more values, where each value represents the size of that track. Each size is specified using either a <track-size> value or a <fixed-size> value. You can also specify one or more line names before or after each track, by providing <line-names> values before and/or after the track size.

cf. repeat() - CSS: Cascading Style Sheets | MDN

tracks を 1セットとして repeat count 分で折り返す
grid-template-columns: "repeat(3, auto)" は width: auto な要素を 3 つづつで折り返すの意味となる。
要素の幅を等幅にするなら "repeat(3, 1fr)" とすればよい。アイテム数が少なくても 3 つに固定したい場合はシンプルに grid-template-columns: 1fr 1fr 1fr; としてもよい。

この方法の注意点としては、要素が repeat count 以下であっても gap 分の余白が生まれてしまうので、横幅が 100% にはならない可能性がある