- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-04-28T08:46:48+09:00;2020-04-28T08:01:42+09:00","default:tgoto","tgoto")
#author("2020-04-28T13:20: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スクリプトに対応するツイート引用プラグインを作成しました。
PukiwikiをAMP化するとtweet_incプラグインを使うとAMPエラーが出るので、AMP化したpukiwiki でもTwitterからツイートを引用できるように、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
> // ひとまず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="300"
> height="300"
> layout="$layout">
> </amp-twitter>
> EOD;
> }
> ?>
*判明している問題点
**編集後にページが真っ白になる
pukiwikiのページを編集した後に表示が真っ白になる現象を確認しています。ただしリロードすると正しく表示されるので、実害はあまりないようです。
**読み込みが遅い
プラグインの問題というよりはamp-Twitter.jsの問題ですが、読み込みが若干遅いという難点があります。
これについてはamp-Twitterのasync属性をdefer属性に変更してみたら描画が遅いのは少し改善されるかもしれません。つまりHTMLパースが終了するまでamp-Twitter.jsを実行しないようにします。描画がバグる可能性はありますが、これまで確認した範囲では真っ白で固まる事象は回避できてるように思います…。
> <script defer custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script> //deferに変更後