- このトピックには8件の返信、2人の参加者があり、最後に
により8年、 6ヶ月前に更新されました。
-
投稿
-
-
いつもありがとうございます。
Fetch Tweetsというキーワードなどからツイート内容をAPIで引っ張ってきて表示するプラグインを利用しているのですが、AMP対応がうまくいかず、困っております。
AMPページURL: https://www.sakura-kaika.com/819/?amp=1
画像タグの一部が中身が空の「<amp-img></amp-img>」になってしまい、AMPエラーになってしまいます。
Simplicityテーマ側で行っている、imgタグからamp-imgタグへの変換による影響かと思い調整してみたのですが、上手くできませんでした。
可能でしたらご対応いただけると幸いです。
-
申し訳ないですが、サポート対象外のものにもあるように、個別のプラグインを使用することにより起こる不具合は、前提としては基本ノーサポートになっています。
ただ、今回問題はプラグインにより空の「
<amp-img></amp-img>」が出力されることにありそうです。なので問題はそれほど難しそうではないので、「空のamp-imgがあったら取り除く」という処理を追加したものを以下にアップしてみました。
https://wp-simplicity.com/wp-content/uploads/2017/04/simplicity2.zip
よかったら、試してみていただけると幸いです。ただ、これで改善しない場合は、「個別プラグインにより起こる不具合」ということで、対応出来ないかもしれないのでご了承ください。
（一応上記ファイルを適用後にAMPエラーが出た場合は、もう一度AMPページを確認して、修正できそうかどうかは見ます） -
アップデートいただいたファイルで解決しました！
ありがとうございます。
-
適用後にAMPページのエラーチェックをしてみました。
https://validator.ampproject.org/#url=https%3A%2F%2Fwww.sakura-kaika.com%2F819%2F%3Famp%3D1
そしたら、Fetch Tweetsが以下のようなスタイルシートを吐き出してエラーになっていました。
.fetch-tweets-main{margin-left:41px!important}.
エラーメッセージThe text (CDATA) inside tag ‘style amp-custom’ contains ‘CSS !important’, which is disallowed.
これは、プラグイン側のスタイルシートの問題なんですが!importantは、AMPでエラーになります。これだとAMPページはGoogleにキャッシュされません。
とりあえず、AMPで使用するCSSから!importantを取り除く処理を追加したものをアップしておきました。
https://wp-simplicity.com/wp-content/uploads/2017/04/simplicity2-2.zip
これで完全にエラーはなくなると思います。 -
!importantの件、ありがとうございます。
空の「
<amp-img></amp-img>」が出力される件についてですが、そもそも、なぜ空の「<amp-img></amp-img>」が出力されたのか？、という点について改めて調査してみたところ、プラグイン側で出力するコードが下記のようになっていることが原因でした。<img src='https://pbs.twimg.com/media/C8eg42wVoAEjAoO.jpg' alt='test ツイッターメディア - 佐賀県は神埼市の宝珠寺にヒメシダレ桜を観に行った。 満開であった。 見事なヒメシダレ桜であった。 日本一ではなかろうか。 #写真好きな人と繋がりたい #拉致被害者全員奪還 https://t.co/oibfhtIhKn' />srcやaltの値を囲むのに、ダブルクオーテーションではなくシングルクオーンテーションが使われており、Simplicity側の正規表現に引っかからなかったようです。
amp.phpの画像関連の値を取得する正規表現について、下記のようにシングルクオーンテーションも含めるようにしたことろ、画像が表示されるようになりました。
$src_res = preg_match('/src=["|\']([^"]+?)["|\']/is', $match, $srcs);最初に調べた際に見落としてしまっておりました。
お手数をおかけしてしまい、申し訳ありませんでした。 -
amp.phpの画像関連の値を取得する正規表現について、下記のようにシングルクオーンテーションも含めるようにしたことろ、画像が表示されるようになりました。
僕は、Fetch Tweetsプラグインは使ったことがないので以前の状態を憶えていないのですが、この変更を行った後に、以下のページで、何か表示上の変化はありましたか？
https://www.sakura-kaika.com/819/?amp=1また、以下の部分は、
$src_res = preg_match('/src=["|\']([^"]+?)["|\']/is', $match, $srcs);
以下のように変更すると正常動作しますでしょうか？
$src_res = preg_match('/src=["\']([^"\']+?)["\']/is', $match, $srcs); -
Fetch Tweetsプラグインは使ったことがないので以前の状態を憶えていないのですが、この変更を行った後に、以下のページで、何か表示上の変化はありましたか？
https://www.sakura-kaika.com/819/?amp=1はい。以前はTwitterの投稿に含まれる写真画像が表示されていなかったのですが、表示されるようになりました。
以前の状態では、シングルクオーンテーションで囲まている写真画像が、srcなどの値を取得できないために空の
<amp-img></amp-img>として出力されていました。以前の状態でもTwitterの各ユーザーのプロフィール画像は表示されいたので、パッと見て写真も表示されていると思い込んでしまっていました。（CSSを調整する前だったので、プロフィール画像が大きく表示されており、写真が表示されていると思いこんでいました。）
プロフィール画像が空の
<amp-img></amp-img>にならずに表示されていたのは、プロフィール画像部分のコードが下記のようになっていたためです。本来取得すべきシングルクオーンテーションで囲まれているsrc=''部分の値ではなく、後半にあるダブルクオーテーションで囲まれているthis.src=""の値を取得して、表示されていたようです。https://codepen.io/anon/pen/LWargO
※この部分のコードを投稿しようとするとHTML特殊文字変換をしても403エラーになってしまったので、codepenに掲載しました。そのため、以前のAMPページではプロフィール画像のURLが
https://pbs.twimg.com/profile_images/832970715557015552/uyJPPo0d.jpg
のようになっていたのですが、今は、
https://pbs.twimg.com/profile_images/832970715557015552/uyJPPo0d_normal.jpg
のように、「_normal」が付いた状態で表示されています。正規表現については記載いただいたものが正確ですね。変更して、問題なく動作しました。
-
詳細なご報告ありがとうございます。
ということは、正規表現を以下のようにすることによって、より良い表示になるということですね。
$src_res = preg_match('/src=["\']([^"\']+?)["\']/is', $match, $srcs);なのでとりあえず、src以外もすべて上記のように修正したものもアップしておきました。
https://wp-simplicity.com/wp-content/uploads/2017/04/simplicity2-3.zip
次のバージョンアップで、これが適用されたものになると思います。変更点。
https://github.com/yhira/simplicity2/commit/553ae8ec89b487f6a45707947a37cb43b1bc1951 -
次のバージョンアップで、これが適用されたものになると思います。
ありがとうございます。
助かります。
-
- フォーラム「要望・機能追加など」には新規投稿および返信を追加できません。