AMPページにおけるいくつか(画像、動画、本文)の表示エラーについて

Simplicityの特徴 フォーラム 不具合報告 AMPページにおけるいくつか(画像、動画、本文)の表示エラーについて

  • このトピックには32件の返信、2人の参加者があり、最後にsimpfanにより9年、 5ヶ月前に更新されました。
32件の返信スレッドを表示中
  • 投稿者
    投稿
    • #46500
      simpfan
      ゲスト

      こんにちは。
      いつもお世話になってます。

      最新版のテーマでAMPページを導入してみたのですが、概ね良好ではあるものの、特定のページで表示されないものがあります。

      実例をお見せしたほうが早いかと思いますので、たとえばこちらのページでエラーが出ています。

      http://yotubaiotona.net/2016/06/05/%e3%82%b9%e3%82%bf%e3%83%83%e3%83%95%e3%83%bb%e3%83%99%e3%83%b3%e3%83%80%e3%83%bb%e3%83%93%e3%83%aa%e3%83%aa%e3%80%82%e3%80%8c%e5%a4%96%e8%a6%8b%e3%82%92%e5%89%a5%e3%81%8e%e3%81%a8%e3%82%8c/

      通常はこのように表示されるのが、AMPページだと、

      1、アイキャッチ画像

      2、ユーチューブ動画

      3、本文中埋め込みリンクのあとの文

      が表示されなくなっています。

      http://yotubaiotona.net/2016/06/05/%e3%82%b9%e3%82%bf%e3%83%83%e3%83%95%e3%83%bb%e3%83%99%e3%83%b3%e3%83%80%e3%83%bb%e3%83%93%e3%83%aa%e3%83%aa%e3%80%82%e3%80%8c%e5%a4%96%e8%a6%8b%e3%82%92%e5%89%a5%e3%81%8e%e3%81%a8%e3%82%8c/?amp=1

      私の環境や本文の記述法によるところもあるかと思いますが、その場合も改善策をお知らせいただけたらと思います。
      よろしくお願いします。

    • #46502
      みき
      ゲスト

      AMPエラーが出ています
      The attribute 'type' may not appear in tag 'amp-iframe'.

    • #46507
      アバター画像わいひら
      キーマスター

      ちょっと、その記事のYouTubeの埋め込みタグを貼り付けてもらって良いですか。
      コードの貼り付け方は、以下に案内があります。
      https://wp-simplicity.com/suport/topic/first-time/

      コードを貼り付けるので、もしブロックされて貼り付けられないときは、メールでもOKです。
      https://wp-simplicity.com/mail/

    • #46508
      simpfan
      ゲスト

      みきさん、わいひらさん、ありがとうございます。
      ええ、エラーが出ているのはわかるのですが、解決方法がわからず……。

      ユーチューブ動画の貼り付けは、動画のアドレスを直に貼り付けています。
      このページで言えば、

      路上生活者が世界デビュー!仏映画「ベンダ・ビリリ!」

      です。
      なお、他のページでもユーチューブ動画は表示されていないようです。

      よろしくお願いします。

    • #46509
      simpfan
      ゲスト

      あ、あの貼り付けかただと動画そのものが表示されてしまうんですね。

      https://www.youtube.com/watch?v=-aTf8ejdvKg

      です。

      よろしくお願いします。

    • #46521
      アバター画像わいひら
      キーマスター

      埋め込みコード(というかURL)ありがとうございます。

      通常は、このトピックの#46508のように、iframeにhttpsで埋め込まれて、クエリも「?feature=oembed」だけなのですが、
      https://www.youtube.com/embed/-aTf8ejdvKg?feature=oembed

      simpfanさんのサイトでは、以下のようにhttpで埋め込まれて、しかもクエリが「?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent」というものがつけられてしまうというのが原因のようです。
      http://www.youtube.com/embed/-aTf8ejdvKg?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent

      とりあえず、手元のファイルは、そういった差異を吸収できるように修正しておきました。
      次のバージョンで多分改善されると思います。

    • #46524
      simpfan
      ゲスト

      わいひらさん、ありがとうございます。

      なぜそのような特殊なことが起きるのかはわからないのですが、ともかく次のバージョンを試してみてまた報告したいと思います。

      ところで、不具合の1(アイキャッチ画像が表示されない)と3(本文中埋め込みリンクのあとの文が消える)についての対応策はわかりますか?

      1については現在のところこのページしか見つけていませんが、3については他のページでも同じ不具合が出ているようです。

    • #46526
      simpfan
      ゲスト

      ちなみに、まったくわからないながら調べてみると、以下のサイトでも私と同じような特殊な「尾ひれ」についての記述がありました。

      WordPress に embed した YouTube や img をレスポンシブ対応する

      http://www.d-wood.com/blog/2016/05/24_8049.html

      私は特に高度な設定をしたつもりはないのですが、他にも同じ状況のひとがいるなら、なにかお役に立てればと思います。

    • #46544
      アバター画像わいひら
      キーマスター

      1については、適用されている以下の画像が存在しないようです(生成されていない?)。
      http://yotubaiotona.net/wp-content/uploads/2016/06/Benda-Bilili-680×383.jpg
      http://yotubaiotona.net/wp-content/uploads/2016/06/Benda-Bilili-320×180.jpg
      以下などは生成されているのに。
      http://yotubaiotona.net/wp-content/uploads/2016/06/benda-bilili-a-la-fete-de-la-musique-a-paris-500×281.jpg
      http://yotubaiotona.net/wp-content/uploads/2016/06/benda-bilili-a-la-fete-de-la-musique-a-paris.jpg

      とりあえず、以下の方法などで画像を再生成してみてください。
      Simplicityテーマをインストールして画像のアスペクト比が狂うときにやって欲しいこと

      3については、ちょっとどの部分のことかよく分かっていないです。
      もう少し具体的に詳しく書いていただいていいでしょうか。

    • #46546
      アバター画像わいひら
      キーマスター

      あと、YouTubeの不具合を修正したものを以下にアップしておきました。
      よかったら試していただいていいでしょうか。
      https://wp-simplicity.com/wp-content/uploads/2016/10/simplicity2-1.zip

    • #46553
      simpfan
      ゲスト

      わいひらさん、ありがとうございます。

      修正版を適用してみました。結果はご覧のとおりで、

      ・残念ながら動画の問題は解決していないようです。

      ・1のアイキャッチ画像の問題は、アドバイス通り「Regenerate Thumbnails」をかけると表示されるようになったようです。
      しかし今度は、キャプションとアイキャッチ画像が被ってしまっています……

      ・3については、それぞれ第1見出しの最終段落、第2見出しの第1段落、第3見出しの第1段落にある文中リンク

      『屈強のコンゴ魂』(Tres Tres Fort)

      『ベンダ・ビリリ!~もう一つのキンシャサの奇跡』

      『世界を動かせ!』(Bouger le monde!)

      のあとの文が次の段落まで消えています。それぞれ、AMPページ以外では表示されているものです。念のため、他のブラウザで表示してみても結果は同じでした。

      以上、とりあえずのご報告でした。
      よろしくお願いします。

    • #46564
      アバター画像わいひら
      キーマスター

      YouTubeなどは、僕の環境では問題なく動作しているのですが。何でだろう。
      3にしても、同じ不具合環境を再現するという意味でも、この記事の原文(管理画面テキストエディターのコードそのまま)をコードを貼り付けるのと同じ要領で貼り付けていただいてよろしいでしょうか。
      こちらのテスト環境で、同じ状態を再現させてみようと思います。

    • #46568
      simpfan
      ゲスト

      わかりました。

      たとえば3箇所めにあるように、

      そんな彼らの活動は、2012年に2枚目のアルバム、<a href="http://c.af.moshimo.com/af/c/click?a_id=571912&p_id=170&pc_id=185&pl_id=4062&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fwww.amazon.co.jp%2Fexec%2Fobidos%2FASIN%2FB0095HRFWK%2Fref%3Dnosim" target="_blank" >『世界を動かせ!』(Bouger le monde!)</a><img src="http://i.af.moshimo.com/af/i/impression?a_id=571912&p_id=170&pc_id=185&pl_id=4062" width="1" height="1" style="border:none;">を出したのを最後に、少なくとも日本では新曲は出ていない。でも彼らがその名前に冠した「ベンダ・ビリリ」(Benda Bilili)に込められた

      と書くと埋め込みリンク(このアフィリエイトリンクは「カエレバ」で生成したものです)の後ろが消えて、次の段落まで表示されなくなります。他のページでも同様です。

      ちなみに、私の環境はWordPress4.6.1、php7.0です。

      またエックスサーバーのmod_pagespeedとプラグインの「Autoptimize」を停止してみても変わらなかったようです。

      よろしくお願いします。

    • #46569
      アバター画像わいひら
      キーマスター

      できれば、全文いただけると助かります。
      SEO的なものが心配であれば、下の方にあるメール欄からお送りいただいても良いので。

    • #46570
      simpfan
      ゲスト

      たった今、全文のコードを問い合わせフォームからお送りしました。
      返信はこちらのフォーラムのほうにしていただければだいじょうぶです。
      よろしくお願いします。

    • #46572
      アバター画像わいひら
      キーマスター

      コードありがとうございます。
      不具合をテスト環境でも確認したので、修正してみました。
      YouTubeの方も、力技ではありますが、修正してみました。
      以下を試してみてもらってよろしいでしょうか。
      https://wp-simplicity.com/wp-content/uploads/2016/10/simplicity2-2.zip

      1のキャプションが隠れてしまうのは、修正版適用後の状態を見てからにさせてもらおうと思います。

    • #46591
      simpfan
      ゲスト

      たった今、修正版を適用してみました。結果はご覧のとおりで、

      ・1(キャプションが隠れる)と3は完全に解消したようです。

      ・ユーチューブ動画はやはり表示されていません……。

      プラグインをすべて停止させてみても同じでした。

      ちなみにインストールしているプラグインは、

      WP Multibyte Patch

      Jetpack

      SiteGuard WP Plugin

      BackWPup

      Broken Link Checker

      Google XML Sitemaps

      WordPress Ping Optimizer

      WordPress Popular Posts

      CFiltering

      Contact Form 7

      Author Avatars List

      EWWW Image Optimizer

      RSS Image Feed

      Category Order and Taxonomy Terms Order

      Autoptimize

      で、動画の挙動を制御するようなものはないと思うのですが……。

      以上、とりあえずのご報告でした。
      よろしくお願いします。

    • #46593
      みき
      ゲスト

      Autoptimizeがあやしいですね

    • #46594
      みき
      ゲスト

      AutoptimizeはHTML,CSS,JavaScriptを縮小するので
      おかしくなる可能性は非常に高いです
      Autoptimizeはsimpkicityと相性が悪いです
      くわしくはこちら

    • #46596
      simpfan
      ゲスト

      みきさん、ありがとうございます。

      ええ、キャッシュ系プラグインとの相性の悪さは読んで知っていたのですが、Autoptimizeは『寝ログ』でも紹介されていたので導入してみてもいいかと思っていました。
      また、先ほどはいったん停止してみても表示は変わらなかったようなのですが、この際このあと今日1日の間完全に停止してみます。
      それで改善するようなら、このプラグインが原因だったとわかりますものね。

      よろしくお願いします。

    • #46597
      みき
      ゲスト

      いま調べてみたのですがYoutubeをampに対応させるための
      手順があるようです
      head内にソースを追加
      amp-videoを利用
      参考は以下を
      参考1
      参考2

    • #46600
      みき
      ゲスト

      こちらにも書きましたが一応載せておきます
      ampで使えるタグなど

    • #46622
      アバター画像わいひら
      キーマスター

      僕も、YouTubeの不具合を再現させようと試みているのですが、同じようにはならないですね。
      やっぱり、プラグインが怪しいのですが、「1日の間プラグインを無効にした結果」を待ちたいと思います。とはいっても、インストールしているプラグインは、僕もインストールしているものが多いですし、そんなことしそうにないんですけどね;何か変な機能とかあるのかな。

      とりあえず、URLを貼るのではなくて、YouTubeが生成するiframeタグを貼り付けるとAMPで表示されるでしょうか?

    • #46628
      simpfan
      ゲスト

      みきさん、わいひらさん、ありがとうございます。

      とりあえず24時間プラグインを停止してみましたが変化は確認できていません。
      ただわいひらさんのおっしゃるとおりYouTubeが生成するiframeタグを貼り付けてみると動画が表示されているのが確認できました。
      これはプラグインを有効化してみても表示されているようです。

      問題の切り分けに役に立てればと思いますが、現状はプラグインをすべて有効化して、このページのみiframeタグで表示させているところです。
      するとご覧のとおりとりあえず正常化していますが、urlで貼り付けている他のページについては、今でも不具合が出たままとなっています。

      よろしくお願いします。

    • #46644
      アバター画像わいひら
      キーマスター

      ちょっとそれに関しては、不具合の再現方法がわからないと、何ともできないかもしれません。
      ちょっと検索して見た限りでは、同様の不具合は見つかりませんでした。

    • #46648
      simpfan
      ゲスト

      わいひらさん、ありがとうございます。

      #46526でリンクしたページにある

      src="http://www.youtube.com/embed/orQbHXIVgi0?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent" allowfullscreen="true" style="border:0;"></iframe></span>

      というコードが近いとは思うのですが、微妙に違うんですよね……。

      私の場合は`

      src=’http://www.youtube.com/embed/-aTf8ejdvKg?version=3&rel=1&fs=1&autohide=2&showsearch=0&showinfo=1&iv_load_policy=1&wmode=transparent&#8217;`

      と「amp」の部分が「038」になっているので。

      とりあえず先ほど2.3.7にアップデートしてみましたが、今後も最新版に上げてみながら、もしなんらかの拍子に解決したら、報告したいと思います。
      現状がわかりやすいように、一応このページももともとのURL直貼りに戻して置いておきます。

      よろしくお願いします。

    • #46665
      アバター画像わいひら
      キーマスター

      最後にダメもとで、無理やり不要なURLクエリを取り除く処理を書いてみました。
      こちらのテスト環境では、不具合が再現できないので、よかったら試していただけると幸いです。
      https://wp-simplicity.com/wp-content/uploads/2016/10/simplicity2-4.zip
      これでダメなら、地道に再現方法を探るしかないかもしれません。

      というか、以下の038とはどこの部分のことですか?

      「amp」の部分が「038」になっているので。

    • #46680
      simpfan
      ゲスト

      わいひらさん、ありがとうございます。

      今アップデートしてみたのですが、どうやら解決していないようですね……。

      すみません、コードの貼り付けもうまく行っていなかったようですが、

      http://www.d-wood.com/blog/2016/05/24_8049.html

      に書かれているコードでは

      fs=1&autohide=2&showsearch=0&amp

      となっているところが、私のサイトでは

      fs=1&autohide=2&showsearch=0&#038

      となっているようです。これは

      view-source:http://yotubaiotona.net/2016/06/05/%e3%82%b9%e3%82%bf%e3%83%83%e3%83%95%e3%83%bb%e3%83%99%e3%83%b3%e3%83%80%e3%83%bb%e3%83%93%e3%83%aa%e3%83%aa%e3%80%82%e3%80%8c%e5%a4%96%e8%a6%8b%e3%82%92%e5%89%a5%e3%81%8e%e3%81%a8%e3%82%8c/?amp=1

      の155番あたりを見たのですが、Autoptimizeを利用すると見えにくくなりそうなので、とりあえずしばらく停止しておきますね。

      とりあえずこれで直らなければ、動作確認用のこのページ以外は、手動で共有用のiframeタグに張り替えて行こうかと思います。さいわい、ユーチューブ動画を貼り付けているページはそう多くないので。

      よろしくお願いします。

    • #46681
      technote
      ゲスト

      youtube-playerというclassが出力されていますが、これはJetpackの機能のようです。
      JetpackのShortcode Embedsをオフにするか、以下のコードを子テーマのfunctions.phpなどに追加してみて下さい。
      remove_action( 'init', 'wpcom_youtube_embed_crazy_url_init' );

    • #46682
      simpfan
      ゲスト

      technoteさん、ありがとうございます。

      結論から先に申し上げますと、無事正常に動作するようになりました!

      そのうえで過程を述べておくと、まず最初はおっしゃるとおりJetpackの「Shortcode Embeds」(ショートコード埋め込み)を停止してみました。
      が、それだと他のページに埋め込んでいたFacebook動画などの挙動がおかしくなってしまったため、Jetpackの機能は復活させたうえで、教えてくださったコードをfunctions.phpに追加しました。
      その結果、ご覧のとおり正常表示されるようになりました!(Autoptimizeも復活させましたが問題ないようです)

      あとはFacebook動画などがAMPページで動作していないのを見つけてしまったのですが、これは現時点での仕様のようなので、ともかく今までのような理由の分からない不具合はすべて解消したと思います。

      長々とたくさんのひとたちにお世話になりましたが、本当にありがとうございました!

    • #46683
      simpfan
      ゲスト

      追伸です。

      こないだプラグインを停止したときは、最初からインストールされていた

      WP Multibyte Patch

      Jetpack

      だけは残していました。それでこんなことになっていたのですが、原因も完全にわかったうえで解決したのでよかったです。改めて、本当にありがとうございました!

    • #46684
      アバター画像わいひら
      キーマスター

      え、プラグインを完全に停止とのことだったので、プラグインはすべて停止したものと思ってました…。

      プラグインをすべて停止しても同様の不具合が起きるか確認してみる

      一応すべてのプラグインの機能をオフにして不具合が再現されるか確認してみてください。 それで不具合が無くなった場合は、何かしらのプラグインに原因がある場合があります。
      Simplicity動作不良時のガイドライン

      次回、何か不具合がありましたら、全て停止してみてください。

      それにしても、technoteさんさすがです。ありがとうございます。

    • #46692
      simpfan
      ゲスト

      わいひらさん、ありがとうございます。

      はい、まったくおっしゃる通りで、すべてと言ったらすべてですよね。
      申し訳ないです。
      次からは気をつけます。

32件の返信スレッドを表示中
  • トピック「AMPページにおけるいくつか(画像、動画、本文)の表示エラーについて」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)