f

アーカイブ

2016-05-21

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>

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

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

  • HTMLの形式になっており,XHTML文書に貼り付けるとエラーになる。具体的には以下の項目がエラーとなる。
    • br要素に終端スラッシュがない。×:<br>,○:<br />
    • 文字実体参照&mdash;が使えない。×:&mdash;,○:
  • 外部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やフォーム関連の操作方法を勉強してこういった簡単なユーティリティーを作れるようになりたい。

0 件のコメント:

コメントを投稿