Build the future of communications.
Start building for free
  • By Stephenie Minami Nakajima
    SlackからSMSを送信するNode.jsアプリケーションを開発する方法 SlackからSMSを送信するNode.jsアプリケーションを開発する方法

    背景

    Slackは企業やコミュニティ内のメンバーや情報、ツールをまとめてくれる、便利なコミュニケーションツールです。

    Slackで取り扱う情報は多種多様ですが、Slackが提供するSlack APIを使用すると、これまでSlack上で手作業で行っていたことを、自動化できます。SMSの送信も、自動化できることの1つです。

    本稿では、Slack APIとTwilio、Node.jsを使って、SlackからSMSを送信するアプリを構築する方法をご紹介します。

    目標

    このチュートリアルを最後まで進めると、以下のような、Node.jsを使ったSlackからSMSを送信できるアプリケーションを開発できます。

    完成アプリイメージ


    チャンネル内で/smsとコマンドを送信すると、モーダルが出現し、 その後電話番号とメッセージを入力してSMSを送信します。送信がうまく実行されると、「SMSを送信しました」メッセージがアプリからチャンネルに送信されます。

    必要事項

    このチュートリアルを進めるには、以下の項目が必要です。

    • Node.js v16以降とnpm
    • JavaScriptとNode.jsの基礎知識。
    • Slackのワークスペース。作成方法について詳しくは、Slack公式ヘルプセンターを参照してください。
    • Twilioのアカウント。Twilioホームページをブラウザで開き、[今すぐ無料サインアッ]ボタンをクリックするか、Twilioアカウントの作成リンクからサインアップします。このリンクを使用するとアカウントのアップグレード時に10米国ドル相当分のクレジットが追加で付与されま …
    Read More
  • By Stephenie Minami Nakajima
    GSAPとVue 3でアニメーションを作成する方法 GSAPとVue 3でアニメーションを作成する方法

    背景

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

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

    目標

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

    Vue GSAPデモ

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

    • ヘッダーが画面上から中央に向かって下がってきて、時間差でリンクがフェードインする。
    • パネルが画面下から中央へ上がってくる。
    • 「Vue Meets GSAP」テキストが画面上から中央に向かって、1行ずつ下がってくる。
    • ボールが画面の上から下がっ …
    Read More
  • By Stephenie Minami Nakajima
    Twilio Functionsを使ったサーバーレス開発のはじめ方 Twilio Functionsを使ったサーバーレス開発のはじめ方

    try-twilio.png

    背景

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

    サーバーレスとは?

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

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

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

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

    Twilio Functionsとは?

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

    Read More
  • By Stephenie Minami Nakajima
    Beginner’s guide to Svelte - From basics to state management and animation Beginner's guide to Svelte

    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.


    Demo of the task management application. The user fills out a form asking for their first and last name. After filling out their name, the user deletes multiple tasks, creates new tasks using the task manager application.

    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 …

    Read More
  • By Stephenie Minami Nakajima
    はじめてのSvelte - 基礎から応用まで はじめてのSvelte - 基礎から応用まで

    背景

    JavaScriptのフロントエンド開発に関わる技術は移り変わりが目まぐるしく、日々新しいツールやフレームワークが誕生しています。Svelteも近年注目を集めているフロントエンドフレームワークの一つです。2021年のStackOverFlowの開発者サーベイでは、Svelteが開発者から最も愛されているツールとして選ばれました。本稿では、Svelteの基礎的な開発方法から、Storeを使った状態管理やアニメーションの適用方法など、応用までご紹介します。

    目標

    このチュートリアルを最後まで進めると、Svelteの基礎から応用までを学べるとともに、以下のようなタスク管理アプリを作成できます。

    アプリ完成イメージ

    Svelteとは?

    Svelteは、ブラウザ上で動作するユーザーインターフェースを作成するためのオープンソースフレームワークです。

    ReactやVue.jsとの違い

    SvelteはReactVue.jsと同様に、ユーザーインターフェースを作成するためのコンポーネントベースのJavaScriptフレームワークです。

    しかし、SvelteとReactやVue.jsには決定的な違いがあります。Svelteは仮想DOMを使用しません。SvelteはTypeScriptで書かれたコンパイラであり、ビルド時にJavaScriptをコンパイルするのに対し、ReactやVue.jsは実行時に仮想DOMを使ってアプリケーションコードを解釈します。

    Svelteとほかのフレームワークの違いについて詳しくは、ブログ記事「SvelteとReactの基本を比較」を参照してください。

    Svelteを使う …

    Read More
  • By Stephenie Minami Nakajima
    Creating an OCR Communication App with Tesseract.js and React (Part 2) Creating an OCR Communication App with Tesseract.js and React (Part 2)

    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:


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

    Read More
  • By Stephenie Minami Nakajima
    Creating an OCR Communication App with Tesseract.js and React (Part 1) Creating an OCR Communication App with Tesseract.js and React (Part 1)

    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 …

    Read More
  • By Stephenie Minami Nakajima
    Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編) Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編)

    背景

    「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コミュニケ …

    Read More
  • By Stephenie Minami Nakajima
    Tesseract.jsとReactでOCRコミュニケーションアプリを作る(後編) Tesseract.jsとReactでOCRコミュニケーションアプリを作る(後編)

    本稿は前編と後編に分かれており、前編ではプロジェクトのセットアップからフロントエンドの構築までを、後編ではバックエンド側の構築と動作検証についてご紹介いたします。
    前編はこちら:Tesseract.jsとReactでOCRコミュニケーションアプリを作る(前編)

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

    アプリ完成イメージ


    バックエンドを構築する

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

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

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

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

    TWILIO_ACCOUNT_SID=XXXXX
    TWILIO_AUTH_TOKEN=XXXXX
    TWILIO_PHONE_NUMBER=XXXXX
    

    XXXXXの文字列は、Twilioの認証情報のプレースホールダーを表しています。

    TWILIO_ACCOUNT_SIDTWILIO_AUTH_TOKENは、Twilio ConsoleからAccount SIDとAuth Tokenを取得し、XXXXXにペーストしてください。Account SIDとAuth Tokenの取得方法について詳しくは、ヘルプセンターの「Account SIDとAuthTokenの確認方法」を参照してください。

    TWILIO_PHONE_NUMBERは、Twilioから取得した電話番 …

    Read More
  • By Stephenie Minami Nakajima
    Building a Delivery Reminder System with Twilio’s Answering Machine Detection (AMD) and Node.js Building a Delivery Reminder System with Twilio’s Answering Machine

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

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