{"product_id":"2026-09-09","title":"【メタシンク】会員登録フォームでプルダウンの選択に応じて追加入力項目を表示する設定例","description":"\u003cp\u003e\u003cspan\u003eShopifyアプリ「メタシンク（AL CustomerMetaSync）」で作った会員登録フォームで、プルダウンの選択状態に応じて追加入力項目を表示する設定例です。この例では「ご家族情報」の続柄プルダウンが選ばれている間だけ、その方の誕生日欄を表示します。使わない入力欄（空欄）の羅列を見せずに済むため、フォームの見た目がすっきりし、入力の負担感を減らせます。\u003c\/span\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"完成イメージ：プルダウンの選択に応じて誕生日欄を表示する\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-09_1.png?v=1788839379\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cspan\u003eメタシンクには「カスタムJSのパス」「カスタムCSSのパス」という設定項目があり、テーマのassetsディレクトリに置いたファイルを登録フォームに読み込ませることができます。今回はJSで表示切り替えのロジックを組み、CSSで表示される瞬間をふわっとフェードインさせています。アプリ本体には一切手を加えません。\u003c\/span\u003e\u003c\/p\u003e\n\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\n\u003ch3\u003e仕組み：changeイベントで依存項目の表示を切り替える\u003c\/h3\u003e\n\u003cp\u003e\u003cspan\u003eメタシンクが描画するフォームでは、各入力項目のinput \/ selectに「metafield[名前空間.キー]」という共通ルールのidが振られています。トリガーとなるプルダウンをidで特定してchangeイベントを監視し、値が選ばれている間だけ依存項目（誕生日欄）を表示します。選択が解除されたときは、依存項目を隠すと同時に入力値もクリアして、非表示のまま値が送信されるのを防ぎます。\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003e誕生日欄のような日付型の項目は年・月・日の3つに分割して描画されるため、idの完全一致だけでは見つからないことがあります。その場合はid・name・data-key属性の部分一致でフォールバック検索するようにしています。\u003c\/span\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"仕組み：changeイベントを監視して依存項目の表示を切り替える\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-09_2.png?v=1788839387\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003e設定手順\u003c\/h3\u003e\n\u003cp\u003e◆1. 顧客メタフィールドとフォームの準備\u003cbr\u003e・「設定 → カスタムデータ → 顧客」の「定義を追加」で、トリガー用（続柄・単一行テキストで選択肢を指定）と依存項目用（誕生日・日付）のメタフィールドを作成します\u003cbr\u003e・「名前空間とキー」には、コードがそのまま参照する custom.member_1_relation のようなキー名を入力します（この例で必要な6件は下図を参照）\u003cbr\u003e・カスタマーアカウントのアクセスは「読み取りと書き込み」にする必要があります\u003cbr\u003e・メタシンクの管理画面で、作成したメタフィールドを会員登録フォームに追加します\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"設定手順：顧客メタフィールドの定義を作成し、名前空間とキーを指定する\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-09_3_1470a2f6-8f73-476b-bbac-c5a6f91f1048.png?v=1789014658\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e◆2. テーマにJS\/CSSファイルを追加\u003cbr\u003e・コードエディタで assets ディレクトリに onboarding.js と onboarding.css を新規作成し、コードを貼り付けます（コードはご購入後に表示されます）\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"assets\/onboarding.js のコード\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-09_5_46e55227-0041-44cd-b1fd-cdbbcdf3feed.png?v=1789014667\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"assets\/onboarding.css のコード\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-09_6.png?v=1789014675\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\n\u003cp\u003e◆3. メタシンク管理画面でパスを指定\u003cbr\u003e・会員登録フォームの設定画面で「カスタムJSのパス」に onboarding.js、「カスタムCSSのパス」に onboarding.css を入力して保存します（assetsからの相対パスで指定します）\u003c\/p\u003e\n\n\u003cp\u003e\u003cimg alt=\"設定手順：メタシンク管理画面でカスタムJS\/CSSのパスを指定\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-09_4_12a94fb8-889b-4a16-8b4e-314352559961.png?v=1789014728\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\n\u003ch3\u003eカスタマイズのポイント\u003c\/h3\u003e\n\u003cp\u003e\u003cspan\u003eコード先頭のGROUPSに「トリガーのキー」と「依存項目のキーの配列」のペアを並べるだけで、任意の組み合わせに応用できます。トリガー1つに対して依存項目を複数ぶら下げることもできます。CSSはフェードインの演出だけを担当しているため、onboarding.cssを設置しなくても表示・非表示の機能自体は動作します（見た目がふわっと切り替わらず、パッと切り替わるだけになります）。\u003c\/span\u003e\u003c\/p\u003e\n\n\u003ch3\u003e注意点\u003c\/h3\u003e\n\u003cp\u003e・選択を解除すると依存項目の入力値はクリアされます（意図しない値の送信を防ぐための挙動です）\u003cbr\u003e・ページ表示時に既に値が入っている場合（マイページでの編集など）は表示されたままになり、値も消えません\u003cbr\u003e・JS\/CSSが反映されない場合は、メタシンク管理画面でパスをもう一度保存し直すと読み込まれます\u003c\/p\u003e\n\n\u003cp\u003e\u003cspan\u003e追加入力項目をボタンで展開するまで隠しておく方法は\u003ca href=\"\/products\/2026-09-08\"\u003eこちらのTIPS\u003c\/a\u003eで、会員登録時に取得した誕生日をShopify Flowで活用する方法は\u003ca href=\"\/products\/2024-07-20\"\u003eこちらのTIPS\u003c\/a\u003eで紹介しています。\u003c\/span\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":49280185008379,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-09.png?v=1788839416","url":"https:\/\/store-dojo.com\/products\/2026-09-09","provider":"STORE DOJO","version":"1.0","type":"link"}