ルモーリン

ツイート表示パーサー

投稿:2022-06-04

これまで、ツイートの「ブログに埋め込む」からソースをコピーして貼り付けていました。 ところが、上で紹介したブログを拝見して、そこからツイッターのリファレンスを見るとツイートIDがあれば表示できそうです。 英語知らないけど、たぶんそんなことが書いてある。
Embedded Tweet JavaScript Factory Function | Docs | Twitter Developer Platform

ツイート表示用のdivタグをDOMで指定してtwttr.widgets.createTweetを呼ぶといい感じに作ってくれます。 希望のdivタグをidで選択するためにユニークなidを生成しなくてはなりません。 ページ内での通し番号でも良いですけれど、ページに同じツイートは1個だけだから(慢心)、ツイートIDの頭に「tweet_」を付けてdivのidにしました。

<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<div id="tweet_1528363877301637126"></div>
<script>
twttr.widgets.createTweet(
	"1528363877301637126",
	document.getElementById("tweet_1528363877301637126"),
	{
		"conversation": "none",
		"lang": "ja",
	}
);
</script>

自分で記事を書く際に上のコードを入れるのは面倒ですし、表示のインターフェースが変更されてしまうと記事中の全部のコードを修正するハメになります。 そこでツイートIDだけを書いて、自動的に上のコードが展開されるようにする訳です。

<pre ppmod="PpTweet">
1528363877301637126
</pre> 

上で書いたツイートIDを拾って、ツイートを表示する処理に展開するパーサーを書きます。 preタグとppmodアトリビュートからPpTweetを呼び出す処理は既存であとはPpTweetを書く訳です。 例によってシンタックスハイライトが迷子になってます(笑)。

package PpTweet;
# エディタの文字コード判定用に漢字のコメントを置いておきます。
use Mojo::Base "Mojolicious::Plugin";

sub register {
	my ($self, $app, $conf) = @_;

	$app->helper(PpTweet => sub {
		my $self = shift;
		my @inhtml = @_;

		my @outhtml;

		push @outhtml, '<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>';
		push @outhtml, qq#<div id="tweet_$_"></div># for @inhtml;
		push @outhtml, "<script>";
		for (@inhtml) {
			push @outhtml, split /\n/, <<EOF;
twttr.widgets.createTweet(
	"$_",
	document.getElementById("tweet_$_"),
	{
		"conversation": "none",
		"lang": "ja",
	}
);
EOF
		}
		push @outhtml, "</script>";

		return @outhtml;
	});
}

1;

この記事の冒頭に紹介させていただいたツイートもパーサーで展開していますから、HTMLソースをご覧ください。