Twitterモバイルアプリで開くとAMPレイアウトが崩れる

PR 2019/3/24

このトピックには7件の返信、2人の参加者があり、最後に@nisizawaにより6年、 7ヶ月前に更新されました。

7件の返信スレッドを表示中

投稿者

投稿
- 2019年3月16日 11:26 AM #61485
  
  @nisizawa
  ゲスト
  
  Twitterモバイルアプリで Simplicity2 のページを開くと、AMPレイアウトが崩れる現象に悩んでいます。
  
  こちらのリンク
  
  https://twitter.com/nisizawa/status/1106495255967342592
  
  を、iOS の Twitter アプリで開き、リンクをクリックすると、下の画像の画面になります。
  
  フォントも明朝で変ですし、Adsense の広告も表示されず、レイアウトも崩れています。
  
  しかし、この画面で左上にある「ランシット日記」というリンクをクリックすると、次の求めている通りの正常な画面に移ります。
  
  不思議なことに、リンクをモバイル版の Crome やサードパーティ製の Twitter アプリ Tweetbot で開いても、この現象は起きません。
  
  バージョンは最新版です。
  Simplicity2バージョン: 2.7.5
  WordPress 5.1.1
  
  Simplicity2 でAMPを設定しています。プラグインを全て停止しても同じ現象が起きました。また、親テーマに変更して、AMPをONにしたらやはり同じ現象が起きました。
  
  Twitter でリンクを開いたとき、最初から2枚めの画像のページが表示されるようにしたいのですが、どうすればよいでしょうか？
- 2019年3月16日 10:59 PM #61489
  
  わいひら
  キーマスター
  
  CocoonのAMP表示は現在この表示になります。
  https://wp-simplicity.com/simplicity2-7-5/?amp=1#development=1
  
  けれど該当ページはこのように表示されます。
  https://rangsit.net/2019/03/15/sim2fly-howto/?amp=1#development=1
  
  どうやらCSSが適用されていないようなんですが、原因はわかりません。
  
  サーバを調べてみたらよく知らないサーバーでした。
  https://www.extrem.jp/
  サーバーの仕様による可能性もあります。
  
  もし別サーバーを持っていれば、テスト環境たくって同様になるか確認してみていただけますでしょうか。
  なければ無料サーバーもあります。
  https://www.xdomain.ne.jp/
  https://www.star.ne.jp/free/
- 2019年3月19日 3:07 PM #61494
  
  @nisizawa
  ゲスト
  
  わいひらさん、ご返信ありがとうございました。
  
  ちょうどサーバーが遅いのに不満を感じていたところだったので、わいひらさんのページを参考にして、カラフルボックスに引っ越ししたところ、問題が解決しました。現在は正常に表示できています。
  
  推測になりますが、エクストリムの SSL になにか問題があったようです。
  
  これからも Simplicity を愛用して、そのうち機会を見て Cocoon に移行したいと思っています。どうもありがとうございました。
- 2019年3月19日 6:26 PM #61495
  
  @nisizawa
  ゲスト
  
  ここに続けて書いてしまってよいのか迷ったのですが。。。
  AMPは表示されるようになりましたが、
  https://rangsit.net/2019/03/15/sim2fly-howto/?amp=1#development=1では、
  外部URLを利用した画像（Google Photo)のサイズがすべて 75 x 75 になってしまいました。
  
  HTMLでは、サイズ指定が重複しているようです。
  <p><a href="https://lh3.googleusercontent.com"(リンク後略) alt="" width="351" height="236" width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img></a></p>
  
  元のサイズ比では表示できないでしょうか？
- 2019年3月19日 11:06 PM #61499
  
  わいひら
  キーマスター
  
  画像を同一ドメインサーバーにアップロードして置くか、widthとhight属性で値を指定することで改善できるかと思います。
- 2019年3月20日 10:07 PM #61504
  
  @nisizawa
  ゲスト
  
  通常ページでは、
  alt="" width="351" height="236" /></a></p>
  と、widthとhight属性で値を指定しています。表示も正常です。
  
  それなのに、AMPページでは
  alt="" width="351" height="236" width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img></a></p>
  と、75 x 75 になってしまいます。
  
  元の指定 width=”351″ height=”236″ で表示することはできるでしょうか？
- 2019年3月21日 10:51 PM #61508
  わいひら
  キーマスター
  親テーマのlib/amp.phpの以下の部分を削除すればうまくいくかなと思います。
```
  //アプリーチの画像対応
  $the_content = preg_replace('/<img([^>]+?src="[^"]+?(mzstatic\.com|phobos\.apple\.com|googleusercontent\.com|ggpht\.com)[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="75" height="75" sizes="(max-width: 75px) 100vw, 75px"></amp-img>', $the_content);
  $the_content = preg_replace('/<img([^>]+?src="[^"]+?nabettu\.github\.io[^"]+?[^>\/]+)\/?>/is', '<amp-img$1 width="120" height="36" sizes="(max-width: 120px) 100vw, 120px"></amp-img>', $the_content);
```
  アプリーチ用の設定が邪魔しているぽいです。
- 2019年3月22日 8:37 PM #61511
  
  @nisizawa
  ゲスト
  
  わいひらさん
  アプリーチも使っているので、該当の箇所から googleusercontent\.com| だけ削除したところ、期待通りのページが表示されました。
  どうもありがとうございました。
投稿者

投稿