レ点腫瘍学ノート

pukiwikiカスタマイズ箇所/自作プラグイン/tweet.inc.php/tweet.inc.php_ver1.0 の履歴差分(No.1)


#author("2021-04-29T07:39:47+09:00;1970-01-01T18:00:00+09:00","default:tgoto","tgoto")
Twitterの単体のツイートを埋め込むだけのプラグインです。TLの複数のツイートを埋め込んだり検索結果を表示するような高度な機能は備えていません。

*しくみ [#e912c2a4]

Twitter Publishで発行されるHTMLタグを出力するだけなので単純な構造です。プラグインの第1引数にツイートIDかツイートのURLのどちらかを記載します。

> #tweet(94008462) // ツイートIDを書く場合
> #tweet(https://twitter.com/m0370/status/94008462) // ツイートURLを書く場合

上記のように記載すれば、下記のようなツイートが表示されます。

#tweet(94008462)

**ツイートが読み込めないときのフォールバックを設定できます。 [#yb25cb7d]

Twitter Publishでツイートを埋め込むためのHTMLを出力させることができるので、これを複数行の第2引数として記載しておくと、ツイートが読み込めなかったときのフォールバックとして表示されます。遅延読み込みが完了するまでの間のスペースホルダとしても利用できます。

#ogp(https://publish.twitter.com/)

> #tweet(94008462){{
> <blockquote class="twitter-tweet"><p lang="en" dir="ltr">Installing Twitter!</p>&mdash; レ点.bot💉💊🧬 (@m0370) <a href="https://twitter.com/m0370/status/94008462?ref_src=twsrc%5Etfw">June 7, 2007</a></blockquote>
> }}

上記のように記載しておくと、下記のようになります。

#tweet(94008462){{
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Installing Twitter!!</p>&mdash; レ点.bot💉💊🧬 (@m0370) <a href="https://twitter.com/m0370/status/94008462?ref_src=twsrc%5Etfw">June 7, 2007</a></blockquote>
}}

**昔すぎるツイートは読み込めません [#m6057daa]

ツイートのURLでもツイートIDでも使用できるようにしていますが、ツイートIDかどうかを判定するところを暫定的に8桁で判定しているので、非常に昔のツイート(ツイートIDが7桁以下だった時代)のツイートは読み込めません。

ぼくがTwitterを始めた2007年6月の時点ですでにツイートIDは9000万台なので、ツイートIDが7桁と言えば2006年かそれ以前でしょうか…(ちなみに当時のTwitterはまだインターフェイスが日本語化されておらず非常にマイナーでした)。

#tweet(94008462)

**遅延読み込みを有効にするには [#deca4313]

lazysizes.jsを使用しているサイトでは遅延読み込みを使用することができます。遅延読み込みをしない場合のツイート埋め込みは、ページ読み込み速度を評価するPagespeed Insightのスコアが非常に悪くなり、ひいてはSEOにも悪影響を与えるので、lazysizes.jsを使っているサイトでは設定の遅延読み込み部分をTRUEにすることをオススメします。

> define('PLUGIN_TWEET_LAZYLOAD', 'TRUE'); //遅延読み込み有効(lazysizes.jsが必要です)
> define('PLUGIN_TWEET_LAZYLOAD', 'FALSE'); //遅延読み込み無効

なお、この設定をTRUEにする場合のlazysizesは、blockquote要素でも遅延読み込みを有効にするためのunveilhooksプラグインを併用する必要があります。当サイトではJavaScript用CDNのJsdelivrを使っていますので、下記のHTMLタグをスキンに設置しておいて外部からこのjsファイルを読み込ませています。もちろんローカルに設置してもかまいません。

> <script src="https://cdn.jsdelivr.net/combine/npm/lazysizes@5,npm/lazysizes@5/plugins/unveilhooks/ls.unveilhooks.min.js" async></script>

*プラグインの中身 [#d0d59eba]

 <?php
 
 define('PLUGIN_TWEET_LAZYLOAD', 'TRUE'); // lazysizes.jsを使っているサイトはTRUEに、使っていないならFALSEに
 
 function plugin_tweet_convert()
 {
 $amptw = func_get_args();
 preg_match('/[0-9]{8,30}/', $amptw[0], $tweetids); //URLでもツイートIDでも投稿できるように
 $tweetid = $tweetids[0];
 
 if (PLUGIN_TWEET_LAZYLOAD) {
 	$twitterjs = '<div class="lazyload" data-script="https://platform.twitter.com/widgets.js"></div>';
 } else {
 	$twitterjs = '<div script="https://platform.twitter.com/widgets.js"></div>';
 }
 
 return <<<EOD
 <blockquote class="twitter-tweet">
    <a href="https://twitter.com/user/status/$tweetid">$amptw[1]</a>
 </blockquote>
 $twitterjs
 EOD;
 }
 ?>