Build the future of communications.
Start Building for Free

translated posts

  • By Kelley Robinson
    HTMLとJavaScriptで国際電話番号入力フィールドを作成する方法 How to build international phone number input in HTML and JavaScript

    この記事はTwilioデベロッパーエバンジェリストのKelley Robinsonこちら(英語)で執筆した記事を日本語化したものです。

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

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

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

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

    この記事のコード全体はGitHubで参照できます。

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

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

    このプラグインは、国コードのドロップダウンを表示し、さらに各国 …

    Read More
  • By Kelley Robinson
    HTMLとJavaScriptで電話番号の入力を検証する方法 validate phone numbers with html and javascript without using regex

    この記事はTwilioデベロッパーエバンジェリストのKelley Robinsonが執筆したこちらの記事(英語)を日本語化したものです。

    今回のBlogは、検索エンジンで「電話番号 正規表現」を検索して後悔したことがある方に最適です。電話番号の形式として有効なものは数多くありますが、電話番号が有効かどうかを確認するのに役立つ無料のツールもあります。

    今回の投稿では、Twilio Lookup APIとintl-tel-input JavaScriptプラグインを使用して電話番号の有効性をチェックする2つの方法について紹介します。今回の内容は「HTML/JavaScriptで国際電話番号入力を作成する方法」をベースにしています。こちらの投稿では、今回の投稿で紹介しているような美しい電話番号入力フィールドの作成に関する詳細を確認できます。

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

    電話番号入力を検証する理由

    電話番号を検証することでサインアップのスパムと不正を防止できるだけでなく、入力ミスなどの単純ミスも検知できます。このBlogの最後に、電話認証における推奨事項とアカウントセキュリティに関するベストプラクティスを紹介しています。通常は電話番号が有効なものであるかどうかだけでなく、その電話番号をユーザー自身が保持していることも確認する必要があります。

    電話番号検証の設定

    アプリケーションによっては電話番号の入力欄がすでに用意されている場合があります。これから作成しようという場合、電話番号の入力を受け付けるシンプルなHTMLページを使用することをお勧めしま …

    Read More
  • By Kelley Robinson
    Twilio VerifyとTwilio Functionsによるサーバーレス電話認証 Serverless Verify

    この記事はTwilioデベロッパーエバンジェリストのKelley Robinsonが執筆したこちらの記事(英語)を日本語化したものです。日本語化作業時点(2022年8月)の状況に合わせて記事内のコードを一部、変更しています。

    セキュリティは誰もが気になる項目でしょう。その中で電話認証はアプリケーションの保護やbotアカウントの防止に役立つ簡単な方法と言えます。そのため、ユーザーの電話番号にワンタイムパスワードを送信して所有番号の検証をするやり方は、製品の登録時や電話番号の初回登録時によく使われる方法です。

    ユーザーの電話番号を確認することで、不正の低減や通知の信頼性を高められます。今回は、TwilioのサーバーレスファンクションとTwilio Verify APIを使用してWebアプリケーションから電話番号を検証する方法を紹介します。

    クイックリンク:

    Twilio Verifyをアプリケーションに追加するための前提条件

    この記事に沿ってコーディングを行う際に必要なもの:

    Twilioコンソールで作成したVerifyサービスのService SID(先頭がVA)を控えておきます。

    Verify Service SID

    Twil …

    Read More
  • By Prashanth Swaminathan
    Bringen Sie Ihr Unternehmen mit Twilio Studio voran Bringen Sie Ihr Unternehmen mit Twilio Studio voran

    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Push Your Business to the Next Level with Twilio Studio.

    Umfragen zur Kundenzufriedenheit sind ein innovatives Mittel, um Feedback zum Aufbau eines treuen und zufriedenen Kundenstamms zu erhalten. Mit IVR-Umfragen (Interaktive Sprachantwort (Interactive Voice Response, IVR)) können Sie beim Zusammentragen von wichtigem Feedback auf unnötige Telefondienste verzichten.

    Die große Herausforderung besteht darin, die Kunden während der Umfrage bei der Stange zu halten. Genau dafür ist dieser IVR, mit dem Sie vor der Umfrage das Einverständnis der Kunden einholen, bestens geeignet. Auf diese Weise verringern Sie die Umfrageabbrüche, denn niemand wird befragt, der nicht befragt werden möchte. Außerdem ruft dieser IVR diejenigen Kunden zurück, die zwar ihr Einverständnis zur Umfrage gegeben, aber vorzeitig aufgelegt haben.

    Dieser Blogbeitrag zeigt Ihnen, wie Sie dazu Twilio Studio, unser zustandsorientierte, visuelle Workflow-Entwicklungsplattform, nutzen. Zunächst erstellen wir einen Studio-Flow. Anschließend entwickeln …

    Read More
  • By Alan Klein
    Eine Schritt-für-Schritt-Anleitung zum Einrichten eines elastischen SIP-Trunkings Eine Schritt-für-Schritt-Anleitung zum Einrichten eines elastischen SIP-Trunkings.png

    In meinem letzten Blogbeitrag, Registrieren eines SIP-Telefons direkt bei Twilio (und noch viel mehr...), haben wir eine SIP-Domäne für Twilio Programmable Voice eingerichtet und unsere SIP-Softphones direkt bei Twilio registriert. Auf die Weise konnten wir Anrufe an das Public Switched Telephone Network (PSTN) tätigen und empfangen, aber, noch wichtiger, auch die Grundlage für die Entwicklung kreativer Anwendungen schaffen, die Anrufe mithilfe der dynamisch zurückgegebenen Twilio Markup Language (TwiML) intelligent weiterleiten.

    In diesem Beitrag zeigen wir einen Schritt-für-Schritt-Ansatz, mit dem Sie Ihr SIP-Element – IP-PBX,SIP-PRI IAD,SBC usw. – mit dem elastischen SIP-Trunking von Twilio verbinden können. Am Ende dieses Beitrags haben Sie Ihre bestehende Kommunikationsinfrastruktur über Twilio verbunden und sind bereit, eine Reihe anderer Funktionen von Twilio darüber zu legen.

    Ganz grundsätzlich bietet Twilio Elastic SIP-Trunking Kapazitäten für dynamisches Trunking, um Pay-as-you-go-Anrufe über Twilio zu tätigen und zu empfangen. Das Netzwerk von Twilio …

    Read More
  • By Brooke Isaacs
    Ein Crashkurs im SIP-Trunking Ein Crashkurs im SIP-Trunking.png

    Vor zwanzig Jahren, als SIP-Trunking und VoIP auf der Weltbühne ihren Einzug hielten, träumten wir noch nicht von den Dimensionen, in denen das Internet unsere Kommunikation revolutionieren würde. Jetzt, wo wir unsere Lieblingsplattformen wählen können, ist die einheitliche Online-Kommunikation zu einem Teil unseres Alltags geworden.

    Telefonanrufe sind immer noch eine bewährte Kommunikationsmethode in einer Welt, die Text, E-Mail und Messaging liebt. Unternehmen setzen zunehmend auf VoIP- und SIP-Trunking, um der Nachfrage nach erschwinglicher (und skalierbarer) Mensch-zu-Mensch-Kommunikation gerecht zu werden.

    Während unsere Online-Kommunikation zunimmt, wird SIP-Trunking häufig zum Gesprächsthema, wenn es um digitale Übergänge geht. Auch wenn SIP-Trunking ein ziemlich weites Feld ist: Es ist nicht schwer, die Grundlagen seiner Funktionsweise zu verstehen und zu überlegen, welch transformative Bedeutung es für Ihr Unternehmen haben könnte. Keine Sorge, wir haben an alles gedacht! Hier finden Sie alles, was Sie über SIP-Trunking wissen müssen.

    Was ist SIP-Trunking?

    SIP (Session Initiation Protocol)-Trunking ist …

    Read More
  • By Niels Swimberghe
    .NETアプリケーションにデフォルト設定を適用する方法 .NETアプリケーションにデフォルト設定を適用する方法

    この記事はNiels Swimbergheこちらで公開した記事(英語)を日本語化したものです。

    過去に投稿したチュートリアル記事「TwilioとC#および.NETのアプリケーションをより良く構成する方法(英語)」と「SendGridとC#および.NETのアプリケーションをより良く構成する方法(英語)」では、Microsoft.Extensions.ConfigurationAPIを使用してアプリケーションの改善方法をご紹介しました。本稿では、これらのチュートリアルのテクニックを基に、デフォルトのオプションを設定の特定の場所に保存し、別の場所から上書きする方法をご紹介します。 例を挙げて説明します。アプリケーションから送るメールの種類は様々で、ウェルカムメール、パスワードリセットメール、オファーメールなどがあります。メールの種類によって、メールアドレスを使い分けたほうがよい場合もあります。「no-reply@yourdomain.tld」のように、返信不要のアドレスを使うことが多いですが、オファーメールでは受信者からの返信を受け取ることに大きな価値があることもあります。そこで、返信不要のアドレスを使う代わりに、返信を営業担当者に転送し、顧客関係管理(CRM)システムと自動的に統合されるようなメールアドレスを使うことができます。

    本稿では、デフォルトの返信用アドレスとして「no-reply@yourdomain.tld」を使用しますが、オファーメールでは、例えば「offers@yourdomain.tld」のように別のメールアドレスを使用します。

    必要事項 …

    Read More
  • By Oluyemi Olususi
    SymfonyとReactでシングルページアプリケーションを構築する SymfonyとReactでシングルページアプリケーションを構築する

    この記事はOluyemi Olususiこちらで公開した記事(英語)を日本語化したものです。

    はじめに

    PHPで構築されたWebアプリケーションは、優れたユーザー体験を提供するために、フロントエンドで処理される膨大な量のロジックを必要とします。LaravelなどのPHPフレームワークには、Vue.jsを使用してクライアント側のロジックを作成するためのサポートが含まれています。これにより、開発者はこれらの技術を組み合わせることで、アプリケーションを迅速に構築できます。

    Laravelの構造とは逆に、再利用可能なPHPコンポーネントを提供するSymfonyは、特定のライブラリやフロントエンドフレームワークを選びません。開発者は、アプリケーションのフロントエンドのロジックを担うツールを柔軟に選ぶことができます。このチュートリアルでは、SymfonyとReactを使ってシングルページのアプリケーションをシームレスに構築する方法をご紹介します。

    このチュートリアルを最後まで進めると、ReactとSymfonyで作られた再利用可能なユーザーインターフェースコンポーネントを作る方法を学べます。

    前提条件

    このチュートリアルを最後まで進めるには、ReactやSymfonyでアプリケーションを構築するための基本的な知識と、PHPによるオブジェクト指向プログラミングの適度な知識が必要です。

    また、開発するマシンにはNode.jsYarnパッケージマネージャがインストールされていることが必要となります。最後に、依存関係を管理するために、Composerをインストールする必 …

    Read More
  • By Fikayo Adepoju
    Electronでデスクトップアプリケーションを開発する方法 Electronでデスクトップアプリケーションを開発する方法

    この記事はFikayo Adepojuこちらで公開した記事(英語)を日本語化したものです。

    チームコラボレーションソフトウェアの定番であるSlack、本稿執筆時点で市場で最も人気のあるコードエディタの一つであるVisual Studio CodeWhatsAppのデスクトップ版には共通点があります。それは、これらすべてがElectron.jsで構築されているということです。これらの企業が、ネイティブのデスクトップソフトウェア開発手法よりもElectron.jsを採用したことにより、Electron.jsはデスクトップアプリケーション開発のための信頼できるフレームワークとして確立されました。

    本稿では、Electron.jsの概要と、そのユースケースをご紹介します。

    このチュートリアルでは、以下のようなデスクトップアプリケーションを開発します。

    • Web技術で一から構築されている。
    • メインプロセスとレンダラープロセスの間で通信を行う。
    • Electron.jsのAPIを利用し、ブラウザAPIでは利用できない機能にアクセスすることができる。
    • デスクトップ通知を表示する。

    Electron.jsの概要

    Electron.jsを知る

    Electron.jsは、HTML、CSS、JavaScriptなどのWeb技術を使ってデスクトップアプリケーションを構築するためのオープンソースフレームワークです。これにより、デスクトップアプリケーションの構築は、もはやC++、C#、Javaの開発者だけのものではなくなり、Web開発者はそのスキルを業界標準のデスクトップソフト …

    Read More
  • By August Allard
    PythonでHTTPリクエストを送信する5つの方法 PythonでHTTPリクエストを送信する5つの方法

    この記事はAugust Allardこちらで公開した記事(英語)を日本語化したものです。

    ソフトウェア開発では、同じ結果を得るための方法が複数あることがよくあります。これは、サードパーティーのソフトウェアパッケージを評価する際にも同じことが言えます。例えば、Pythonのエコシステムでは、HTTP リクエストの送信に関連するパッケージがいくつもあります。開発者はどれを使えばいいのでしょうか?

    この実験ベースのチュートリアルでは、Pythonの最も人気のあるリクエスト関連パッケージを5つご紹介します。各パッケージの簡単なGETリクエストを作成する方法と簡単なコードスニペットを例示します。NASAのAstronomy Photo of the Day API(以降「APOD」と短縮)を使って、Webブラウザで宇宙の写真を表示させます。

    本稿の目標は、各パッケージのすべての機能を細かく比較対照するのではなく、様々なPythonパッケージを使って簡単なGETリクエストを素早く構成することです。もし非同期リクエストがあなたのユースケースにより適しているなら、Twilioブログの「aiohttpとasyncioを使用したPythonの非同期HTTPリクエスト」を参照してください。

    必要事項

    NASAのデモ用APIキーを取得する

    https://api.nasa.gov/に移動します。認証セクションに、NASAデータセットを検索するために固有のAPIキーが必要ないことが記載されています。もしA …

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.