panda大学習帳外伝

素材の味を活かしたリール動画。

WebComponentsを使ってCopyright表示の年号を制御するカスタムHTML要素を作成する。

最終更新日: Fri Jan 13 11:51:19 2023 +0900

はじめに

新年になった途端に気になるのが、Webサイト下部のCopyright表示の年号の更新作業です。

地味に面倒です。

更新対象となる箇所が1箇所とか2箇所のレベルであれば、直接その部分を編集ということでも何とかなるかもしれませんし、今までは実際にその方針で対応してきました。

しかし、1年に一度の作業ということで忘れがちな上に、このWebサイトのように更新の対象となる箇所が徐々に増えてくるタイプのWebサイトを構築してしまったりすると、年を追うごとに工数が増えていくこと請け合いです。

そこで、この状況を打開すべく、Web Componentsを使ってCopyright表示の年号を制御するだけのカスタムHTML要素をやっつけで作ることにしました。

簡単に仕様決め。

以下の仕様とします。

要素名は pandanote-copyright とする。
属性名は established とする。
1. established属性が指定された場合の挙動は以下の通りとする。
  1. 属性値としてページがアクセスされた年よりも前の年が指定された場合には “Copyright <established属性で指定された年>-<ページがアクセスされた年> by pandanote.info” と表示する。
  2. 属性値としてページがアクセスされた年と同じ年が指定された場合には “Copyright <established属性で指定された年> by pandanote.info” と表示する。
  3. この属性が指定された場合で、かつ属性値に前項または前々項以外の値(数字以外の文字列または空文字が指定された場合も含む。)が指定された場合には”Copyright 2020-<ページがアクセスされた年> by pandanote.info” と表示する。
2. established属性が指定されていない場合には”Copyright 2020-<ページがアクセスされた年> by pandanote.info” と表示する。

Web Componentsのプログラム

Web Componentsのプログラムを以下のように書いて、Webサーバがアクセスできる場所に置きました。

一般に簡単な処理を行うWeb ComponentsのプログラムではconntectedCallbackメソッドにカスタムHTML要素がドキュメントに追加されたときに行うべき処理を記述しますが、その方法だとestablished属性の属性値を取得することができなかったため、attributeChangedCallbackメソッドが呼び出されたときにestablished属性の属性値を取り出してCopyright表示に埋め込む処理を記述しています。

また、上記のコードの2-4行目でattributeChangedCallbackメソッドを呼び出す対象となる属性を記述しています。

なお、呼び出す対象となる属性が1種類であるため、attributeChangedCallbackメソッド内で属性名を確認する処理は省略しています。

上記のファイルをWebサーバがアクセスできる場所に置きます。

ここからは、本記事では上記のファイルを

https://vsse.pandanote.info/pandanotelink.js

に置いたものとして設定等を記述します。

設定例

headタグ側の設定

まず、通常のJavaScriptファイルと同様の方法でHTMLのheadタグの内側にscriptタグを挿入します。

<head>
   <script src="https://vsse.pandanote.info/pandanotelink.js"></script>
</head>

次に、footerタグの内側に以下のように記述します。

<footer>
   <pandanote-copyright established="2022"></pandanote-copyright>
</footer>

表示例

表示例です。

まとめ

やっつけで作成したこともあり、

要素名や属性名の命名センスがいまいちだったり、
Copyrightのメッセージの文言がWebサイト間で異なる場合にはどう対応するのか、

とかいったようなちょっと気になる点はありますが、当面の間はこれで運用してみることにします。

これで年が変わってもHTMLファイルをこまめに編集することはなくなりそうです。

この記事は以上です。

リンク

WebComponentsを使ってCopyright表示の年号を制御するカスタムHTML要素を作成する。

はじめに

簡単に仕様決め。

Web Componentsのプログラム

設定例

headタグ側の設定

footerタグ側の設定

表示例

まとめ

リンク