サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年8月16日 01:21
私のブログに頂いたコメントをきっかけに、画像拡大に関する不具合が 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
2019年8月16日 20:30
ご連絡ありがとうございます。
①元々、「/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
謎です…。
2019年8月16日 20:31
2019年8月16日 21:51
①高速化設定で「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
2019年8月16日 22:57
なるほど…。確かにそうですね。
ページ上に埋め込んだあとの、変換の可能性が高そうですね。
明日あたり、もう一度その線で探ってみます。
2019年8月16日 23:31
とりあえず、動作確認だけしてみました。
JavaScript縮小化を有効にしていたとしても、Lazy Loadを無効にすると不具合は発生しませんでした。
明日あたり、その辺を詳しく見てみようと思います。
Topic starter
2019年8月16日 23:49
①Lity のエラー
私も確認したところ、「JavaScriptを縮小化する」と「Lazy Loadを有効にする」がどちらも有効になっているのがエラーの条件でした。
ただ、時間が取れず、これ以上は確認していません。
②AMP の画像拡大
念には念を入れ p タグを含めた私の考えが仇になってしまいました。しかも、今の今まで気が付かなかった…。申し訳ありません。お手数をおかけしました。
わいひら reacted
2019年8月16日 23:57
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内にあることもあるだろうし。
2019年8月16日 23:59
修正している間に、投稿がかぶりました。
Akiraさん、ご確認ありがとうございます！
Topic starter
2019年8月19日 18:37
ありがとうございます。
「JavaScriptを縮小化する」と「Lazy Loadを有効にする」の 2 つが有効時に、Lity が正常に動作するのを私の環境で確認しました。
お手数をおかけしました。
わいひら reacted
2019年8月19日 19:25
ご確認ありがとうございます！
他環境でも、動作しているようで安心しました^^
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。