Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

画像拡大の不具合
 
共有:
通知
すべてクリア

[解決済] 画像拡大の不具合

11 投稿
3 ユーザー
4 Reactions
1,939 表示
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
トピックスターター  

私のブログに頂いたコメントをきっかけに、画像拡大に関する不具合が 2 つ見つかりました。

①高速化設定で「JavaScriptを縮小化する」を有効にし、画像拡大効果の「Lity(単機能・軽量)」を選択すると、画像が拡大しない。

※デベロッパーツールのコンソールで、「wp-content/themes/cocoon-master/plugins/lity/dist/lity.min.js」を読み込んでいる部分に「Uncaught SyntaxError: missing ) after argument list」エラーが出ます。

②「AMP Lightbox(単一拡大)」「AMPギャラリー(複数画像ギャラリー表示対応)」が Gutenberg に対応していない。

※現在の仕様は、p タグで囲まれた画像を拡大用に置換するもの。しかし、Gutenberg だと画像を figure タグで囲むため、置換の対象にならない。

とりあえずの報告です。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

ご連絡ありがとうございます。

①元々、「/plugins/lity/dist/lity.min.jsにある本来の縮小化コード」と「Cocoon側で縮小化したコード( https://github.com/yhira/cocoon/blob/8f09d0348c35807450264ca0c42d60097dc08b3e/lib/page-speed-up/minify-js.php#L104 )」を比較してみたのですが、違いがわかりませんでした(添付画像)。
https://difff.jp/mzj6t.html
比較コードに違いが出なかったので、何が原因かちょっとわからなかったです…。

なので、/plugins/lity/dist/lity.min.jsファイルは縮小化しないということで対応するしかありませんでした。
https://github.com/yhira/cocoon/blob/8f09d0348c35807450264ca0c42d60097dc08b3e/lib/page-speed-up/minify-js.php#L68
謎です…。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

②これについては、正規表現にpタグを含めないことで修正してみました。
https://github.com/yhira/cocoon/commit/541c751458a156abfddf36a7cfb2ed9338e3fd0c
https://github.com/yhira/cocoon/commit/29f94f8ba643d9173f9516d46f44c808b9826487


   
ろこ
(@lococo)
Prominent Member Registered
結合: 7年前
投稿: 830
 

①高速化設定で「JavaScriptを縮小化する」を有効にし、画像拡大効果の「Lity(単機能・軽量)」を選択すると、画像が拡大しない。

わいひら様が示されているように、Cocoonで読み込まれるJSは基本的に圧縮されたファイルであるため、高速化設定にあるJS縮小化機能が直接の原因ではないのではと思いました。
(私の環境で「JS縮小化」を有効にし、Lityを使用した形ではエラーは出ませんでした。)

Uncaught SyntaxError: missing ) after argument list

JS縮小化設定による主な違いはJSファイルの中身をインライン化するかどうかなので、エラー内容からインライン化されたスクリプトに何らかの改変が加えられているのではないでしょうか。

Lityは画像関連なので、Cocoonの機能だけで考えるとLazy Loadとの相性とか。

var img = $('<img src="' + target + '" alt="' + desc + '"/>');

https://github.com/yhira/cocoon/blob/master/plugins/lity/dist/lity.js#L142

imgタグを用いた記述があるので、このあたりに問題があるかもしれません。
Lazy Loadの設定が有効になっているのであれば、無効にしてみてください。

また、その他にプラグインなどを用いていないでしょうか?
書かれた内容だけではエラーの再現ができないため、なるべく他のJS読み込みを取り除いてから再度確認してみてください。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

なるほど…。確かにそうですね。
ページ上に埋め込んだあとの、変換の可能性が高そうですね。
明日あたり、もう一度その線で探ってみます。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

とりあえず、動作確認だけしてみました。
JavaScript縮小化を有効にしていたとしても、Lazy Loadを無効にすると不具合は発生しませんでした。
明日あたり、その辺を詳しく見てみようと思います。


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
トピックスターター  

①Lity のエラー

私も確認したところ、「JavaScriptを縮小化する」と「Lazy Loadを有効にする」がどちらも有効になっているのがエラーの条件でした。

ただ、時間が取れず、これ以上は確認していません。

②AMP の画像拡大

念には念を入れ p タグを含めた私の考えが仇になってしまいました。しかも、今の今まで気が付かなかった…。申し訳ありません。お手数をおかけしました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

Lazy Load対象を出力させてみると、lity.min.js内の以下(添付画像)のようなコードが引っかかっていました。

<img src="'+a+'" alt="'+d+'"/'+'>

いろいろな対策方法はあると思うのですが、とりあえずはimgタグ内にURLがない場合は、Lazy Loadを弾くという方法で対処しました。
https://github.com/yhira/cocoon/commit/cdda01ab5040f993c9236526c9a403d4e0e89686

出来れば、ループ処理内で正規表現チェックとかはしたく無かったのですが、これが最もJavaScriptコードのimgを弾くのに確実かなと思ったので。+を除外とかだとURL内や、alt内にあることもあるだろうし。


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

修正している間に、投稿がかぶりました。
Akiraさん、ご確認ありがとうございます!


   
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
トピックスターター  

ありがとうございます。

「JavaScriptを縮小化する」と「Lazy Loadを有効にする」の 2 つが有効時に、Lity が正常に動作するのを私の環境で確認しました。

お手数をおかけしました。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17398
 

ご確認ありがとうございます!
他環境でも、動作しているようで安心しました^^


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました