{"product_id":"2026-10-07","title":"【メタシンク】会員登録フォームに利用規約の全文をスクロール表示する設定例","description":"\u003cp\u003e\u003cspan\u003eShopifyアプリ「メタシンク（AL CustomerMetaSync）」で作った会員登録フォームに、利用規約の全文をスクロール表示する設定例です。メタシンクの会員登録フォームでは「利用規約に同意する」のチェックボックスは出せますが、規約の本文はフォーム上に表示されません。従来の会員登録ページで規約を枠の中に載せていたストアが、新しいお客様アカウントへ移行するときにも同じ見せ方を保てます。\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eなお、新しいお客様アカウントでは、ログイン・アカウント作成の画面に「続行すると、利用規約に同意したことになります」という一文が、利用規約へのリンク付きで表示されます。それでもあえて登録フォームに全文を載せるのは、リンクを開かないと本文を目にしないまま「同意したことになる」形ではなく、お客様が内容をその場で確かめたうえで、自分でチェックを入れて同意する形にしたいためです。会員規約やポイント・定期購入の条件など、登録のときにきちんと読んでもらいたい規約があるストアに向いています。\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"完成イメージ：利用規約に同意するのチェックの直後に、規約の全文をスクロール表示する\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_1.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eメタシンクには「カスタムCSSのパス」「カスタムJSのパス」という設定項目があり、テーマのassetsディレクトリに置いたファイルを登録フォームに読み込ませることができます。今回もこの仕組みを使うため、アプリ本体には一切手を加えません。\u003c\/span\u003e\u003c\/p\u003e\n\u003cdiv class=\"divider\"\u003e\u003c\/div\u003e\n\u003ch3\u003e仕組み：同意項目をラベルの文字で見つけ、すぐ後ろに差し込む\u003c\/h3\u003e\n\u003cp\u003e\u003cspan\u003eメタシンクが描画するフォームでは、ラベルを含む項目全体が「alcms-field」というクラスのdivでラップされています。チェックボックスにはメタフィールドのような決まったidが無いため、「利用規約に同意」というラベルの文字を目印にして項目を特定し、その直後に補足文と規約ボックスを差し込みます。\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eフォームは後から描画されることがあるため、ページの変化を最大15秒監視して、フォームが現れた時点で差し込みます。万一差し込めなかった場合は、利用規約ページへのリンクだけでも表示し、規約を確認する手段が無いまま同意を求める状態にならないようにしています。\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"仕組み：利用規約に同意のラベルを目印に項目を特定し、直後に補足文と規約ボックスを挿入する\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_2.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003ch3\u003e設定手順\u003c\/h3\u003e\n\u003cp\u003e◆1. テーマにJS\/CSSファイルを追加\u003cbr\u003e・コードエディタで assets ディレクトリに onboarding.js と onboarding.css を新規作成し、コードを貼り付けます（コードはご購入後に表示されます）\u003cbr\u003e・onboarding.js の先頭にある設定部の TERMS_HTML を、ストアの利用規約の本文に差し替えます。TERMS_URL には、ストアの利用規約ページのURLを「https:\/\/」から始まる形で入れます\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"assets\/onboarding.js のコード（設定部）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_3.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"assets\/onboarding.js のコード（処理部）\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_4.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"assets\/onboarding.css のコード\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07_5.png?v=1791268695\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003cp\u003e◆2. メタシンク管理画面でパスを指定\u003cbr\u003e・会員登録フォームの設定画面で「カスタムJSのパス」に onboarding.js、「カスタムCSSのパス」に onboarding.css を入力して保存します（assetsからの相対パスで指定します）\u003c\/p\u003e\n\u003cp\u003e\u003cimg alt=\"設定手順：メタシンク管理画面でカスタムJS\/CSSのパスを指定\" src=\"https:\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-09-08_4_9df5452f-5621-48cb-bfd3-a08db901c190.png?v=1789014719\" class=\"zoomable-image\" style=\"max-width: 100%; height: auto;\"\u003e\u003c\/p\u003e\n\u003ch3\u003eカスタマイズのポイント\u003c\/h3\u003e\n\u003cp\u003e\u003cspan\u003eコード先頭の設定部だけを書き換えれば、他のストアにもそのまま流用できます。\u003c\/span\u003e\u003c\/p\u003e\n\u003cp\u003e・AGREE_LABEL：同意のチェックボックスのラベル（部分一致）。ラベルの文言を変えている場合は合わせます\u003cbr\u003e・NOTE_TEXT：規約ボックスの上に出す補足文\u003cbr\u003e・TERMS_HTML：利用規約の本文（HTML）\u003cbr\u003e・TERMS_URL：本文を出せなかったときに表示するリンク先\u003cbr\u003e・規約ボックスの高さは onboarding.css の max-height（初期値260px）で変えられます\u003c\/p\u003e\n\u003ch3\u003e注意点\u003c\/h3\u003e\n\u003cp\u003e・規約の本文はJSの中に直接書いています。\u003cstrong\u003e規約を改定したときは、ストアの利用規約ページとこのJSの両方を更新\u003c\/strong\u003eしてください。片方だけ直すと内容が食い違います\u003cbr\u003e・規約にURLがそのまま書かれていると、スマートフォンで枠から横にはみ出しがちです。CSSで折り返す指定を入れているので、横スクロールは出ません。Wordなどから貼り付けた本文に残るインデント指定も、枠からはみ出さないよう抑えています\u003cbr\u003e・メタシンクに読み込ませられるJS\/CSSはそれぞれ1ファイルです。\u003ca href=\"\/products\/2026-09-08\"\u003e追加入力項目をボタンで展開するTIPS\u003c\/a\u003eなどの onboarding.js をすでにお使いの場合は、今回のコードを既存のファイルの末尾に追記してください（コードは独立しているので、追記しても互いに干渉しません）\u003cbr\u003e・JS\/CSSが反映されない場合は、メタシンク管理画面でパスをもう一度保存し直すと読み込まれます\u003c\/p\u003e\n\u003cp\u003e\u003cspan\u003eメタシンクの会員登録フォームのカスタマイズは、\u003ca href=\"\/products\/2026-09-08\"\u003e追加入力項目をボタンで展開するまで隠す方法\u003c\/a\u003eと、\u003ca href=\"\/products\/2026-09-09\"\u003eプルダウンの選択に応じて追加入力項目を表示する方法\u003c\/a\u003eも紹介しています。\u003c\/span\u003e\u003c\/p\u003e","brand":"STORE DOJO","offers":[{"title":"Default Title","offer_id":68270674542843,"sku":null,"price":0.0,"currency_code":"JPY","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0733\/0381\/8491\/files\/2026-10-07.png?v=1791268695","url":"https:\/\/store-dojo.com\/products\/2026-10-07","provider":"STORE DOJO","version":"1.0","type":"link"}