Shopifyでカナ氏名のフィールドを作成する方法【正規表現】

はじめに

Shopifyストアではお客様情報として氏名（性・名）を標準で備えていますが、日本の会員ではよくある読み仮名/ふりがなの情報については用意されておりません。

この記事ではHelium Customer Fieldsを使って、カナ氏名用のフィールドを用意して、お客様のマイページに表示するカスタマイズの手順を紹介します。またそれぞれのフィールドでは正規表現を使ったバリデーション（入力内容の形式確認）を行うような設定を行います。

Helium Customer Fieldsは、お客様情報の収集を行う入力項目を手軽に追加をすることができるShopifyアプリです。誕生日やペット名など標準のShopifyストアには備わっていない項目を追加することで、ストアの特色にあったマイページを作成することができます。

まずはアプリの提示する手順に従ってフォームを作成します。ここではフィールドラベルとして「カタカナ」「ひらがな」を設定しています。

まずはカタカナのバリデーションを追加します。

まずはVALIDATIONのエリアにあるRequiredにチェックを入れます。これで入力内容の確認が行われることになります。

次に「Add validaton rule」をクリックし、バリデーションルールを追加します。

プルダウンメニューがあるので「Must macth regular expression」を選択してください。これは正規表現（Regular Expression）を使った形式確認を行い、指定した形式に沿っていないデータが入力された場合はエラーを返却するといった動作になります。

そして正規表現のルールとして下記の内容に入力してください。これはカタカナ入力を強制するためのもので、ローマ字や平仮名が入力された場合はエラーとなるようになります。なお、下記のルールでは半角カナも許容する設定になっています。

^(?:[ァ-ヶｦ-ﾟ])+$

次は同じように平仮名のバリデーションです。カタカナのときと同じようにVALIDATIONのエリアに入力を行っていってください。

最後にバリデーションルールとして下記の内容に入力しましょう。これは平仮名かどうかを確認するためのルールです。

^[ぁ-ん]+$

フォームをお客様のマイページに追加しましょう。テーマのカスタマイズ画面を開き、従来のお客様アカウント > お客様アカウントを開きます。何らかのアカウントでログインをしないとログイン画面にリダイレクトされますので、ご自分のテストアカウントでログインします。

これでマイページのカスタマイズが可能になります。セクションを追加 > アプリ > Customer formでHelium Customer Fieldsの提供するブロックを追加してください。

このブロックの設定項目として「Form ID」というものがあるため、ここに先ほどHeliumで作成したフォームのIDを入力します。

最後に期待通りに動作するか確認してみましょう。ストアにログインしてお客様アカウントのマイページを開きます。

カタカナ欄には「カタナカ」、ひらがな欄には「ひらがな」を入力して、それぞれ問題なく保存ができることが確認できます。

次に何か違う文字種を入れてみましょう。それぞれの入力欄に、ひらがなとカタナカが混在するように入力を行うと、下記のようなエラーを出すようになります。こういった不正な状態では保存できないようになり、お客様へのエラーメッセージも正常に表示されているため、期待通りに動いていそうです。

この記事ではShopifyのマイページをカスタマイズし、カナ氏名など文字種の制限のある入力フィールドを追加する方法についてご紹介しました。ストア構築時の参考になれば幸いです。