2024年03月15日 | Teruhiro Komaki's Diary (Archive)

2024年03月15日

Teruhiro Komaki komaki.dev

2024年 03月 15日金曜日

23時00分

ドメインを取得しても、安易にメールアドレスを作らない方がよいと思う

みなさん、自分のWebサイトを公開するために、#ドメインを取得すると思いますが、その際に気を付けていることがあります。

それは…

安易にメールアドレスを作らないことです。

自分が生きているうちは、基本的に、#ドメインの更新を忘れることはないと思います。

しかし、私たちは、いつどこでなにが起こるか分からない環境にいます。

外を歩いていたら、突然事故にあって亡くなる可能性だってあるわけです。もし、自分の身に万が一のことがあり、ドメインの更新ができなかった場合、どうなるでしょうか？

更新期限が過ぎてしまい、#ドメインは失効し、第三者に#ドメインが渡ってしまいます。

その第三者が、メールをキャッチオールするように設定すれば、その#ドメインのメールを全て受信できてしまいます。

たとえば、Cloudflareの場合、以下のように記載されている通り、管理画面から簡単に設定できます。

Cloudflare Email Routing
容易なアドレス作成とメール転送が無料で
ドメインのカスタムメールアドレスを作成します。
設定されていないアドレス用のキャッチオールアドレスをオプションで追加します。
お好みの受信箱へメールを転送します。
すべて、プライマリメールアドレスを決して露出することなく行います。

Email Routing | アドレス作成とメール転送が簡単に | Cloudflare

失効のリスクのほかに、メインのメールアドレスとして使ってしまうと、将来にわたり、#ドメインを捨てることが難しい状況になります。

そのため、#ドメインを取得した際に、安易にメールアドレスを作ると、万が一のリスクがあるので、十分に気をつけましょう…

gandi.netの以下のブログを見ると、近しいことが書いてありました。

Facebook や Twitter などのソーシャルメディアのプロフィールは、一部の金融機関と同様に、電子メールアドレスにリンクされています。
個人アカウントとは別に、電子メールアドレスは、(有効期限が切れていない) ドメイン名などのオンライン資産を管理するアカウントにリンクできます。
ユーザーまたはオンラインサービスが (場合によっては自動的に) ホストされているドメイン名に電子メールを送信しようとしたときに、そのドメインが存在しない場合、電子メールはバウンスされます。
その結果、ドメイン名の有効期限が切れると、そのドメイン名に送信される可能性のある電子メールにとっても魅力的なものになります。
再登録された期限切れドメインに設定されたキャッチオール電子メールアドレスは、あらゆる電子メールをキャプチャすることができ、ソーシャルメディアプロファイル、銀行口座、ドメイン名、IP アドレスブロックへのアクセスを他人に与えてしまう可能性があります。

The domain name afterlife

私は、家族ができ、子供が大きくなるにつれて、自分の#死後のことを意識するようになりました。

少し大げさかもしれませんが、#ドメインやメールアドレスだけでなく、パスワードマネージャーなど、家族が困らないように、日々意識して準備しておいても良いのかもしれません…

1Passwordのファミリープランを検討しないと。

Teruhiro Komaki komaki.dev

2024年 03月 15日金曜日

15時50分

Googleのリフレッシュトークンの有効期限について

#FileMakerから、#Googleの#APIを利用する際に、#リフレッシュトークン(更新トークン)をFileMakerの内部で管理します。

その際に、お客様から「#リフレッシュトークンは、更新する必要がなく、ずっと使えるの？」と良く質問を頂きます。

ということで、リンクを張っておきます。

リフレッシュトークンの有効期限について

付与された更新トークンが機能しなくなる可能性を想定したコードを記述する必要があります。更新トークンが機能しなくなる理由は、次のいずれかです。

ユーザーがアプリのアクセス権を取り消した。

更新トークンが 6 か月間使用されていません。

ユーザーがパスワードを変更し、更新トークンに Gmail スコープが含まれている。

ユーザーアカウントが付与されている（有効な）更新トークンの最大数を超えています。

管理者がアプリのスコープでリクエストされたサービスのいずれかを制限付きに設定した場合（エラーは admin_policy_enforced）。

OAuth 2.0 を使用して Google API にアクセスする | Authorization | Google for Developers

ということで、基本的には一度取得した#リフレッシュトークンは、無効化されることがないという認識です。

Teruhiro Komaki komaki.dev

2024年 03月 15日金曜日

13時00分

CSSの属性セレクターについて

#CSSは、必要に迫られたり、分からないことがあれば、適宜勉強するという程度なので、かなり素人です。

何かのきっかけで、属性セレクターを見つけました。

CSS の属性セレクター (attribute selector) は、指定された属性が存在するかどうか、またはその値に基づいて要素を選択します。

属性セレクター - CSS: カスケーディングスタイルシート | MDN

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS</title>
  <style>
    :root {
      --color-primary: #cfe2ff;
      --color-success: #d1e7dd;
      --color-warning: #fff3cd;

      --bg-color: var(--color-primary);
    }

    [param=a] {
      --bg-color: var(--color-success);
    }

    [param=b] {
      --bg-color: var(--color-warning);
    }

    .color {
      background-color: var(--bg-color);
    }

  </style>
</head>
<body>
<div>
  <p class="color">test</p>
  <p class="color" param="">test</p>
  <p class="color" param="invalid">test</p>
  <p class="color" param="a">test</p>
  <p class="color" param="b">test</p>
</div>
</body>
</html>

スクショもはっておきます。

Bootstrapは、ダークモードを始めとするカラーモードをサポートするようになりました！
v5.3.0では、独自のカラーモード・トグラーを実装することができ（Bootstrapのドキュメントにある例は下記を参照）、適切と思われるさまざまなカラーモードを適用することができます。
ライトモード（デフォルト）とダークモードをサポートしています。
カラーモードは、<html>要素上でグローバルに切り替えることも、data-bs-theme属性のおかげで、特定のコンポーネントや要素上で切り替えることもできます。

カラーモード · Bootstrap v5.3

Teruhiro Komaki komaki.dev

2024年 03月 15日金曜日

00時30分

EleventyのPaginationについて

このサイトは、#Eleventyを使って、HTMLを生成しています。

#EleventyのPaginationという機能を使い、、以下のスクショのように、年、月、日、タグのページを動的に生成しています。

タグのページを動的に生成する書き方は、以下のページに丁寧に書かれています。

Quick Tip #004—Zero Maintenance Tag Pages for your Blog — Eleventy

以下のようなFront Matterを書けば、動的にタグのページが生成されます。

すばらしく簡単です！

---
pagination:
  data: collections
  size: 1
  alias: tag
permalink: /tags/{{ tag }}/
---
<h1>Tagged “{{ tag }}”</h1>

<ol>
{% set taglist = collections[ tag ] %}
  {% for post in taglist | reverse %}
    <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
  {% endfor %}
</ol>

実装するなかで、ひとつ課題がありました。

以下のようにcollectionApi.getAll()をしても、Paginationの結果がNページある場合においても、1ページしか取得できない問題に遭遇しました。

eleventyConfig.addCollection('allPost', (collectionApi) => {
    const posts = collectionApi.getAll()
    for (const post of posts) {
      console.log(post.data.title)
    }
    return posts
  });

調べてみると、以下のIssueに答えがありました。

Collections.all only lists first page created with pagination, not others · Issue #253 · 11ty/eleventy

以下のように、Paginationを設定しているファイルのFront MatterにaddAllPagesToCollections: trueを追加することで、すべてのPaginationのページが取得できました。

---
pagination:
  addAllPagesToCollections: true
---