ツイート表示パーサー
投稿: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ソースをご覧ください。