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
    Senden einer SMS mit TypeScript über Twilio Senden einer SMS mit TypeScript über Twilio


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von How to Send an SMS With TypeScript Using Twilio. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Node.js-Anwendungen mit TypeScript zu schreiben, bedeutet, dass wir die Vorteile des Typsystems und der Tools von TypeScript nutzen können. In diesem Blog haben wir bereits erfahren, wie wir eine SMS-Nachricht mit Node.js senden. Hier sehen wir uns an, wie wir das mit TypeScript erledigen.

    Das brauchen wir

    Für dieses Tutorial benötigen wir Folgendes:

    Sobald wir alle Voraussetzungen erfüllt haben, können …

    Read More
  • By Phil Nash
    Web Speech APIを用いたブラウザでのテキスト読み上げ speech-to-text-browser-web-speech-api-jp

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

    Web Speech APIには、音声合成(テキスト読み上げ)と、音声認識(音声からテキストへの変換)という2つの機能があります。SpeechSynthesis APIを使用すると、ブラウザ上で音声を選択して任意のテキストを読み上げることができます。

    アプリケーション内での音声アラートや、WebサイトでのAutopilot駆動のチャットボット利用など、Web Speech APIはWebインターフェースを強化する大きな可能性を秘めています。ここでは、Webアプリケーションでの音声読み上げの実行方法について説明します。

    必要なもの

    SpeechSynthesis APIについて学び、このアプリケーションを構築するには、次の準備が必要です。

    準備ができたら作業用のディレクトリを作成し、そのディレクトリにこのHTMLファイルこのCSSファイルをダウンロードします。これらのファイルが同じフォルダにあり、CSSファイルの名前がstyle.cssであることを確認します。ブラウザでHTMLファイルを開くと、次の内容が表示されます。

    tts - browser

    では、このAPIを使用して、ブラウザでの読み上げを行いましょう。

    Speech Synthesis API

    この小さなアプリケーションでの作業を始める前に、ブラウザの開発ツールを使用して読み上げ …

    Read More
  • By Phil Nash
    Erstellen eines Videochats mit React-Hooks Erstellen eines Videochats mit React-Hooks


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Build a Video Chat with React Hooks. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Wir haben im Rahmen dieses Blogs bereits einen Videochat in React erstellt, aber mittlerweile wurden mit der Version 16.8 von React Hooks eingeführt. Mit Hooks können wir Zustands- oder andere React-Funktionen innerhalb von Funktionskomponenten nutzen, ohne dass wir eine Klasse schreiben müssen.

    In diesem Post werden wir eine Videochat-Anwendung mit Twilio Video und React erstellen, die nur Funktionskomponenten enthält. Dazu nutzen wir die Hooks useState, useCallback, useEffect und useRef.

    Das brauchen wir

    Um diese Videochat-Anwendung zu erstellen, brauchen wir Folgendes:

    Sobald wir das …

    Read More
  • By Phil Nash
    Build a competition entry chat bot with Twilio Autopilot and Facebook Messenger Build a competition entry chat bot with Twilio Autopilot and Facebook Messenger

    The Apprentice is back on TV screens around Asia, and Twilio is the official technology partner. Throughout the series Twilio APIs have supported the show and candidates; delivering notification messages to the teams, powering their solutions in episode 11, and running a Watch & Win competition for the viewers.

    The Watch & Win competition was implemented as a chatbot over Facebook Messenger. In this post we will look at how you can build your own competition bot using Twilio Autopilot, Twilio Functions and Airtable.

    A screen grab of talking with a bot over Facebook Messenger. It asks a question, I respond with the answer, then it asks for my name which I also respond to.

    Defining the competition

    To build a watch and win competition bot, we need a few parameters for how the bot will work:

    • The competition will run every week that the show is broadcasting, with a new question per episode
    • The question will include a phrase that was said during the week's episode and three options for who said it
    • Viewers can enter …
    Read More
  • By Phil Nash
    Umwandeln von Sprache in Text im Browser mit der Web Speech API Umwandeln von Sprache in Text im Browser mit der Web Speech API


    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Speech to text in the browser with the Web Speech API. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Die Web Speech API bietet zwei Funktionen: die Sprachsynthese, auch als Text-to-Speech bezeichnet, und die Spracherkennung, also das Umwandeln von Sprache in Text. In einem früheren Blog bin ich auf die Sprachsynthese eingegangen, hier untersuche ich, wie Browser mithilfe der SpeechRecognition API Sprache erkennen und transkribieren.

    Wenn wir in der Lage sind, Sprachbefehle von Benutzern zu verarbeiten, können wir immersivere Benutzeroberflächen entwerfen. Dies ist wichtig, weil Benutzer gerne ihre Stimme verwenden. Google meldete 2018, dass 27 % der weltweiten Online-Bevölkerung die Sprachsuche auf Mobilgeräten nutzen. Mit Spracherkennung im Browser sorgen wir …

    Read More
  • By Phil Nash
    Einrichten einer React-App mit einem Node.js-Server-Proxy Einrichten einer React-App mit einem Node.js-Server-Proxy

    Hallo und Danke fürs Lesen! Dieser Blogpost ist eine Übersetzung von Set up a React app with a Node.js server proxy. Während wir unsere Übersetzungsprozesse verbessern, würden wir uns über Dein Feedback an help@twilio.com freuen, solltest Du etwas bemerken, was falsch übersetzt wurde. Wir bedanken uns für hilfreiche Beiträge mit Twilio Swag :)

    Create React App ist ein hervorragendes Tool zur Einrichtung einer reibungslos funktionierenden React-Anwendung. Beim Entwickeln oder Erstellen eines Prototyps für eine Anwendung, die eine serverseitige Komponente erfordert, z. B. die Generierung von Zugriffstokens für Twilio Video oder Chat, ist der Vorteil nicht sofort offensichtlich. Ich empfand es am einfachsten, mit einem Server innerhalb desselben Projekts zu arbeiten, um alles über nur einen Befehl zu starten.

    In diesem Artikel erfährst du, wie du einen Express-Server einrichtest, der zusammen mit der React-App ausgeführt wird. Falls du nicht so lange warten möchtest, kannst du direkt zum Startprojekt …

    Read More
  • By Phil Nash
    ReactアプリにNode.jsサーバープロキシを設定する方法 Node.js + Express

    この記事はTwilio Developer EvangelistのPhil Nashがこちらで執筆した記事の日本語版です。執筆から時間が経過しているため、2021年5月時点で動作確認を行い、一部オリジナルの記事よりコードを修正しています。

    Create React Appは、Reactアプリケーションを稼働させるための優れたツールです。Twilio Videoチャット用のアクセストークン生成など、サーバーサイドコンポーネントを必要とするアプリケーションを構築、試作する場合ではどうでしょうか。1つのコマンドですべてを動かせるため、同じプロジェクト内で1台のサーバーを操作するのが最も簡単です。

    この記事を最後まで読むと、Reactアプリと連動するExpressサーバーの設定方法を理解できるようになります。お急ぎの場合は、GitHubのスタータープロジェクトをご覧ください。

    動作の仕組み

    Create React Apppackage.jsonで設定できるオプションには、text/html以外のリクエストを別のバックエンドにプロキシするものがあります。この機能を利用すると、あらゆる場所で稼働しているアプリケーションにプロキシすることができますが、今回はReactプロジェクト内でサーバーを実行できるようにしたいと思います。

    ここでは、1つのコマンドでReactアプリとExpressサーバーを同時に実行できるようにするために、いくつかのnpmモジュールをまとめて、プロキシできるようにします。

    はじめに

    以降の手順では、Node.jsとnpmをインストールし …

    Read More
  • 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属性を明確に割り当てます。これはアクセス性を確保するために重要です。<i …

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