[Safari]reCAPCHAエラー表示と外部js読み込み時の速度改善について

0
いいねをした人: 居ません
  • このトピックには2件の返信、2人の参加者があり、最後にDi-naにより2年、 8ヶ月前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #86352
    Di-na
    閲覧者
    1

    日頃より、SnowMonkeyを使わせていただいております。
    維持管理・開発に携ってくださる方々に感謝を申し上げます。

    以下、2点におきまして解決の糸口が見出せずにおりまして、ご助言いただけましたら助かります。
    どうぞよろしくお願いいたします。
    —————————————————————-

    【お使いの Snow Monkey のバージョン】15.6.2
    【お使いの Snow Monkey Blocks のバージョン】12.3.1
    【お使いの Snow Monkey Editor のバージョン】 6.0.0
    【お使いのブラウザ】Chrome , Safari
    【当該サイトのURL】https://joyopa.com/opa-event/

    ### 実現したいこと

    [Safari]ブラウザ上において

    1. reCAPCHAエラー表示を解決したい
    2. 外部js読み込み時に固まらずに読み込めるようにしたい

    ### 発生している問題
    1. SnowMonkeyForm上でreCAPCHAを設定すると、Safariでのみエラーが表示され、読み込みにも時間がかかる。reCAPCHAのサイトキーとシークレットキーを消すとエラー表示はなくなる。
    これまで、reCAPCHAの設定でキーを貼り付けるだけで稼働しエラーが出たことがなかったことと、特に今回設定で何か手を加えることもしていない為原因がわからない。
    (以下、エラーの貼り付けが長くなり恐縮です)

    <エラー内容>

    ■The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.■[Error] TypeError: null is not an object (evaluating '(document.body||document.getElementsByTagName("head")[0]).lastChild.src')
    (anonymous関数) (commons.js:87:972180)
    __webpack_require__ (content.js:1:736)
    (anonymous関数) (commons.js:87:55557)
    __webpack_require__ (content.js:1:736)
    (anonymous関数) (commons.js:87:47615)
    __webpack_require__ (content.js:1:736)
    (anonymous関数) (commons.js:87:43462)
    __webpack_require__ (content.js:1:736)
    (anonymous関数) (commons.js:87:1425410)
    __webpack_require__ (content.js:1:736)
    checkDeferredModules (content.js:1:565)
    (anonymous関数) (content.js:1:2012)
    (anonymous関数) (content.js:1:2015)
    appendChild
    (anonymous関数) (recaptcha__ja.js:352:209)
    (anonymous関数) (recaptcha__ja.js:250:238)
    (anonymous関数) (recaptcha__ja.js:10:414)
    (anonymous関数) (recaptcha__ja.js:111:308)
    (anonymous関数) (recaptcha__ja.js:377:262)
    (anonymous関数) (recaptcha__ja.js:139:451)
    Promise
    (anonymous関数) (recaptcha__ja.js:139:351)
    (anonymous関数) (recaptcha__ja.js:236:337)
    (anonymous関数) (recaptcha__ja.js:10:357)
    (anonymous関数) (recaptcha__ja.js:74:132)
    (anonymous関数) (recaptcha__ja.js:111:308)
    (anonymous関数) (recaptcha__ja.js:377:262)
    (anonymous関数) (recaptcha__ja.js:139:451)
    Promise
    (anonymous関数) (recaptcha__ja.js:139:351)
    (anonymous関数) (recaptcha__ja.js:236:337)
    (anonymous関数) (recaptcha__ja.js:74)
    (anonymous関数) (recaptcha__ja.js:33:298)
    E6 (recaptcha__ja.js:510:501)
    B (recaptcha__ja.js:286:384)■②The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.■TypeError: null is not an object (evaluating '(document.body||document.getElementsByTagName("head")[0]).lastChild.src')
    (anonymous関数) (commons.js:87:972180)
    __webpack_require__ (content.js:1:736)
    (anonymous関数) (commons.js:87:55557)
    __webpack_require__ (content.js:1:736)
    (anonymous関数) (commons.js:87:47615)
    __webpack_require__ (content.js:1:736)
    (anonymous関数) (commons.js:87:43462)
    __webpack_require__ (content.js:1:736)
    (anonymous関数) (commons.js:87:1425410)
    __webpack_require__ (content.js:1:736)
    checkDeferredModules (content.js:1:565)
    (anonymous関数) (content.js:1:2012)
    (anonymous関数) (content.js:1:2015)
    appendChild
    (anonymous関数) (recaptcha__ja.js:352:209)
    (anonymous関数) (recaptcha__ja.js:432:283)
    (anonymous関数) (recaptcha__ja.js:510:321)
    (anonymous関数) (recaptcha__ja.js:139:469)
    (anonymous関数) (recaptcha__ja.js:510:185)
    (anonymous関数) (recaptcha__ja.js:32:350)
    (anonymous関数)
    (anonymous関数) (recaptcha__ja.js:224:260)
    (anonymous関数) (recaptcha__ja.js:24:293)
    (anonymous関数) (recaptcha__ja.js:330:342)
    (anonymous関数) (recaptcha__ja.js:111:308)
    (anonymous関数) (recaptcha__ja.js:377:262)
    (anonymous関数) (recaptcha__ja.js:139:451)
    Promise
    (anonymous関数) (recaptcha__ja.js:139:351)
    (anonymous関数) (recaptcha__ja.js:236:337)
    (anonymous関数) (recaptcha__ja.js:330:209)
    (anonymous関数) (recaptcha__ja.js:224:284)
    (anonymous関数) (recaptcha__ja.js:111:308)
    (anonymous関数) (recaptcha__ja.js:377:262)
    (anonymous関数) (recaptcha__ja.js:139:451)
    Promise
    (anonymous関数) (recaptcha__ja.js:139:351)
    (anonymous関数) (recaptcha__ja.js:236:337)
    f (recaptcha__ja.js:223:446)
    (anonymous関数) (recaptcha__ja.js:150:340)
    (anonymous関数) (recaptcha__ja.js:111:308)
    (anonymous関数) (recaptcha__ja.js:377:262)
    (anonymous関数) (recaptcha__ja.js:139:451)
    Promise
    (anonymous関数) (recaptcha__ja.js:139:351)
    (anonymous関数) (recaptcha__ja.js:236:337)
    (anonymous関数) (recaptcha__ja.js:150:277)
    (anonymous関数) (recaptcha__ja.js:45:442)
    (anonymous関数) (recaptcha__ja.js:111:308)
    (anonymous関数) (recaptcha__ja.js:377:262)
    q (recaptcha__ja.js:139:300)
    promiseReactionJob

    2. 幾何学模様が背景で動くparticles.jsを導入すると、上記同様Safariでのみカクカクと固まりながら動く(エラー表示なし)
    (関係があると思われるコードを記載いたします)

    子テーマのfunction.phpに記載したコード

    <?php
    add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script(
    'particles.js',
    'https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.js',
    [ 'jquery' ],
    false,
    true
    );
    wp_enqueue_script(
    get_stylesheet(),
    get_theme_file_uri( '/app.js' ),
    [ get_template() ],
    false,
    true
    );
    } );

    同階層に設置したapp.jsのコード

    jQuery(function($){
    var particles = Particles.init({
    selector: '.background',
    sizeVariations: 10,
    color: ['#fde408', '#2F9D9B', '#3B983D'],
    connectParticles: true
    });
    });

    固定ページの最下層に記載したカスタムhtml

    <canvas class="background"></canvas>
    

    ### 試したこと

    1. ・reCAPCHAの貼り付けキーを間違えていないか確認する。
      ・エラー内容にContent Security Policyの記載があった為、関連事項を調べ、下記サイトを参考にHTTPセキュリティヘッダーを設置したが、エラー改善は見られなかった。
      参考サイト:https://tonahazana.com/wp-http-security-headers#toc8
      ・キーを設定する以外に何か抜けている操作がありましたらご教授願います。
    2. ・jsの読み込み方は、フォーラムの外部JSの読み込み方を参考に記載し直す。
      ・particles.jsを使用した場合Safariで重くなる現象があるか調べる(見当たらず)
      ・cdnではなくフォルダからjsファイルを読み込む仕様を試す(現象は変わらず)
      ・Chromeでは重くなることもなくエラーもなくjsが稼働し、Safari上でもエラーがないことから手詰まりになっており、SnowMonkeyテーマと相性の悪い何かがもしあるのであれば改善したい。

    ————————————

    どうぞよろしくお願いいたします。

    0
    いいねをした人: 居ません
    #86384
    キタジマ タカシ
    参加者
    2254

    あとで同じ問題に遭遇した人が検索しやすいように、1トピック1課題で投稿するようにお願いしています。お手数おかけいたしますが、

    2. 幾何学模様が背景で動くparticles.jsを導入すると、上記同様Safariでのみカクカクと固まりながら動く(エラー表示なし)

    は別トピックで再投稿をお願いします。

    0
    いいねをした人: 居ません
    #86389
    Di-na
    閲覧者
    1

    了解いたしました。

    再度掲載しなおします。

    0
    いいねをした人: 居ません
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • トピック「[Safari]reCAPCHAエラー表示と外部js読み込み時の速度改善について」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。