amptwitter.inc.php

AMP-Twitterプラグイン

pukiwikiをAMP対応するとtweet_incプラグインを使うとAMPエラーが出るので、AMP化したpukiwiki でもTwitterからツイートを引用できるように、AMP-twitterスクリプトに対応するプラグインを作成しました。

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

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

ver1.1

layout, width, heightの設定に対応しました。

使い方

事前準備

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

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

サンプル

記載方法

#amptwitter(1254597997008060416)

#amptwitter(1254597997008060416,responsive,400,400)

ツイートを引用したい場合は第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）

https://amp.dev/documentation/components/amp-twitter/

スクリプト

amptwitter.inc.php

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

<?php

// '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()

{

$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';

}

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="$width"

height="$height"

layout="$layout">

</amp-twitter>

EOD;

}

?>

判明している問題点

編集の直後にページが真っ白になる

pukiwikiのページを編集した後に表示が真っ白になる現象を確認しています。ただし真っ白になるのは編集直後だけで、しかも1回リロードすると正しく表示されるので、実害はあまりないようです。

responsiveでは左寄せが選べない

従来のtweet_incプラグインは左寄せで表示されていました。このプラグインでは引用されたツイートはresponsiveではセンタリングして表示されます。これはAMP-twitterスクリプトの仕様です。

ver1.1以降ではfixedやflex-itemを選べば左寄せになりますが、これを選択するとスマホ表示の際に画面からはみ出す可能性があります。

読み込みが遅い

プラグインの問題というよりはamp-Twitter.jsの問題ですが、読み込みが若干遅いという難点があります。

これについてはamp-Twitterのasync属性をdefer属性に変更してみたら描画が遅いのは少し改善されるかもしれないと思って試してみましたが、script deferはAMPエラーが出るようです。つまりHTMLパースが終了するまでamp-Twitter.jsを実行しないようにしたかったわけですが、なかなか思ったとおりにはゆきません。仕方がなくasyncに戻しました。

更新日：2020-04-29 閲覧数：1823 views.