• ${businessSizeLabels[2]}
  • ${businessSizeLabels[3]} ↗
    • `; const twilioServicesHTML = `
    Twilio Programmable Messaging logo ${twilioServicesLabels[0]}
    `; if (solutionsDropdown) { let industriesColumn = solutionsDropdown[2]; let industriesCTA = industriesColumn.getElementsByClassName( "navigation-dropdown-list" )[0]; industriesCTA.insertAdjacentHTML("afterend", businessSize); let partnersColumn = solutionsDropdown[3]; let partnersLastDiv = partnersColumn.getElementsByClassName( "navigation-dropdown-list" )[0]; partnersLastDiv.insertAdjacentHTML("afterend", twilioServicesHTML); } // mobile nav const paddingTopMobile = "5.5rem"; let solutionsDropdownMobile = document .getElementsByClassName("navigation-mobile-menu")[0] .getElementsByClassName("navigation-dropdown four-columns")[1] .getElementsByClassName("navigation-dropdown-section"); const businessSizeMobile = `
    ${businessSizeLabels[0]}
    `; const twilioServicesHTMLMobile = `
    Twilio Programmable Messaging logo ${twilioServicesLabels[0]}
    `; if (solutionsDropdownMobile) { let industriesColumnMobile = solutionsDropdownMobile[2]; let industriesCTAMobile = industriesColumnMobile.getElementsByClassName( "navigation-dropdown-list" )[0]; industriesCTAMobile.insertAdjacentHTML("afterend", businessSizeMobile); let partnersColumnMobile = solutionsDropdownMobile[3]; let partnersLastDivMobile = partnersColumnMobile.getElementsByClassName( "navigation-dropdown-list" )[0]; partnersLastDivMobile.insertAdjacentHTML( "afterend", twilioServicesHTMLMobile ); }

    HTML/JavaScriptで国際電話番号入力を作成する方法

    読む所要時間: 10 分

    February 01, 2021
    執筆者
    Kelley Robinson
    Twilion
    レビュー担当者
    Liz Moy
    Twilion
    Diane Phan
    Twilion

    電話番号は国際的な番号体系として知られるE.164により標準化され、国コードと加入者番号を組み合わせた+14155552671のようなフォーマットがとられます。このフォーマットは（Twilioをはじめ）多くのAPIで必須とされており、国コードと電話番号を2つの別々のデータベース列に格納する必要はありません。

    しかし、次のようなケースの電話番号入力でユーザーに+記号と国コードを入力してもらうのは避けたいところです。

    • 新規アカウントの登録
    • SMS 2FAの有効化
    • カスタマーサービスからの返信のリクエスト
    • マーケティング関連通知の登録

    この記事では、基本的なHTMLとJavaScript、intl-tel-inputプラグインを使用して電話番号入力フィールドを作成し、電話番号を処理・解析する方法を説明します。電話認証と不正防止のためのヒントも紹介します。

    完成したコードをGitHubで参照できます。

    intl-tel-inputプラグインの機能

    このプロジェクトで大いに使用するintl-tel-inputは、「国際電話番号の入力と確認に使用するJavaScriptプラグイン」です。このプラグインについて、自分がいつも使用しているセットアップを紹介しますが、その他にも多くの設定オプションがあります。こちらのドキュメントでご覧いただけます。

    このプラグインは、国コードのドロップダウンを表示し、各国の国旗も表すことができます。加入者番号、つまり「各国フォーマット」の番号を処理し、スペース、括弧、ダッシュなどを含むユーザー入力を正規化することも可能です。

     

    電話番号入力フィールドに表示されたE.164フォーマットの番号

    intl-tel-inputプラグインをコードに埋め込む

    作成するコードはごくシンプルなものとし、一般的なHTMLとJavaScriptを使用して始めます。新規ファイルindex.htmlを作成し、次のコードを追加します。

    

 
   International telephone input
   
   
   
   
 
 
 

    これによりプラグインのCSSとJSがCDNバージョンで取り込まれ、国コードのドロップダウンを表示して電話番号の処理が行えます。使用バージョンはv17.0.8ですが、最新バージョンをこちらのtagsで確認できます。プラグインはbundlerを使用したインストールもでき、ソースコードをダウンロードして独自にホストすることも可能です。

    スタイル改善のため、同じフォルダーに新しいstyles.cssファイルを作成し、こちらのCSSを追加します。

    次に、電話番号入力用のフォームを追加します。index.htmlファイルのbodyタグ内に、次のHTMLを追加します。

    
 
   
    Enter your phone number:
    
   
   
 

    ここでこのファイルをブラウザに読み込むと、フォームフィールドが表示されますが、フォーマットされていない状態のため、プラグインの初期化が必要です。

    特別なフォーマットなしの電話番号入力フィールド

    intl-tel-inputプラグインの初期化

    本文の下で、HTMLセクション内に次のscriptタグを追加し、次の初期化コードを追加します。

     
 
 

    utilsScriptはオプション扱いですが、国固有のプレースホルダーや後で使用するE.164フォーマットなど、多くの便利な機能が使用できます。

    ページをリロードすると、国ピッカーとプレースホルダーが表示されます。

    電話番号入力フィールドの米国旗、国コードのドロップダウンと電話番号のプレースホルダーテキスト

    電話番号入力を処理して国際フォーマットにする

    フォームの下にアラートバナーを追加します。これにより結果を確認できます。

     
 
 

    次に、フォーム送信を処理する関数を追加します。

    さらに役立つ条件: プラグインのロケーション対応

    プラグインのデフォルトロケーションは米国に設定されているため、世界各国のユーザーを対象とするにはこの機能が必要です。IPアドレスに基づくユーザーのロケーションをデフォルト設定に更新することが可能です。

    IPinfoの無料アカウントにサインアップし、アクセストークンを入手してください。別のIPアドレスAPIを使用しても構いません。次の関数を

    さらに役立つ条件: 優先国の追加

    便利な機能の1つに、「優先国」の設定があります。これにより、指定した国をリストの先頭に表示できます。今回の例では、米国、コロンビア、インド、ドイツのユーザーが大多数であるため、これらの国を優先します。

    電話番号入力ドロップダウンリストと先頭に表示された4つの優先国

     

    プラグインを初期化してこの設定を更新するために、preferredCountriesの配列をISO 3166-1 alpha-2コードフォーマットで追加します。

    const phoneInput = window.intlTelInput(phoneInputField, {
  preferredCountries: ["us", "co", "in", "de"],
  utilsScript:
    "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});

    電話番号入力の確認

    このフォームでは、無効な電話番号の入力を防止できないことにお気づきでしょう。電話番号入力の確認方法の説明に従い、無効な番号の入力を防止することができます。

     

    無効な電話番号の入力

     

    電話認証のベストプラクティス

    電話番号をE.164フォーマットで正規化したいわけですが、これらの番号を保存するのであれば電話認証も必要になります。電話認証により番号入力の誤りを防ぎ、ユーザーがアカウントに関連付けている番号がユーザーの管理している番号であることを確認し、間違った相手に迷惑メールを送信していないことを確認できます。お分かりですね。便利なことに、Twilio Verify APIを使えば、SMSや音声通話により電話認証が簡単に行えます。こちらのコード交換プロジェクトでワンタイムパスコードの実装方法を紹介しています（前半の電話番号入力までは以上で完了しています）。

    次の記事も役に立つでしょう。

    電話番号の入力と認証についてご不明な点は、Twitter @kelleyrobinsonでお問い合わせください。何を構築されるか、とても楽しみです。

    関連投稿

    関連リソース

    A newspaper article

    Twilio Docs

    APIからSDK、サンプルアプリまで

    言語とプラットフォームの API リファレンス ドキュメント、SDK、ヘルパー ライブラリ、クイックスタート、チュートリアル。
    An Open book

    リソース・センター

    最新の電子ブック、業界レポート、ウェビナー

    顧客エンゲージメントの専門家から学び、自社のコミュニケーションを改善しましょう。
    User group reactions

    Ahoy

    Twilio の開発者コミュニティ ハブ

    コミュニケーションとデジタル エンゲージメント エクスペリエンスを構築するためのベスト プラクティス、コード サンプル、インスピレーション。