HTMLとJavaScriptで国際電話番号入力フィールドを作成する方法
読む所要時間: 9 分
![How to build international phone number input in HTML and JavaScript How to build international phone number input in HTML and JavaScript](/content/dam/twilio-com/global/en/blog/legacy/2021/international-phone-number-input-html-javascript-jp/uBkp2yRDyMzNiQLs1Nhup0375OUI23kQtK5b_KKOAFvWn71088jQr0O208J5nyCtiTRkU8ZqGOT9M8.png)
電話番号は国際的な番号体系として知られるE.164により標準化され、国コードと加入者番号を組み合わせた+14155552671のようなフォーマットが利用されます。このフォーマットは(Twilioをはじめ)多くのAPIで必須とされており、国コードと電話番号を2つの別々のデータベース列に格納する必要はありません。
しかし、次のようなケースの電話番号入力でユーザーに+記号と国コードを入力してもらうのは避けたいところです。
- 新規アカウントの登録
- SMS 2FAの有効化
- カスタマーサービスからの返信のリクエスト
- マーケティング関連通知の登録
この記事では、基本的なHTMLとJavaScript、そしてintl-tel-input
プラグインを使用して電話番号入力フィールドを作成し、電話番号を処理・分解する方法を説明します。電話認証と不正防止のためのヒントも紹介します。
この記事のコード全体はGitHubで参照できます。
intl-tel-inputプラグインの機能
このプロジェクトでよく使用するintl-tel-inputは、「国際電話番号の入力と確認に使用するJavaScriptプラグイン」です。このプラグインについて、自分がいつも使用しているセットアップを紹介しますが、そのほかにも多くの設定オプションがあります。興味があればこちらのドキュメントをご覧ください。
このプラグインは、国コードのドロップダウンを表示し、さらに各国の国旗も表示できます。また、加入者番号、つまり「各国フォーマット」の番号を処理し、スペース、括弧、ダッシュなどを含むユーザー入力を正規化できます。
![E.164 numbers](/content/dam/twilio-com/global/en/blog/legacy/2021/international-phone-number-input-html-javascript-jp/-n__rIXPqbLsYPvK9pD6-GIZsTD970N391886Rhk_4E2xCO5_V5oRunFUjb9NRUBhajgWWsxyM3V8m.png)
intl-tel-inputプラグインをコードに埋め込む
作成するコードはごくシンプルなものとし、一般的なHTMLとJavaScriptを使用して始めます。新規ファイルindex.html
を作成し、次のコードを追加します。
このファイルをブラウザに読み込むと、フォームフィールドが表示されますが、まだ番号は整形されていません。そのため、プラグインの初期化が必要です。
![no formatting phone number input field](/content/dam/twilio-com/global/en/blog/legacy/2021/international-phone-number-input-html-javascript-jp/CNuohXAJlAP2kBz1bJ89ya6PIBRCEZwiTt_kKromwWUtqP0Gu_Xl0ib5umS5mgNgmlKutJXWXKzlHl.png)
intl-tel-inputプラグインの初期化
HTMLセクション内かつbodyセクションの下にscriptタグを追加し、初期化コードを追加します。
utilsScript
はオプション扱いですが、国固有のプレースホルダーや後で使用するE.164フォーマットなど、多くの便利な機能が使用できます。
ページをリロードすると、国を選択するピッカーとプレースホルダーが表示されます。
![input field with country picker](/content/dam/twilio-com/global/en/blog/legacy/2021/international-phone-number-input-html-javascript-jp/Ki_N8pKZ9RO88_bKbgWM2kJYGMxp7c0oryMB_0K-8PIt0CzGebhjEfgz6ctVfrYyKwgTRYstyv0KT.png)
電話番号入力を処理して国際フォーマットにする
フォームの下にアラートバナーを追加します。これにより結果を確認できます。
次に、フォーム送信を処理する関数を追加します。<script>
タグ内のプラグイン初期化のセクションに続けて、次を追加します。
ここで最も重要なのがphoneInput.getNumber()
です。このプラグインコードにより、選択した国コードとユーザー入力を国際フォーマットに変換します。
ページをリロードし、電話番号を入力すると国際フォーマットが表示されます。
![e.164 formatted number](/content/dam/twilio-com/global/en/blog/legacy/2021/international-phone-number-input-html-javascript-jp/kGOKdkDVZqsWFPEZ-vFVmMztyRbtgLedxkqE85iSsAtk50zmS5EydKbFlAdC6yDfa3XMIkFZGlhGBr.png)
おまけ: プラグインのロケーション対応
プラグインのデフォルトロケーションは米国に設定されているため、世界各国のユーザーを対象とするにはこの機能を実装することになるでしょう。例えば、IPアドレスに基づいてユーザーのロケーションを設定するように指定できます。
IPinfoの無料アカウントにサインアップし、アクセストークンを入手してください。別のIPアドレスAPIを使用しても構いません。次の関数を<script>
タグの先頭、phoneInputField
オブジェクト定義の前に追加します。
intl-tel-inputの初期化を更新し、: initialCountry: "auto"
とgeoIpLookup: getIp
の2つのパラメーターを含めます。
テストのためにオーストリアに存在するVPNを使って接続すると、デフォルトの国が更新されていることを確認できます。
![localized default country](/content/dam/twilio-com/global/en/blog/legacy/2021/international-phone-number-input-html-javascript-jp/bttWSCbsL-JN8Ko7qIVGqLp7oNYM8gbivK2xTyilJzr7eAIP1aUSeKjaIB-frIJ9sUmN7guQg218yR.png)
おまけ: 優先国の追加
便利な機能の1つに、「優先国」の設定があります。これにより、指定した国をリストの先頭に表示できます。今回の例では、米国、コロンビア、インド、ドイツのユーザーが大多数であるため、これらの国を優先します。
![preferred countries](/content/dam/twilio-com/global/en/blog/legacy/2021/international-phone-number-input-html-javascript-jp/Sb28uSMx9dnElshr4x7ti5sCJP3YsTmisAxyXG9SOAAoefDhYFYfzcguw0Q-MJLbqj6AHN0JN5g1Vv.png)
この機能を使用するにはプラグインの初期化時にpreferredCountries
に対してISO 3166-1 alpha-2コードフォーマットで記述した配列を設定します。
電話番号入力の確認
このフォームでは、無効な電話番号の入力を防止できないことにお気づきでしょう。電話番号入力の確認方法の説明に従い、無効な番号の入力を防止できます。
![enter invalid phone number](/content/dam/twilio-com/global/en/blog/legacy/2021/international-phone-number-input-html-javascript-jp/MA_5t4q3pEAn9O8-OBMekd9Z4t0wQi_y536UESWX7-pXrTRsUK20PBxJ16kSdp0uzKiz75NU0g2ISg.png)
電話認証のベストプラクティス
電話番号をE.164フォーマットで正規化したいわけですが、これらの番号を保存するのであれば電話認証も必要になります。電話認証により番号入力の誤りを防ぎ、ユーザーがアカウントに関連付けている番号がユーザーの管理している番号であることを確認し、間違った相手に迷惑メールを送信していないことを確認できます。お分かりですね。便利なことに、Twilio Verify APIを使えば、SMSや音声通話により電話認証が簡単に行えます。こちらのCode Echangeプロジェクトではワンタイムパスコードの実装方法を紹介しています(前半の電話番号入力まではこの記事で完了しています)。
次の記事も役に立つでしょう。
- Twilio Lookup APIドキュメント
- Twilio VerifyとTwilio Functionsによるサーバーレス電話認証
- ユーザーに2要素認証(2FA)の有効化を促す方法
- StripeとTwilioでSMS認証機能搭載の高速チェックアウトシステムを実装する方法
電話番号の入力と認証についてご不明な点は、Twitter @kelleyrobinsonでお問い合わせください。I can't wait to see what you build.