By 
Background
Svelte is a JavaScript front-end framework that has been getting a lot of attention in recent years. Svelte was chosen as the most loved tool by developers in the Stack OverFlow Developer Survey 2021. In this tutorial, we’ll introduce Svelte’s basic development methods, as well as advanced topics such as state management and animation.
Goal
Learn the basics of Svelte, as well as some advanced development methods, by creating a task management application as shown below.
What’s Svelte?
Svelte is an open-source front-end framework for creating interactive user interfaces that run in a browser.
Differences with React and Vue.js
Svelte, like React and Vue.js, is a component-based JavaScript framework for creating user interfaces.
However, there is a crucial difference between Svelte and React or Vue.js. Svelte doesn’t use virtual DOM. Svelte is a compiler written in TypeScript that compiles JavaScript at build time, whereas React and …
背景
JavaScriptのフロントエンド開発に関わる技術は移り変わりが目まぐるしく、日々新しいツールやフレームワークが誕生しています。Svelteも近年注目を集めているフロントエンドフレームワークの一つです。2021年のStackOverFlowの開発者サーベイでは、Svelteが開発者から最も愛されているツールとして選ばれました。本稿では、Svelteの基礎的な開発方法から、Storeを使った状態管理やアニメーションの適用方法など、応用までご紹介します。
目標
このチュートリアルを最後まで進めると、Svelteの基礎から応用までを学べるとともに、以下のようなタスク管理アプリを作成できます。
Svelteとは?
Svelteは、ブラウザ上で動作するユーザーインターフェースを作成するためのオープンソースフレームワークです。
ReactやVue.jsとの違い
SvelteはReactやVue.jsと同様に、ユーザーインターフェースを作成するためのコンポーネントベースのJavaScriptフレームワークです。
しかし、SvelteとReactやVue.jsには決定的な違いがあります。Svelteは仮想DOMを使用しません。SvelteはTypeScriptで書かれたコンパイラであり、ビルド時にJavaScriptをコンパイルするのに対し、ReactやVue.jsは実行時に仮想DOMを使ってアプリケーションコードを解釈します。
Svelteとほかのフレームワークの違いについて詳しくは、ブログ記事「SvelteとReactの基本を比較」を参照してください。
Svelteを使う …
This tutorial is divided into 2 parts: part 1 covers the project setup and front end development, while part 2 covers the back end development and testing of the app.
Part 1: Creating an OCR Communication App with Tesseract.js and React (Part 1)
In part 1, we built the front end of this OCR communication app:
Let’s now build the back end.
Building the back end
Create .env and server.js files in the root directory of the project.
First, let’s store the Twilio credentials in the .env file.
Open the .env file in a text editor and paste the following code:
TWILIO_ACCOUNT_SID=XXXXX
TWILIO_AUTH_TOKEN=XXXXX
TWILIO_PHONE_NUMBER=XXXXX
XXXXX represents a placeholder for Twili …
Background
Optical Character Recognition (OCR) is a technology that optically recognizes handwritten or printed characters as data, and converts them into characters that can be used in computer programs. OCR is used in a variety of fields. For example, OCR is used to detect stolen vehicles by recognizing their license plates, and to digitize printed books.
Tesseract.js is an open source OCR library that supports over 100 languages. Tesseract.js compiles the Tesseract OCR engine written in C into JavaScript WebAssembly. With Tesseract.js, you can easily build OCR programs that run in the browser.
In this tutorial, we will show you how to build a React application using Tesseract.js to perform OCR on images directly in the browser, and send the recognized text to you as an SMS.
This tutorial is divided into 2 parts: part 1 covers the project setup and front end development, while part 2 covers the back …
背景
「OCR」という技術を耳にしたことがありますか?OCRは、Optical Character Recognition(光学文字認識)の略です。手書きや印刷された文字を光学的な手段でデータとして取り込み、文字認識することによってコンピュータープログラムなどで使用できるように変換する技術です。OCRは様々な分野で利用されています。使用例としては、車のナンバープレートを認識し盗難車を検知したり、書籍をデジタル化したりという例があります。Tesseract.jsは100以上の言語に対応するオープンソースのOCRライブラリです。Tesseract.jsは、C言語で開発されたTesseractOCRエンジンをJavaScriptのWebAssemblyにコンパイルしています。Tesseract.jsを使うと、ブラウザでOCRを簡単に利用できます。
Tesseract.jsの精度は完全ではありません。誤認識する可能性がありますので、これまで手作業で行っていた作業をTesseract.jsで自動化し効率を上げるためなど、補助的な用途での利用を推奨します。
本稿では、Tesseract.jsとReactを使用し、ブラウザ上で画像のOCR処理を行い、読み取ったテキストをSMSとして送信するアプリの作成方法をご紹介します。
本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。
後編はこちら:Tesseract.jsとReactでOCRコミュニケ …
本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。
前編はこちら:Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編)
前編では、以下のOCRコミュニケーションアプリケーションのフロントエンドを構築しました。続いて、バックエンドを構築しましょう。
バックエンドを構築する
次に、バックエンドを構築します。
プロジェクトのルートディレクトリに.envとserver.jsファイルを作成してください。
まずは、Twilioの認証情報を.envファイルに格納します。
テキストエディタで.envファイルを開き、以下のコードをペーストしてください。
TWILIO_ACCOUNT_SID=XXXXX
TWILIO_AUTH_TOKEN=XXXXX
TWILIO_PHONE_NUMBER=XXXXX
XXXXXの文字列は、Twilioの認証情報のプレースホールダーを表しています。
TWILIO_ACCOUNT_SIDとTWILIO_AUTH_TOKENは、Twilio ConsoleからAccount SIDとAuth Tokenを取得し、XXXXXにペーストしてください。Account SIDとAuth Tokenの取得方法について詳しくは、ヘルプセンターの「Account SIDとAuthTokenの確認方法」を参照してください。
TWILIO_PHONE_NUMBERは、Twilioから取得した電話番 …
Background
Twilio offers a wide range of phone related features. Among them, Answering Machine Detection or “AMD” allows you to identify the incoming caller and adjust the call flow accordingly. With AMD, you can determine whether an outgoing call issued from a voice API was answered by a human, an answering machine, or a fax machine. Based on this information, you can update the call and trigger different actions after the call ends.
This tutorial will show you not only the basic features of AMD, but also how to create a delivery reminder system with it.
Goal
By the end of this tutorial, you will learn the basic features of AMD and have a delivery reminder system built using Node.js. This system plays a reminder message if a human answers the call, but if the call is answered by an answering machine it also sends an SMS message like so: …
背景
Twilioは電話に関する機能を多岐にわたって提供しています。留守番電話検出機能(Answer Machine Detection、以下「AMD」)もその 1つです。AMDは、着信側を特定し、それに合わせて通話フローを調整できる機能です。AMDを使えば、音声APIからの着信を人間、留守番電話、ファックスのどちらが対応したかを判断できます。この情報に基づいた通話の更新処理や通話終了後の処理の分岐を実装できます。
このチュートリアルでは、AMDの基本機能や設定方法だけでなく、AMDを使った配達リマインドシステムの作成方法までを紹介します。
目標
このチュートリアルを最後まで進めると、AMDの基本機能、設定方法を実践的に学べるとともに、Node.jsを使った配達リマインドシステムを作成できます。この配達リマインドシステムでは、着信者が電話に出た場合は音声リマインドを、留守電だった場合は留守電メッセージを残したうえで以下のようなSMSメッセージを送信します。
以下の処理フローを実装します。
想定される技術知識
本稿では以下の知識を想定しています。
- JavaScriptの基礎知識
- Node.jsの基礎知識
必要なツール
- 安定バージョンのNode.jsとnpm。
- Twilioアカウント。アカウント作成方法はHelp Centerの「Twilioアカウントの作成方法」を参照してください。
- 電話とSMSが発信できるTwilioの電話番号。電話番号の取得方法はTwilio Docsの「最初のTwilio電話番号を取得」を参照してください。
- インストール、アカウント登録、A …
Background
Twilio Conversations is an API that creates a virtual space for users to communicate across multiple channels. Twilio Conversations supports multiple chat platforms for cross and multi-channel communication. For example, a chat started via SMS can be continued via MMS, WhatsApp or web chat. Using the API, you can create conversations, add users, and monitor events during conversations via webhooks, making it possible to implement a communication method tailored to your needs.
In this tutorial, I will show you how to create a simple web chat app with Twilio Conversations and Vue.js.
This tutorial is divided into 2 parts: part 1 covers the project setup and back end development, while part 2 covers the front end development and testing of the app.
Part 2: Creating a web chat app with Twilio Conversations and Vue.js (Part 2)
Goal
By the end of this tutorial, you will be able to learn …
This tutorial is divided into 2 parts: part 1 covers the project setup and back end development, while part 2 covers the front end development and testing of the app.
Part 1: Creating a web chat app with Twilio Conversations and Vue.js (Part 1)
In part 1, we set up the project and built the back end of the below chat app. Let’s continue and build the front end.
Building the front end
The front end of the chat app is built using Vue components. The components used in this chat app with a .vue file extension are called single file components. Single file components combine HTML templates, JavaScript logic, and CSS styling into a single file.
Let’s create single file components for the chat app. Open a new window in the terminal.
Delete the HelloWorld.vue component that the Vue CLI created by default, and create files named Chat.vue …