- 追加された行はこの色です。
- 削除された行はこの色です。
#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)
#author("2023-01-09T18:00:51+09:00;2020-04-29T00:46:24+09:00","","")
#ref(https://oncologynote.jp/img/c0f678f270.jpg,nolink)
*AMP-Twitterプラグイン
*AMP-Twitterプラグイン [#l7a1cbb6]
PukiwikiをAMP化するとtweet_inc.inc.phpを使うとAMPエラーが出るので、AMP-twitterスクリプトに対応するツイート引用プラグインを作成しました。
pukiwikiをAMP対応するとtweet_incプラグインを使うとAMPエラーが出るので、AMP化したpukiwiki でもTwitterからツイートを引用できるように、AMP-twitterスクリプトに対応するプラグインを作成しました。
なお、描画に少し時間がかかるのが課題です。低速回線では読み込みまでにかなりのタイムラグが生じるでしょう。せっかく高速化しているAMPページなのにツイートの読み込みのためにページ全体の描画が遅れるのは非常にもったいないです（ページ全体が真っ白のままで固まるのでPHPエラーを出したかと勘違いしてしまう）。
公式では低速回線のためにfallbackの方法が記載されていますが、fallbackではなく遅延読み込みとか非同期描画の方法はないもんでしょうかね…。
*使い方
** ver1.1 [#b8a8c51e]
layout, width, heightの設定に対応しました。
**事前準備
*使い方 [#ye9565af]
**事前準備 [#s539cc44]
これを使うにはヘッダーで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を実行しないようにします。描画がバグる可能性はありますが、数回の試行では真っ白で固まる事象は回避できてるように思います…。
**サンプル [#d36fbcd9]
**サンプル
#amptwitter(1254597997008060416)
**記載方法
**記載方法 [#e54c7cbe]
> #amptwitter(1254597997008060416)
ツイートを引用したい場合は第1引数をツイートIDにします。第2引数にレイアウトを選択できるようにする予定ですが、AMP公式のAMP-twitterスクリプトの仕様自体が未完成でlayoutやサイズ指定が効かないので、現時点ではresponsive表示にしか対応していません。（これはこのプラグインの問題というよりは、本家のAMP-Twitterスクリプトの問題です）
> #amptwitter(1254597997008060416,responsive,400,400)
#ogp(https://amp.dev/documentation/components/amp-twitter/,amp)
ツイートを引用したい場合は第1引数をツイートIDにします。第2引数にレイアウトを選択できるようにする予定ですが、AMP公式のAMP-twitterスクリプトの仕様自体が未完成でサイズ指定が効かないので、現時点ではサイズ設定には対応していません。（これはこのプラグインの問題というよりは、本家のAMP-Twitterスクリプトの問題です）
* スクリプト
- ''第1引数''（必須）：ツイートID
- ''第2引数''：レイアウト（fill fixed fixed-height flex-item intrinsic nodisplay responsiveのいずれか。省略可、省略時のデフォルトはresponosive）
- ''第3引数''：width（整数。省略可、省略時のデフォルトは400）
- ''第4引数''：height（整数。省略可、省略時のデフォルトは400）
下記のスクリプトをテキストファイルに貼りつけて、ファイル名をamptwitter.inc.phpとしてpluginのフォルダにアップロードします。
https://amp.dev/documentation/components/amp-twitter/
* スクリプト [#k7b0e325]
#ref(amptwitter.inc.php)
上記ファイルをダウンロードして、あるいは下記のスクリプトをテキストファイルに貼りつけてファイル名をamptwitter.inc.phpとして、pluginのフォルダにアップロードします。
> <?php
>
> // 'amptwitter' plugin for PukiWiki ver.0.9
> // 'amptwitter' plugin for PukiWiki ver.1.1
> // author: m0370
> // Twitter: @m0370
>
> // ver1.0 (2020.4.27)
> // ひとまずAMP-twitterのタグを出力する機能を実装しました。
> // ver1.1 (2020.4.28)
> // layout, width, heightの設定に対応しました。
>
> function plugin_amptwitter_convert()
> 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";
> $amptw = func_get_args();
> $tweetid = $amptw[0];
>
> if ($amptw[1] == 'fill' || $amptw[1] == 'fixed' || $amptw[1] == 'fixed-height' || $amptw[1] == 'flex-item' || $amptw[1] == 'nodisplay') {
> $layout = $amptw[1];
> } else {
> $layout = 'responsive';
> }
> return <<<EOD
> <amp-twitter
>
> if(is_numeric($amptw[2])) {
> $width = $amptw[2];
> } else {
> $width = 400;
> }
>
> if(is_numeric($amptw[3])) {
> $height = $amptw[3];
> } else {
> $height = 400;
> }
>
> return <<<EOD
> <amp-twitter
> data-tweetid="$tweetid"
> width="300"
> height="300"
> width="$width"
> height="$height"
> layout="$layout">
> </amp-twitter>
> EOD;
> </amp-twitter>
> EOD;
> }
> ?>
*判明している問題点 [#t301c954]
**編集の直後にページが真っ白になる [#nbeb3f50]
pukiwikiのページを編集した後に表示が真っ白になる現象を確認しています。ただし真っ白になるのは編集直後だけで、しかも1回リロードすると正しく表示されるので、実害はあまりないようです。
**responsiveでは左寄せが選べない [#sa4adbf0]
従来のtweet_incプラグインは左寄せで表示されていました。このプラグインでは引用されたツイートはresponsiveではセンタリングして表示されます。これはAMP-twitterスクリプトの仕様です。
ver1.1以降ではfixedやflex-itemを選べば左寄せになりますが、これを選択するとスマホ表示の際に画面からはみ出す可能性があります。
**読み込みが遅い [#e93096b3]
プラグインの問題というよりはamp-Twitter.jsの問題ですが、読み込みが若干遅いという難点があります。
これについてはamp-Twitterのasync属性をdefer属性に変更してみたら描画が遅いのは少し改善されるかもしれないと思って試してみましたが、script deferはAMPエラーが出るようです。つまりHTMLパースが終了するまでamp-Twitter.jsを実行しないようにしたかったわけですが、なかなか思ったとおりにはゆきません。仕方がなくasyncに戻しました。
#pcomment