# 郵便番号から住所自動入力について

**URL:** <https://community.shopify.com/t/topic/134804>\
**Category:** Shopify テーマ\
**Created:** [July 13, 2022, 6:18am UTC](https://community.shopify.com/t/topic/134804 "2022-07-13T06:18:57Z")\
**Posts on this page:** 6\
**Page:** 1

## AI-generated summary

郵便番号から住所自動入力（AjaxZip3）で、都道府県のプルダウンが内部的には更新されるが、見た目は「北海道」のままという不具合。市区町村以下は正しく自動入力される。AjaxZip3.zip2addrの第3引数が都道府県である点が確認され、Shopifyのフォームで都道府県セレクトのnameがaddress[country]になっていることが混乱の原因と指摘。nameをaddress[province]に変更したが逆に内部更新も止まり、効果なし。 

提案と検証：
- 都道府県セレクトのnameはaddress[country]に戻し、別途nameがaddress[province]のselectが存在することを確認・必要なら追加。
- all_country_option_tagsをLiquidのreplaceで日本語都道府県に置換する設定を見直し。 
- 開発ストアでは、提案したreplace設定＋AjaxZip3の組み合わせで都道府県も自動変更されることを確認。 

懸念点：
- 貼付コードが文字化けしている可能性があり、エンコードや置換文字列の整合性を要確認。 
- all_country_option_tagsの出力（optionの値）とAjaxZip3が参照するフィールド名の一致が鍵。 

現状：未解決。コードのエンコード確認、select要素のname構成、replaceの網羅性の再検証が次のアクション。コード断片の正確さが理解に不可欠。

<div class="post-metadata">

**Author:** ![masaki1](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@masaki1](https://community.shopify.com/u/masaki1)\
**Post date:** [July 13, 2022, 6:18am UTC](https://community.shopify.com/t/topic/134804/1 "2022-07-13T06:18:57Z")

</div>

現在以下のようにコードを書いて、郵便番号から住所自動入力を実装しようと試みております。

しかし実際に郵便番号を入力してみると都道府県のプルダウンが内部的には変わっているようなのですが、

見た目はデフォルトの北海道のままになってしまいます。(手動で選択しなおすと変わります)

都道府県以降の住所は正しく入力されています。

修正方法をご教授いただけますと幸いです。

よろしくお願いいたします。

{{ 'customer.addresses.country' | t }}{{ all\_country\_option\_tags | replace: '["Aichi","愛知県"],["Akita","秋田県"],["Aomori","青森県"],["Chiba","千葉県"],["Ehime","愛媛県"],["Fukui","福井県"],["Fukuoka","福岡県"],["Fukushima","福島県"],["Gifu","岐阜県"],["Gunma","群馬県"],["Hiroshima","広島県"],["Hokkaidō","北海道"],["Hyōgo","兵庫県"],["Ibaraki","茨城県"],["Ishikawa","石川県"],["Iwate","岩手県"],["Kagawa","香川県"],["Kagoshima","鹿児島県"],["Kanagawa","神奈川県"],["Kumamoto","熊本県"],["Kyōto","京都府"],["Kōchi","高知県"],["Mie","三重県"],["Miyagi","宮城県"],["Miyazaki","宮崎県"],["Nagano","長野県"],["Nagasaki","長崎県"],["Nara","奈良県"],["Niigata","新潟県"],["Okayama","岡山県"],["Okinawa","沖縄県"],["Saga","佐賀県"],["Saitama","埼玉県"],["Shiga","滋賀県"],["Shimane","島根県"],["Shizuoka","静岡県"],["Tochigi","栃木県"],["Tokushima","徳島県"],["Tottori","鳥取県"],["Toyama","富山県"],["Tōkyō","東京都"],["Wakayama","和歌山県"],["Yamagata","山形県"],["Yamaguchi","山口県"],["Yamanashi","山梨県"],["Ōita","大分県"],["Ōsaka","大阪府"]', '["Hokkaidō","北海道"],["Aomori","青森県"],["Iwate","岩手県"],["Miyagi","宮城県"],["Akita","秋田県"],["Yamagata","山形県"],["Fukushima","福島県"],["Ibaraki","茨城県"],["Tochigi","栃木県"],["Gunma","群馬県"],["Saitama","埼玉県"],["Chiba","千葉県"],["Tōkyō","東京都"],["Kanagawa","神奈川県"],["Niigata","新潟県"],["Toyama","富山県"],["Ishikawa","石川県"],["Fukui","福井県"],["Yamanashi","山梨県"],["Nagano","長野県"],["Gifu","岐阜県"],["Shizuoka","静岡県"],["Aichi","愛知県"],["Mie","三重県"],["Shiga","滋賀県"],["Kyōto","京都府"],["Ōsaka","大阪府"],["Hyōgo","兵庫県"],["Nara","奈良県"],["Wakayama","和歌山県"],["Tottori","鳥取県"],["Shimane","島根県"],["Okayama","岡山県"],["Hiroshima","広島県"],["Yamaguchi","山口県"],["Tokushima","徳島県"],["Kagawa","香川県"],["Ehime","愛媛県"],["Kōchi","高知県"],["Fukuoka","福岡県"],["Saga","佐賀県"],["Nagasaki","長崎県"],["Kumamoto","熊本県"],["Ōita","大分県"],["Miyazaki","宮崎県"], [“Kagoshima”,“鹿児島県”],[“Okinawa”,“沖縄県”]'}}

{{ 'customer.addresses.zip' | t }}

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 14, 2022, 11:08am UTC](https://community.shopify.com/t/topic/134804/2 "2022-07-14T11:08:40Z")

</div>

こちらをご利用になっている、ということでよろしいでしょうか？

[https://shanabrian.com/web/library/ajaxzip3.php](https://shanabrian.com/web/library/ajaxzip3.php)

```javascript
onKeyUp="AjaxZip3.zip2addr(郵便番号（全てまたは上3桁）,郵便番号（下4桁）,都道府県,市区町村,丁目番地,町域大字);"

```

と記載があり、都道府県は、3番目の引数となるようですね。

```javascript
onKeyUp="AjaxZip3.zip2addr(this,'','address[province]','address[city]','address[address1]');"

```

質問者様の場合、3番目に、address[province]が指定されていますが、

記載いただいたコードを拝見しますと、

```markup
select id="address_country_{{form.id}}" name="address[country]" data-default="{{form.country}}">

```

都道府県のnameは、address[country]になっているようです。

こちらの要素のnameを、address[province]に変更いただくのが良いように思いました。

しかし、下記の懸念があります。

1. all\_country\_option\_tags で出力されるoption要素のnameが何になるか
2. all\_country\_option\_tags のreplaceがご記載の方法でしっかり日本語に書き変わるのか

各option要素のnameが日本語の都道府県になっていないと、

結局うまく動かないと思いますので、

その点を念のためご確認いただいた方が良いです。

また、replaceの記法を、私は、下記しか知らず、

[https://shopify.github.io/liquid/filters/replace/](https://shopify.github.io/liquid/filters/replace/)

質問者様が記載されている下記の方法で、

日本語都道府県に書き変わるのかが心配です。

```markup
replace: '["Aichi","愛知県"],["Akita","秋田県"],["Aomori","青森県"],["Chiba","千葉県"],["Ehime","愛媛県"],["Fukui","福井県"],["Fukuoka","福岡県"],["Fukushima","福島県"].....

```

上記の懸念は、ご確認いただき問題ないようでしたら無視いただいて大丈夫です。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![masaki1](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@masaki1](https://community.shopify.com/u/masaki1)\
**Post date:** [July 15, 2022, 12:24am UTC](https://community.shopify.com/t/topic/134804/3 "2022-07-15T00:24:29Z")

</div>

ご返信いただきありがとうございます。

address[country]からaddress[province]に変更してみましたが、うまく動作しませんでした。

この場合内部的に変わっていた都道府県も、変わらないようになってしまいました。

1. all\_country\_option\_tags で出力されるoption要素のnameが何になるか

これは確認する方法などございますでしょうか。

あまり知識がなく申し訳ございません。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 15, 2022, 1:54am UTC](https://community.shopify.com/t/topic/134804/4 "2022-07-15T01:54:28Z")

</div>

参考にされたのは下記でしょうか？

[https://webutubutu.com/webdesign/8745](https://webutubutu.com/webdesign/8745)

このコミュニティでも活躍されているJizo\_Inagakiさんのサイトなので、

ご本人からアドバイスいただけると早いかもしれませんね。

しかし、上記のページを読んでいて分かったことがありますので、

下記のようにしてみてください。

まず、

```markup
select id="address_country_{{form.id}}" name="address[country]" data-default="{{form.country}}">

```

のnameを、address[province]に変更いただきましたが、address[country]にお戻しください。

次に、

```markup

```

のように、nameにaddress[province]を持つselect要素がなければ追加お願いします。

(最初のご質問の投稿に掲載されたコードには見当たらなかったので、念のため、です。しかし、お話の流れ的に、どこかに、nameにaddress[province]を持つ要素があるように思うので、追加対応は不要なのではないかと思います。)

さらに、

all\_country\_option\_tags

の記述を下記に変更します。

(手入力で修正したので誤りがあるかもしれません。)

```markup
{{ all_country_option_tags | replace: '["Aichi","愛知県"],["Akita","秋田県"],["Aomori","青森県"],["Chiba","千葉県"],["Ehime","愛媛県"],["Fukui","福井県"],["Fukuoka","福岡県"],["Fukushima","福島県"],["Gifu","岐阜県"],["Gunma","群馬県"],["Hiroshima","広島県"],["Hokkaidō","北海道"],["Hyōgo","兵庫県"],["Ibaraki","茨城県"],["Ishikawa","石川県"],["Iwate","岩手県"],["Kagawa","香川県"],["Kagoshima","鹿児島県"],["Kanagawa","神奈川県"],["Kumamoto","熊本県"],["Kyōto","京都府"],["Kōchi","高知県"],["Mie","三重県"],["Miyagi","宮城県"],["Miyazaki","宮崎県"],["Nagano","長野県"],["Nagasaki","長崎県"],["Nara","奈良県"],["Niigata","新潟県"],["Okayama","岡山県"],["Okinawa","沖縄県"],["Saga","佐賀県"],["Saitama","埼玉県"],["Shiga","滋賀県"],["Shimane","島根県"],["Shizuoka","静岡県"],["Tochigi","栃木県"],["Tokushima","徳島県"],["Tottori","鳥取県"],["Toyama","富山県"],["Tōkyō","東京都"],["Wakayama","和歌山県"],["Yamagata","山形県"],["Yamaguchi","山口県"],["Yamanashi","山梨県"],["Ōita","大分県"],["Ōsaka","大阪府"]', '["北海道","北海道"],["青森県","青森県"],["岩手県","岩手県"],["宮城県","宮城県"],["秋田県","秋田県"],["山形県","山形県"],["福島県","福島県"],["茨城県","茨城県"],["栃木県","栃木県"],["群馬県","群馬県"],["埼玉県","埼玉県"],["千葉県","千葉県"],["東京都","東京都"],["神奈川県","神奈川県"],["新潟県","新潟県"],["富山県","富山県"],["石川県","石川県"],["福井県","福井県"],["山梨県","山梨県"],["長野県","長野県"],["岐阜県","岐阜県"],["静岡県","静岡県"],["愛知県","愛知県"],["三重県","三重県"],["滋賀県","滋賀県"],["京都府","京都府"],["大阪府","大阪府"],["兵庫県","兵庫県"],["奈良県","奈良県"],["和歌山県","和歌山県"],["鳥取県","鳥取県"],["島根県","島根県"],["岡山県","岡山県"],["広島県","広島県"],["山口県","山口県"],["徳島県","徳島県"],["香川県","香川県"],["愛媛県","愛媛県"],["高知県","高知県"],["福岡県","福岡県"],["佐賀県","佐賀県"],["長崎県","長崎県"],["熊本県","熊本県"],["大分県","大分県"],["宮崎県","宮崎県"],["鹿児島県","鹿児島県"],["沖縄県","沖縄県"]'}}

```

こうすることで、

optionのvalueが日本語になり、AjaxZip3.zip2addrに対応されるのではないかと思います。

(前回の返信で、optionのnameとお伝えしましたが、valueの誤りでした。)

しかし、optionのvalueを日本語に変更してしまって、果たしてShopifyが正常に処理をしてくれるのかが分かりません。

上記をやってみていただいて、うまく表示されなかったり保存されない場合は、

optionのvalueは書き換えずに、

nameがaddress[province]のselect要素のselectedを変更する処理を作った方が良さそうです。

その場合は、このスレッドにてまたご相談ください。

即答は難しいかもしれませんが考えてみます。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![masaki1](https://avatars.discourse-cdn.com/v4/letter/m/46a35a/32.png) [@masaki1](https://community.shopify.com/u/masaki1)\
**Post date:** [July 15, 2022, 4:50am UTC](https://community.shopify.com/t/topic/134804/5 "2022-07-15T04:50:22Z")

</div>

ありがとうございます。

all\_country\_option\_tagsをいただいたコードへ置き換えてみましたが、最初のように北海道のまま見た目は変わりませんでした。

検証に必要な部分が抜けているかもしれませんので、コードすべてを添付しますのでご確認いただけますと幸いです。お時間を割いていただき感謝申し上げます。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 15, 2022, 6:01am UTC](https://community.shopify.com/t/topic/134804/6 "2022-07-15T06:01:57Z")

</div>

いただいたコードをそのまま貼り付けてのテストはしていませんが、

下記のコードと、AjaxZip3.zip2addrを、合わせて利用することで、

郵便番号を入力した際に、都道府県も含めて自動的に変更されることを、

私の開発ストアの「マイページ \> アドレス帳管理」にて確認できました。

```markup
{{ all_country_option_tags | replace: '["Aichi","愛知県"],["Akita","秋田県"],["Aomori","青森県"],["Chiba","千葉県"],["Ehime","愛媛県"],["Fukui","福井県"],["Fukuoka","福岡県"],["Fukushima","福島県"],["Gifu","岐阜県"],["Gunma","群馬県"],["Hiroshima","広島県"],["Hokkaidō","北海道"],["Hyōgo","兵庫県"],["Ibaraki","茨城県"],["Ishikawa","石川県"],["Iwate","岩手県"],["Kagawa","香川県"],["Kagoshima","鹿児島県"],["Kanagawa","神奈川県"],["Kumamoto","熊本県"],["Kyōto","京都府"],["Kōchi","高知県"],["Mie","三重県"],["Miyagi","宮城県"],["Miyazaki","宮崎県"],["Nagano","長野県"],["Nagasaki","長崎県"],["Nara","奈良県"],["Niigata","新潟県"],["Okayama","岡山県"],["Okinawa","沖縄県"],["Saga","佐賀県"],["Saitama","埼玉県"],["Shiga","滋賀県"],["Shimane","島根県"],["Shizuoka","静岡県"],["Tochigi","栃木県"],["Tokushima","徳島県"],["Tottori","鳥取県"],["Toyama","富山県"],["Tōkyō","東京都"],["Wakayama","和歌山県"],["Yamagata","山形県"],["Yamaguchi","山口県"],["Yamanashi","山梨県"],["Ōita","大分県"],["Ōsaka","大阪府"]', '["北海道","北海道"],["青森県","青森県"],["岩手県","岩手県"],["宮城県","宮城県"],["秋田県","秋田県"],["山形県","山形県"],["福島県","福島県"],["茨城県","茨城県"],["栃木県","栃木県"],["群馬県","群馬県"],["埼玉県","埼玉県"],["千葉県","千葉県"],["東京都","東京都"],["神奈川県","神奈川県"],["新潟県","新潟県"],["富山県","富山県"],["石川県","石川県"],["福井県","福井県"],["山梨県","山梨県"],["長野県","長野県"],["岐阜県","岐阜県"],["静岡県","静岡県"],["愛知県","愛知県"],["三重県","三重県"],["滋賀県","滋賀県"],["京都府","京都府"],["大阪府","大阪府"],["兵庫県","兵庫県"],["奈良県","奈良県"],["和歌山県","和歌山県"],["鳥取県","鳥取県"],["島根県","島根県"],["岡山県","岡山県"],["広島県","広島県"],["山口県","山口県"],["徳島県","徳島県"],["香川県","香川県"],["愛媛県","愛媛県"],["高知県","高知県"],["福岡県","福岡県"],["佐賀県","佐賀県"],["長崎県","長崎県"],["熊本県","熊本県"],["大分県","大分県"],["宮崎県","宮崎県"],["鹿児島県","鹿児島県"],["沖縄県","沖縄県"]'}}

```

いただいたコードを拝見しますと、

上記のコードが文字化けしてしまっているようでした。

おそらく、テキストファイルにされる際に文字化けしただけで、

実際のコードは文字化けしていないと思うのですが、

念のためコードをご確認ください。

(北海道と表示されている、とのことで問題ないと思いますが、念のため。)

さて、もし、文字化けが発生していない場合ですが、

Chromeのdeveloper toolsでの要素検証(F12を押すと立ち上がります)

を見ていただいて、

都道府県のoptionが、下記のようになっているか確認いただくのが良いかと思います。

```markup

```

もし、

なっていない場合や、

なっていても動いていない場合、

実際にサイトを見ながらでないと対応できなさそうです。

その場合は、個別にメッセージを頂戴できればと思います。

(キュー田辺)