カスタムタグを使ってバブルタグを作りました

未分類

JSを使ってカスタムタグが作れることをようやく知りました。さっそくHTMLからバブルを表示するタグを作ってみたので公開します。
　HTMLの体裁をなるべく崩さずにバブルだけを追加できるようにしたので、HTMLに２行追加するだけで使用できます。

作ったカスタムタグ（t-bubbleタグ）

　ホームページ上で？の上をマウスがホバーするとメッセージを表示してくれるアレです。
<t-bubble>一つ目のバブル</t-bubble>
実行した様子は次のようになります。

サンプルページ

インストール方法

①t-script.jsを配置して、Html上から呼び出す

　配置イメージ
　└htdoc
　　└index.html　←　追加したいHTML
　　└t-script.js　←　ライブラリファイル（他のフォルダでもリンクされていれば使えます）

　ダウンロード先
　　t-script.jsのダウンロード先　

②htmlから呼び出す

　t-bubbleを呼び出す最小構成

<!DOCTYPE html>
<head><meta charset="UTF-8" /></head>
<body>
	<script src="./t-script.js"></script>
	<t-bubble>バブルの表示</t-bubble>
</body>
</html>

t-bubbleタグの使用方法

　タグ　t-bubble
　属性　icon 画面上に表示されるアイコン　未指定だと”?”
　　　　bgColorバブルの色を指定　未指定だと”4fc3f7″
　　　　colorバブル上の文字色を指定　未指定だと”white”

　構文(html)

<t-bubble>バブルに表示する内容</t-bubble>
<t-bubble icon="cotion" bgcolor="#d52f25" color="#ffe556" >警告メッセージ</t-bubble>
<script src="./t-script.js"></script>

t-script.jのファイル内容

t-scriptの内容は次の通りです。
t-bubbleタグが複数あってもオブジェクトを判別できるようにしています。

class BubbleText extends HTMLElement {
  constructor() {
    super();

    const text = this.textContent || "バブルが指定されていません";

    // コンテナ作成
    const container = document.createElement("span");
    container.style.position = "relative";
    container.style.display = "inline-flex";
    container.style.alignItems = "center";
    container.style.gap = "6px";

    // アイコン
    const icon = document.createElement("span");
    icon.textContent =  this.getAttribute("icon") || "?";
    icon.style.cursor = "pointer";
    icon.style.userSelect = "none";
    icon.style.fontSize = "0.8em";
    icon.style.backgroundColor= "#cccccc";
    icon.style.padding= "3px";
    icon.style.borderRadius= "5px";
    icon.style.color="#ffffff";

    // 吹き出し
    const bubble = document.createElement("span");
    const bgcolor = this.getAttribute("bgColor") || "#4fc3f7";
    const fontcolor= this.getAttribute("color") || "#ffffff";
    
    
    bubble.textContent = text;
    Object.assign(bubble.style, {
      position: "absolute",
      top: "-25px",
      left: "0px",
      backgroundColor: bgcolor,
      color: fontcolor,
      padding: "6px 10px",
      borderRadius: "8px",
      fontSize: "12px",
      whiteSpace: "nowrap",
      boxShadow: "1px 1px 4px rgba(0,0,0,0.3)",
      display: "none",
      zIndex: "9999"
    });

    // 三角形
    const arrow = document.createElement("span");
    Object.assign(arrow.style, {
      position: "absolute",
      bottom: "-6px",
      left: "10px",
      width: "0",
      height: "0",
      borderLeft: "6px solid transparent",
      borderRight: "6px solid transparent",
      borderTop: "6px solid " + bgcolor
    });
    bubble.appendChild(arrow);

    // 表示on/off
    icon.addEventListener("mouseenter", () => {
      bubble.style.display = "block";
    });
    icon.addEventListener("mouseleave", () => {
      bubble.style.display = "none";
    });

    // 元のテキストを消す
    this.textContent = "";
    const content = document.createElement("span");

    // アペンド
    container.append(icon, bubble, content);
    this.appendChild(container); 
  }
}

//カスタムタグの定義
customElements.define("t-bubble", BubbleText);

最後に

カスタムタグ面白いですね。
最近はWordpressで記事を書くことが多かったので、htmlをガリガリする機会が減っていたのですが、カスタムタグ＋JSがあれば、まだまだいけるんじゃないかと思い始めました。
JSだとSCC部分をSTYLEとして変更することができるので、作りこめばかなりいろいろできそうですね。