Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now
Build the future of communications.
Start building for free
  • By Phil Nash
    Web Speech APIを利用しブラウザで音声を認識する方法 Speech recognition browser web speech api jp

    この記事はTwilio Developer EvangelistのPhil Nashこちらで公開した記事の日本語版です。

    Web Speech APIには、音声合成(text to speech)と、音声認識(speech to text)という2つの機能があります。以前の記事では音声合成について解説しましたが、今回はSpeechRecognition APIを利用したブラウザの音声認識、音声書き起こし方法について解説します。

    ユーザーが発する音声コマンドを認識できれば、通常よりも没入感のあるインターフェースを提供でき、音声操作を好むユーザーを獲得しやすくなります。2018年のGoogleの報告によると、全世界のオンライン人口のうち27%がモバイルデバイスで音声検索を使用しています。今回解説するブラウザの音声認識機能を用いて、あなたのWebアプリケーションで基本的な音声検索からインタラクティブbotまで、多岐にわたる機能を提供できます。

    次のセクションからAPIのしくみを理解し、何ができるか実際に確認してみましょう。

    必要なもの

    APIを実際に体験できるサンプルアプリケーションを作成するために次のツールを用意します。


    今回はHTML、CSS、JavaScriptを使用してアプリケーションを作成します。作業用の新しいディレクトリを作成し、このディレクトリにstarter HTMLCSSを保存します。保存したHTMLファイルをブラウザで開くと以下のスクリーンショットと同じ画面が表示されます。

    speech to text sample app

    次のセクション …

    Read More
  • By Phil Nash
    Build a stock quote SMS bot with Twilio and TypeScript Build a stock quote SMS bot with Twilio and TypeScript

    We've seen how to send an SMS with TypeScript and how to receive and reply to SMS messages with TypeScript. Now let's create something we could use! If you're into investing, you can never have too many ways to check in on the stock market, so let's build an application you can send a stock symbol to and get back a stock quote.

    In this post we will build a Node.js application with TypeScript, using Express, the Twilio Node package, and the Finnhub API to reply to incoming SMS messages with stock quotes.

    What you will need

    To build the application in this post you will need:

    Read More
  • By Phil Nash
    HTML属性を使い、ユーザーに優しい2要素認証を実現する方法 HTML attributes to improve your user's two factor authentication experience

    この記事はTwilio Developer EvangelistのPhil Nashこちらで公開した記事の日本語版です。

    ユーザーから見ると、ログイン操作、特に2要素認証コードの入力は面倒なものです。開発者として、アカウントセキュリティ要件を満たすアプリケーション構築は必須ですが、快適な操作性にも気を配る必要があります。この2つの要件がトレードオフに感じることもあるでしょう。

    この記事では、基本的な<input>要素とHTML属性に焦点を当て、スピーディーな2要素認証を実現する方法を解説します。

    デフォルトのユーザー体験

    <form action="/sessions/check-2fa" method="POST">
      <div>
        <label for="token">Please enter the code you were sent:</label>
        <input type="text" name="token" id="token" /> 
      </div>
      <button type="submit">Check token</button>
    </form>
    

    このままでも、使いやすいフォームです。<input>には名前と一意のIDを割り当てます。<label>には、適切なfor属性を明確に割り当てます。これはアクセス性を確保するために重要です。<input& …

    Read More
  • By Phil Nash
    Como implementar o compartilhamento de tela no seu app de Vídeo da Twilio Como implementar o compartilhamento de tela no seu app de Vídeo da Twilio

    Em posts recentes vimos como gravar a tela de um usuário usando o Chrome e o Firefox. Agora está na hora de combinarmos esta funcionalidade com uma aplicação de videoconferência, agregando o compartilhamento de tela com nosso chat de vídeo.

    O que estamos construindo

    Neste post, vamos começar pelo quickstart de aplicação de vídeo da Twilio e adicionar o compartilhamento de tela nele. Quando terminarmos, a aplicação vai te permitir fazer chamadas entre navegadores e compartilhar a tela entre eles.

    Exemplo do projeto final em execução

    Do que você vai precisar

    Para construir esta aplicação, você vai precisar de algumas coisas:

    Read More
  • By Phil Nash
    Configurer une application React avec un serveur proxy Node.js react-node-js-serveur-proxy-express

    Create react app est un excellent outil pour avoir une application React qui tourne en un rien de temps. Mais c’est un peu plus brouillon quand il s’agit de créer ou de prototyper une application nécessitant un composant côté serveur - comme la création de token d'accès pour Twilio Video ou Chat.

    J'ai trouvé qu'il était plus facile de travailler sur un serveur au sein du même projet, afin de pouvoir tout démarrer avec une seule commande.

    À la fin de cet article, vous aurez appris à configurer un serveur Express qui fonctionne avec une application React.

    Si vous êtes pressés, vous pouvez directement aller voir le code sur GitHub.

    Comment ça marche ?

    Il existe une option que vous pouvez définir dans le package.json de Create React App. Elle permet de rediriger les requêtes qui ne sont pas au format text/html vers un autre back-end.

    Aujourd'hui, …

    Read More
  • By Phil Nash
    How to receive and reply to SMS messages with TypeScript and Twilio Hoqw to receive and reply to SMS messages with TypeScript and Twilio

    We've looked at how to send an SMS using TypeScript, but with Twilio you can also receive and reply to incoming SMS messages.

    When you send an SMS message to your Twilio phone number, Twilio will send a webhook, an HTTP request with all the details about the message, to a URL you associate with that number. You can reply to the message by responding to the webhook with TwiML (Twilio Markup Language).

    In this post we will build a Node.js application with TypeScript, using Express and the Twilio Node package to reply to incoming SMS messages.

    What you need

    To follow this tutorial you will need:

    Read More
  • By Phil Nash
    How to Send an SMS With TypeScript Using Twilio How to Send an SMS With TypeScript Using Twilio

    Writing Node.js applications with TypeScript means you can take advantage of the TypeScript type system and tooling. We've seen on this blog how to send an SMS message with Node.js, but let's have a look at how to do this with TypeScript.

    What you need

    To follow this tutorial you will need:

    Once you've got all that, let's dive into the code.

    Getting started with TypeScript

    Let's start a new TypeScript project for this example. In a terminal, run the following commands to create a new project directory and create a package.json file.

    mkdir send-sms-with-typescript
    cd send-sms-with-typescript
    npm init --yes
    

    Now we need to install some dependencies. We'll need TypeScript in our …

    Read More
  • By Phil Nash
    How to Add Email Notifications to Your Node.js SMS App How to Add Email Notifications to Your Node.js SMS App

    Sending notifications from your application means you can deliver your users relevant, timely and personalised information about their accounts or activity. You may have already built SMS notifications into your application, perhaps by following this Node.js tutorial on ETA notifications, but can we improve the experience? Your customers may want to receive notifications that are easily referenceable later or choose the channel through which they receive alerts.

    In this post, we will explore how email notifications can work alongside SMS notifications for account alerts, and walk through how to build them into your application using the Twilio SendGrid Email API.

    What you'll need

    To follow along with the code and build the application in this post you will need:

    Read More
  • By Phil Nash
    Send your first interactive AMP Email with Twilio SendGrid Send your first interactive AMP email with Twilio SendGrid

    AMP for email is a way to build emails that allow users to interact dynamically with the content of the message. AMP emails can load up-to-date data, handle form submissions inline, provide interactive components like carousels and accordions, and even use modern CSS.

    AMP for email is a combination of a whitelisting process and a subset of the open source AMP HTML web component library that together allows you to build and send dynamic emails. You may have seen examples of this in your inbox before — my favourite is this experience when commenting on a Google Doc.

    An animation, viewing a Google Docs comment email in Gmail. In the animation I reply to a comment then mark the thread as resolved all within the email.

    You too can create email experiences like this. In this article we're going to send a basic AMP Email using Twilio SendGrid.

    What you'll need

    To build your first AMP Email and send it with SendGrid you will need:

    Read More
  • By Phil Nash
    How to build a one-time passcode protected conference line with Twilio Verify and Ruby How to build a one-time passcode protected conference line with Twilio Verify and Ruby

    We've seen how to build a conference line and then protect it with a static passcode. However, passcodes can be guessed or leaked, especially if they are reused over time. An alternative is to make a list of numbers that are permitted to join the call. But, since spoofing phone numbers is relatively easy, this still may not protect you.

    A one-time passcode (OTP) sent to a caller's phone or email, can verify they are who they say they are and increase the security of your conference line once more.

    In this post we will take the Rails application we previously developed and add a conference line secured in two ways. We will:

    1. Ensure that the caller is a known participant by checking their caller ID against a list of permitted phone numbers
    2. Send them an OTP using Twilio Verify which they then have to enter correctly to ensure …
    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.