Web Components で serifタグをつくろう

kimizuka.hatenablog.com
kimizuka.hatenablog.com

以前、タグの説明をするときに、

「」が台詞を表すタグのようなものという話をしました。

マークアップに使う記号をタグと呼びます。
タグで囲まれた文章は意味がある文章になるわけです。

例えば、

四郎くんはこんなもの本当の寿司じゃないと言いました。

という文章があったときに、

「

を発言の開始を意味するタグ、

」

を発言の終了を意味するタグとするならば、

四郎くんは「こんなもの本当の寿司じゃない」と言いました。

とすることで、こんなもの本当の寿司じゃないという文章に対してセリフという意味が追加されることになります。

そして、実際にserifタグとかhatsugenタグとかをつくってみたりしたのですが、その時はcreateElementしただけだったので、特殊なメソッドは持っていないタグになりました。

今回は、Web Components の力をつかってsayメソッドを持ったserifタグをつくってみようと思います。

JavaScript

(function(doc) {

  "use strict";

  doc.registerElement('k-serif', {
      prototype: Object.create(HTMLElement.prototype, {
          // エレメントが生成された時のコールバック
          createdCallback: {
              value: function() {
                  this.addEventListener("click", this.say, false);
              }
          },
          // 独自メソッド
          say: {
              value: function(evt) {
                  var msg = new SpeechSynthesisUtterance(this.innerText);
                     
                  if (evt) {
                      evt.stopPropagation();
                  }
                      
                  msg.lang = "ja-JP";
                  speechSynthesis.speak(msg);
              }
          }
      })
  });
})(document);

CSS

k-serif {
  display: inline-block;
  cursor: pointer;
}
k-serif:before {
  content: "「";
}
k-serif:after {
  content: "」";
}
k-serif k-serif:before {
  content: "『";
}
k-serif k-serif:after {
  content: "』";
}
k-serif k-serif k-serif {
  font-family: san-serif;
}
k-serif k-serif k-serif:before {
  content: "「";
}
k-serif k-serif k-serif:after {
  content: "」";
}

こんな感じで定義してみました。

DEMO

実際にserifタグをつかってマークアップしてみたデモがこちらです。
serifタグの前後には自動で「」が付き、クリックするとセリフを読み上げてくれます。

実際にサーバ上にアップしてあるので、head内で、

<link rel="import" href="http://kimizuka.github.io/html5plus/serif/index.html" />

という感じでインポートすればどんなページでもつかえるようになるはずです。