レ点腫瘍学ノート

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


#author("2020-04-28T08:01:42+09:00;1970-01-01T18:00:00+09:00","default:tgoto","tgoto")
#author("2020-04-28T08:46:48+09:00;2020-04-28T08:01:42+09:00","default:tgoto","tgoto")
#ref(https://oncologynote.com/img/c0f678f270.jpg,nolink)

*AMP-Twitterプラグイン

PukiwikiをAMP化するとtweet_inc.inc.phpを使うとAMPエラーが出るので、AMP-twitterスクリプトに対応するツイート引用プラグインを作成しました。

なお、描画に少し時間がかかるのが課題です。低速回線では読み込みまでにかなりのタイムラグが生じるでしょう。せっかく高速化しているAMPページなのにツイートの読み込みのためにページ全体の描画が遅れるのは非常にもったいないです(ページ全体が真っ白のままで固まるのでPHPエラーを出したかと勘違いしてしまう)。

公式では低速回線のためにfallbackの方法が記載されていますが、fallbackではなく遅延読み込みとか非同期描画の方法はないもんでしょうかね…。

*使い方

**事前準備

これを使うにはヘッダーでAMP-twitterのスクリプトをインクルードしておくことが必要です(pukiwiki.skin.phpのHTMLコードに直打ちが必要)。

> <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

なお、amp-Twitterのasync属性をdefer属性に変更してみたら描画が遅いのは少し改善されるかもしれません。つまりHTMLパースが終了するまでamp-Twitter.jsを実行しないようにします。描画がバグる可能性はありますが、数回の試行では真っ白で固まる事象は回避できてるように思います…。


**サンプル

#amptwitter(1254597997008060416)

**記載方法

> #amptwitter(1254597997008060416)

ツイートを引用したい場合は第1引数をツイートIDにします。第2引数にレイアウトを選択できるようにする予定ですが、AMP公式のAMP-twitterスクリプトの仕様自体が未完成でlayoutやサイズ指定が効かないので、現時点ではresponsive表示にしか対応していません。(これはこのプラグインの問題というよりは、本家のAMP-Twitterスクリプトの問題です)

#ogp(https://amp.dev/documentation/components/amp-twitter/,amp)

* スクリプト

下記のスクリプトをテキストファイルに貼りつけて、ファイル名をamptwitter.inc.phpとしてpluginのフォルダにアップロードします。

> <?php
> 
> // 'amptwitter' plugin for PukiWiki ver.0.9
> // author: m0370
> // Twitter: @m0370
> 
> // ver1.0 (2019.9.10)
> // ひとまずAMP-twitterのタグを出力する機能を実装しました。
> 
>  function plugin_amptwitter_convert()
> {
>  $amptw = func_get_args();
>  $tweetid = $amptw[0];
>  $layoutarray = array('fill','fixed','fixed-height','flex-item','nodisplay');
>  $amptwl = in_array($apmtw[1], $layoutarray);
>  if ($amptwl){
>     $layout = $amptw[1]; 
> } else{
>     $layout = "responsive";
> }
>  return <<<EOD
>  <amp-twitter
> 	data-tweetid="$tweetid"
> 	width="800"
> 	height="600"
> 	width="300"
> 	height="300"
> 	layout="$layout">
>  </amp-twitter>
>  EOD;
> }
> ?>