- このトピックには8件の返信、2人の参加者があり、最後に
により1日、 15時間前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】27.4.1
【お使いの Snow Monkey Blocks のバージョン】22.3.1
【お使いの Snow Monkey Editor のバージョン】なし
【お使いの PHP のバージョン】8.1.29
【お使いのブラウザ】Google chrome
【WordPress】6.7.1### 発生している問題
郵便番号から自動で住所を補完するJavaScriptライブラリ「YubinBango」を使っているのですが、以下のエラーがコンソールに表示され、ライブラリが動作しなくなりました。
***********
yubinbango.ts:33
Uncaught TypeError: n.indexOf is not a function
at yubinbango.ts:33:53
at Array.some (<anonymous>)
at t.t (yubinbango.ts:33:19)
at yubinbango.ts:16:18
at NodeList.map (<anonymous>)
at t.s (yubinbango.ts:14:14)
at new t (yubinbango.ts:9:12)
at HTMLDocument.<anonymous> (yubinbango.ts:71:3)
（匿名） @ yubinbango.ts:33
（匿名） @ yubinbango.ts:33
（匿名） @ yubinbango.ts:16
（匿名） @ yubinbango.ts:14
t @ yubinbango.ts:9
（匿名） @ yubinbango.ts:71
***********ちなみに同じようなライブラリで「ZipAddr」というのがあるのですが、こちらも同様に動作しません。
***********
zipaddrx.js?v=1.38:53
Uncaught TypeError: Cannot read properties of undefined (reading ‘1018656’)
at Zip.pBm (zipaddrx.js?v=1.38:53:35400)
at Zip.kc (zipaddrx.js?v=1.38:53:16389)
at Zip.yNg (zipaddrx.js?v=1.38:53:31001)
Zip.pBm @ zipaddrx.js?v=1.38:53
Zip.kc @ zipaddrx.js?v=1.38:53
Zip.yNg @ zipaddrx.js?v=1.38:53
***********### 試したこと
- Snow Monkeyを使用している場合にエラーが発生します。
- テーマをTwenty Twenty-Fiveに変更し、Snow Monkey Blocksを無効化するとエラーが解消され、正常に動作します。
- 過去には正常に動作していたため、どこかのアップデートで競合が発生した可能性があります。
お時間があるときにご確認いただけますと幸いです。
よろしくお願いいたします。いいねをした人: 居ません例えば YubinBango の場合だと、
https://yubinbango.github.io/yubinbango/yubinbango.jsを読み込んだ段階でエラーが発生するということでしょうか？どちらのライブラリも使い方がよくわかっていないので、もしこちらの環境で簡単に試せる方法があるなら教えていただきたいです。
いいねをした人: 居ません説明不足で申し訳ございません。
はい、そうです。
YubinBango ですとフォームのページを開いたときにエラーが出ています。
ZipAddr ですと郵便番号を入力するとエラーがでます。YubinBango ですと、「カスタム HTML」ブロックに
<script src=”https://yubinbango.github.io/yubinbango/yubinbango.js” charset=”UTF-8″></script>
<form class=”h-adr”>
<span class=”p-country-name” style=”display:none;”>Japan</span>〒<input type=”text” class=”p-postal-code” size=”8″ maxlength=”8″><br>
<input type=”text” class=”p-region p-locality p-street-address p-extended-address” /><br>
</form>を入れれば試せます。
よろしくお願いいたします。いいねをした人:
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>を
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8" type="module"></script>にすると変化はありますか？
いいねをした人: 居ませんこっちのほうが良いかも？
<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8" defer></script>いいねをした人:アドバイスいただいた通り、deferを追加したところ、正常に動作するようになりました！
スクリプトの読み込みタイミングに原因があったんですね。迅速かつ的確なご対応ありがとうございました。いいねをした人: 居ませんスクリプトの読み込みタイミングに原因があったんですね。
Snow Monkey は JavaScript 版の FontAwesome を使用しているのですが、どうも FontAwesome も YubinBango もグローバル空間に変数を定義しているみたいで、それがバッティングしてコケてしまうみたいでした。
なので
type="module"として閉じ込めるか（すみません、この辺よくわかってないです）、deferで順番をずらしたらいけるかなと思いまして。deferすることで逆に FontAwesome の表示に影響がでる可能性もあるかもなので、そのときはtype="module"にするか、YubinBango を独自にビルドして使うと良いかもしれません。いいねをした人:
- トピック「Snow Monkeyで郵便番号住所入力補完ライブラリが動作しなくなりました」には新しい返信をつけることはできません。