背景

Vue.jsは世界中で使われる、パワフルなフロントエンドフレームワークです。直近ではVue 3もリリースされました。軽量化やTypeScriptのサポート強化、Composition APIの導入などが行われ、さらに手軽に、効率的なアプリケーションを構築できるようになりました。

そんなVue.jsのアプリケーションのユーザー体験や印象を向上してくれるのが、アニメーションです。Green Sock Animation Platform(通称GSAP)は、高性能にも関わらず、手軽に使えるJavaScriptのアニメーションツールです。本稿では、Vue 3とGSAPを使って、アニメーションを作成する方法をご紹介します。

目標

このチュートリアルを最後まで進めると、Vue 3のComposition APIを使ったアプリケーションにGSAPでアニメーションを適用する方法を学べます。チュートリアルを通して、以下のアニメーションを作成します。

適用するアニメーションは以下のとおりです。

• ヘッダーが画面上から中央に向かって下がってきて、時間差でリンクがフェードインする。
• パネルが画面下から中央へ上がってくる。
• 「Vue Meets GSAP」テキストが画面上から中央に向かって、1行ずつ下がってくる。
• ボールが画面の上から下がっ …

背景

「サーバーレス(Serverless)」というキーワードは近年脚光を浴び、さまざまな分野でサーバーレスを用いたソリューションが構築されています。本稿では、サーバーレス開発の概念と、Twilioが提供するサーバーレス環境である、Twilio Functionsを使った開発方法をご紹介します。

サーバーレスとは?

サーバーレスは、開発者がサーバーの構築や管理をすることなくアプリケーションを開発および実行できるクラウドを中心とした開発メソッドです。

サーバーレスアーキテクチャが誕生する前は、小さなプログラムであっても、そのプログラムを実行するサーバーを用意しなければなりませんでした。それだけでなく、用意したサーバーを運用し、常にリソースの使用状況を監視したり、脆弱性に対してパッチ適用をしたりと、維持管理が必要でした。

しかし、サーバーレスアーキテクチャでは、プログラムさえ構築してしまえば、利用者がサーバーの維持管理を行う必要がありません。デプロイされたアプリケーションは需要に応じて自動的に拡張・縮小し、セキュリティなどの管理もサーバーレス環境の提供側が行います。これにより、運用コストの低減やリソースの最適化が期待できます。

「サーバーレス」と言いますが、「サーバーが物理的に存在しない」という意味ではありません。サーバーが抽象化されていて、開発者が設計および運営上サーバーの管理を意識しなくてもいい、ということです。

Twilio Functionsとは?

Twilio Functionsは、Twilioが提供するサーバーレス環境です。Twilioアカウ …

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を使う …

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:

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.

背景

「OCR」という技術を耳にしたことがありますか?OCRは、Optical Character Recognition(光学文字認識)の略です。手書きや印刷された文字を光学的な手段でデータとして取り込み、文字認識することによってコンピュータープログラムなどで使用できるように変換する技術です。OCRは様々な分野で利用されています。使用例としては、車のナンバープレートを認識し盗難車を検知したり、書籍をデジタル化したりという例があります。Tesseract.jsは100以上の言語に対応するオープンソースのOCRライブラリです。Tesseract.jsは、C言語で開発されたTesseractOCRエンジンをJavaScriptのWebAssemblyにコンパイルしています。Tesseract.jsを使うと、ブラウザでOCRを簡単に利用できます。

本稿では、Tesseract.jsとReactを使用し、ブラウザ上で画像のOCR処理を行い、読み取ったテキストをSMSとして送信するアプリの作成方法をご紹介します。

前編では、以下のOCRコミュニケーションアプリケーションのフロントエンドを構築しました。続いて、バックエンドを構築しましょう。

バックエンドを構築する

次に、バックエンドを構築します。

プロジェクトのルートディレクトリに.envとserver.jsファイルを作成してください。

まずは、Twilioの認証情報を.envファイルに格納します。

テキストエディタで.envファイルを開き、以下のコードをペーストしてください。

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: …