Twitterの埋め込みツイートのXHTMLへの変換ページTweet2XHTML

Twitterの埋め込みTweetをXHTMLに変換するページTweet2XHTMLを作ったので紹介する。

Twitterのツイートは，右下の［…（その他）］＞［ツイートをサイトに埋め込む］でブログなどで埋め込めるHTMLを取得できる。

例えば，以下のようなHTMLコードを取得できる。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">toolとutilityをどう使い分けるか悩む。WikipediaとLongmanの英英辞書を参照した。<br>toolは物理的なもの。仕事道具とかそういう感じ。<br>utilityはコンピューター向けの用語。POSIX:2008もこちらを使っている。<br>基本はutilityにするか。</p>&mdash; せのぺん (@senopen) <a href="https://twitter.com/senopen/status/733901332176736257">2016年5月21日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

これをブログに貼り付けると以下のように表示される。

toolとutilityをどう使い分けるか悩む。WikipediaとLongmanの英英辞書を参照した。
toolは物理的なもの。仕事道具とかそういう感じ。
utilityはコンピューター向けの用語。POSIX:2008もこちらを使っている。
基本はutilityにするか。
— せのぺん (@senopen) 2016年5月21日

このHTMLコードには以下の不満があった。

HTMLの形式になっており，XHTML文書に貼り付けるとエラーになる。具体的には以下の項目がエラーとなる。
- br要素に終端スラッシュがない。×：<br>，○：<br />。
- 文字実体参照—が使えない。×：—，○： —。
外部JavaScriptを使いたくないので，script要素は削除したい。

文字実体参照については，以下のように文書宣言時に定義してやれば使うことはできる。

<!DOCTYPE html [
  <!ENTITY mdash "&#x02014;">
]>

しかし，使用しているエディターのBlueGriffonで対応しておらず，HTML文書が汚くなるのでこの方法は避けたかった。

今まで手作業でその都度修正していたが，煩雑だったので，簡単に処理したかった。

そこで，自分で埋め込みツイートのHTMLをXHTMLに変換するページTweet2XHTMLを作った。

Tweet2XHTML

［変換元HTML］のフォームに埋め込み用ツイートのHTMLコードを貼り付けて，［変換］ボタンを押下すれば，［変換後HTML］のフォームに整形されて表示される。

やっていることは非常に初歩的なことで，単にtextareaの文字列を正規表現で処理しているだけだ。メインの処理部分は以下となる。

<script>
  function convert() {
    var value = document.getElementById("input").value;
    value = value.replace(/<br>/g, "<br />");
    value = value.replace(/&mdash;/g, "—");
    value = value.replace(/<script.*<\/script>/g, "");
      var target = document.getElementById("output");
      target.value = value;
  }
</script>

<form>
  <fieldset>
    <legend>変換元HTML </legend>
    <textarea id="input" placeholder="ここに記入してね。" style="width: 100%; height: 10em;"></textarea>
    <button type="button" onclick="convert();">変換</button>
  </fieldset>
</form>
<form>
  <fieldset>
    <legend>変換後HTML</legend>
    <textarea id="output" placeholder="ここに表示される。" style="font-family: monospace; width: 100%; height: 10em;"></textarea>
  </fieldset>
</form>

これでTweetを備忘録にまとめるのが楽になった。もう少しJavaScriptやフォーム関連の操作方法を勉強してこういった簡単なユーティリティーを作れるようになりたい。