HTML5のCustom Elementsを使って再利用できるリンク集の出力用のタグを作ってみた。

はじめに

GitHub Pagesだと、リンク集を設置する場所に

{% include linklist.md %}

と書いておいて、_includes ディレクトリの下にリンク集を記述するためのファイル(上記の例ではmarkdownファイルですが、HTMLファイルもincludeできます。)を作成すると、そのファイルの内容をメンテナンスするだけでリンク集の内容を管理できたりします。

これと似たような(リンク集の内容を管理するための)仕組みをもっと一般的で、かつあまり手間のかからない方法で実現できると便利そうだと思ったので、HTML5のCustom Elementsを使って作ってみることにしました。

Custom Elementsとは?

もののHTML5の仕様書によりますと、Custom Elementsとは

「HTML5において完全に機能するDOM要素を作成する手段を(HTML5によってドキュメントを記述する者に対して)提供するものである。」

と記載されています(括弧内は明確な記載のない部分ですが、表現を補っています)。

…ということなのですが、微妙に難解な感じがします。

そこで、本記事では「新しいタグを定義するための手段」であるとざっくりととらえることにします。

なお、Custom Elementsによって定義できるタグ名として使用できる文字列は、先頭及び末尾の文字を除いた文字列中に”-“が1回だけ含まれるものに限られます(この条件を満たしていてもHTML5の他の仕様により属性名などで使われている等の理由で使用できない文字列もあります。参考文献[1]の「4.13.3 Core concepts」の後ろの方参照)。

作ってみた。

課題の設定

[1]にもある通り、Custom Elementsの仕様だけでもそれなりの記述量だったり、JavaScriptのコードが登場したりと難解そうな感じにも見えますが、

「特定のHTMLのsnippetを挿入するための属性を持たない新しいタグを定義する。」

といった感じの単純な課題設定にすると、なんとなく作れそうな予感がしてきます。

タグの定義

タグの設定にはJavaScriptによるコードの記述(↓)が必要です。なお、タグ名は”pandanote-linklist”としてみました。

課題を前節に記述した形に単純化しているため、属性の処理やタグの子要素の処理についてはばっさり省略しています。

↑のコードで注意が必要なのは以下の3点です。

タグを定義するためのクラスをHTMLElementを拡張して作成する(2行目)。
前項のクラスのコンストラクタでは最初にsuper()を実行する(4行目)。
タグが現れたときの処理(表示させたい文字列の指定も含みます。)はconnectedCallback()メソッドに
記述する(7行目)。

上記に加え、タグを定義するためのdefineメソッドを実行するためのコードを記述する(12行目)と完成です。

あとは(仕様書には記述されていませんが)、上記のコードは外部ファイルに切り出しておき、scriptタグで読み込めるようにしておくと、HTMLの記述(デザイン)とタグの内容の定義(ロジック)を分離することができます。

タグの使用

前節のJavaScriptのファイル(以下、単に「JavaScriptファイル」と書きます。)ができたら、headタグの間にscriptタグを用いてJavaScriptファイルを読み込むための記述を挿入し、bodyタグの間のリンク集を表示させたいところに以下のように記述します。

<pandanote-linklist></pandanote-linklist>

すると、そのHTML5のファイルがブラウザに読み込まれたときにタグが処理され、リンク集が表示されます。

表示例

表示例は以下のような感じになります(このページでの表示例(下図の赤矢印)です)。

まとめ

この記事ではリンク集のためのタグを定義してみました。

HTML5と言いながらタグの定義のためにJavaScriptが登場するところがいまいちインチキくさい感じもしますが、ブラウザでのリッチなコンテンツの表示や処理の際には(自動的に生成されるものを含めて、)JavaScriptをどこかしらで使用せざるを得ないのが実情です(この記事を最初に書いた時点(2020年11月)の情報です)。

また、JavaScriptのコードを実装するために(ブラウザ以外の)追加のソフトウェアライブラリやアプリケーションフレームワークなどのインストールやセットアップが不要であることを考慮すれば、JavaScriptのコードを書くこと自体はこの記事の最初に書いた「あまり手間のかからない」範囲内に収まっていると考えてよいと思います。

あとは、属性の処理やタグの子要素の処理の記述方法を覚えれば、Custom Elementsを使いこなしてHTML5の記述中からよく使う記述をパーツとして切り出すことができるようになると思います😎。

この記事は以上です。